デザイン通りに近づけたい！文字に関するCSSプロパティ総まとめ

これひとつで印象がガラリと変わる、デザインの要（と言っても過言ではないかも？）。
それが文字ではないでしょうか。

特に日本語は漢字・ひらがな・カタカナ・アルファベットに数字と、いろいろな印象の文字が並んでいるので、デザイナーさんの苦労もわかるような気がします。

今回は、コーディング（CSS）の力で、そんなデザイナーさんの苦労の結晶であるカンプに少しでも近づけたり、むしろもっと見やすく美しいレイアウトにできないのか？ということに挑戦していきます！厳選した全20種類のCSSプロパティやテクニックをどどんとご紹介いたします！！

Contents

1. ★文字のCSSプロパティ：基本編
   • 01/font-size: 文字の「大きさ」を変える
   • 02/font-weight: 文字の「太さ」を変える
   • 03/color:文字の「色」を変える
   • 04/font-style:文字をナナメにする
   • 05/font-family: フォントの種類を指定する
   • 06/line-height: 文字(行)の高さを指定する
   • 07/font-variant: 文字を小さくする
   • 08/font: フォントの指定をまとめて行う
2. ★★文字のCSSプロパティ：応用編
   • 09/letter-spacing: 文字と文字の間隔を変える
   • 10/text-decoration: 文字の傍線を設定する
   • 11/text-align: 文字を寄せる方向を変える
   • 12/text-shadow: 文字に影をつける
   • 13/::selection: テキスト選択時の色を変える
   • 14/writing-mode: 文字を縦書きにする
   • 15/word-wrap: 文字の折り返し方法を指定する
     • -文字折り返しのプロパティ：word-wrap・overflow-wrap・word-break
     • -文字の折り返しをするなら「word-wrap」「word-break」どっち？
3. ★★★文字のCSSプロパティ：マニアック編
   • 16/蛍光ペンみたいな線はどうやったら出せるの？
   • 17/文字にグラデーションをつける
   • 18/「」や。の空白を詰めたい！
   • 19/デザインとWeb上で見え方が違うのを合わせたい！
   • 20/文字の一部だけに効果をつけたい！

文字のCSSプロパティ：基本編

ここでは日常的にコーディングする際に登場するプロパティについて改めて説明します。逆に基本的だからこそ、知らなかったこともあるかもしれません。

01font-size: 文字の「大きさ」を変える

基本中の基本ですね。pxだけでなく、フォントの高さを１とする単位(em)や、％で指定することもできます。
px以外の単位で指定すると、画面の解像度や大きさで相対的に変化するので、レスポンシブデザイン向けです。

02font-weight: 文字の「太さ」を変える

だいたいnormalかboldを使い分ける人が多いと思いますが、100~900の数値(100刻み)で指定することも可能です。
ただ、9種類の太さがあるフォントは少ないですし、ブラウザによって太さの表現が微妙に違うことが多いので、normal/boldの使い分けで十分かもしれません。

ちなみにnormalは数値の400、boldだと700相当になります。

03color:文字の「色」を変える

なぜかfont-color:じゃないんですよねえ。
それはさておき、色は「英語の色名(red, greenなど)で指定する」方法と、「カラーコード(#で始まる6桁の英数字)で指定する」方法がメジャーですが、rgbaで指定すれば文字の透明度を変えることもできます。

---

プロに頼られる、Web制作会社。

プロに頼られる、Web制作会社。

プロに頼られる、Web制作会社。

(↑テキストは弊社サイトのトップから拝借しました。なかなかいいコピーですよね。)

04font-style:文字をナナメにする

引用文や注釈などで使うことが多いナナメ文字。italicは筆記体調のフォントなど、実際にナナメっぽいデザインを想定して作られたものに多く、obliqueはもともとのフォントを単純にななめに傾けただけ、の場合が多いです。

日本語の場合はナナメにデザインされているフォントが用意されているケースが稀なので、italicでもobliqueでも見え方は同じになることがほとんどでしょう。

05font-family: フォントの種類を指定する

ユーザビリティを考慮してデバイスフォント（OS単位であらかじめインストールされているフォント）を指定することがほとんどでしょうが、サイトによってはwebフォントを使うこともあるでしょう。

そんな時に使用するのがこれ。font-familyは「MSゴシック」「ヒラギノ角ゴ Std」など直接フォント名を指定する以外に、「この辺はゴシック系がいい」とか、「ここは筆記体使ってみたいな」というふわっとした指定も可能です。

実際に設定してみるとこんな感じになります。
筆記体(cursive)や装飾的(fantasy)なフォントは日本語部分は対応していないようで、英数字だけ変わっていますね。
最後の等幅(monospace)フォントはそもそもブラウザに入っていない場合が多いので、なんだかイメージとだいぶ違いますね笑。

---

未設定：プロに頼られる、Web制作会社。

メイリオ：プロに頼られる、Web制作会社。

No1.プロに頼られる、Web制作会社。

No2.プロに頼られる、Web制作会社。

No3.プロに頼られる、Web制作会社。

No4.プロに頼られる、Web制作会社。

No5.プロに頼られる、Web制作会社。

06line-height: 文字(行)の高さを指定する

px以外にemや％で指定できるほかに、単位なしの数字だけで指定することもできます。負の数を指定することはできません。

文字の上下の余白については以下のようになります。これを忘れると、他の要素との余白を取るときにズレが生じてしまいます。

例えばfont-sizeが20pxでline-heightが30pxの場合は、30-20=10pxが上下均等に割り振られます。

PCとSPで文字の大きさは変わるけど行間は変えたくない、というときには単位なしでの指定が便利だったりします。ここでもしpxで設定してしまっていると、フォントサイズを変えるたびにいちいちline-heightも修正しないといけなくなります。

なので特に指定がない限りは、line-heightは単位なしで設定するのがおすすめです！

また、font-sizeより小さな値(font-size: 14pxに対してline-heightが10pxや0.8など)を設定すると、2行以上のときに文字が重なってしまいます。
以下、左：line-heightが1.6の場合、右：line-heightが0.7の場合です。

0.7だともはや読めないレベル…。なので、必ずline-heightは1以上に設定しておきましょう！

07font-variant: 文字を小さくする

font-variant: small-caps で文字を小さく（スモールキャップ）にすることができます。

スモールキャップは、大文字を小文字サイズにしたものです。スモールキャップに対応していないフォントの場合は、大文字を自動的に小文字サイズに縮小して表示をするか、適用されないかどちらかになります。

日本語の場合は少しだけ小さく表示されるようですが、あまり使う機会はないと思います。

ソースでは最初の「t」を小文字で入力しているのにご注目ください。

実際に表示されると「t」が小さい「T」になっていますね。

---

this is English title.

---

使うとしたら見出しや文章の先頭などでメリハリをつけるくらいでしょうか。

08font: フォントの指定をまとめて行う

今まで紹介してきたプロパティのほとんどはフォントの設定で基本的なもので、これらのプロパティをまとめて指定することができます。

指定する順番と必須項目があるので下に示します。

line-heightを指定する場合は直前にスラッシュ(/)をつけないとエラーになるのでご注意ください。

文字のCSSプロパティ：応用編

ここからは「デザインにより高い精度で近づける」「むしろデザインを越える」つもりで文字にさまざまな効果を与えるプロパティをご紹介します。

ブラウザによっては対応していないものもあるかもしれないので、使用する際はCan I Use…?などで事前に確認しておくといいでしょう。

↑ Can I Use…?を使うと、どのブラウザのどのバージョンに対応しているかが一目でわかります

09letter-spacing: 文字と文字の間隔を変える

単位はpxやemを指定でき（％はできません！）、マイナスの値を指定することもできます。

実際の例を見てみましょう。

---

①プロに頼られる、Web制作会社。

②プロに頼られる、Web制作会社。

③プロに頼られる、Web制作会社。

④プロに頼られる、Web制作会社。

⑤プロに頼られる、Web制作会社。

ちなみにletter-spacingは行頭には影響はありませんが、行末には適用されるので注意が必要です。

例えば、見出しやタイトルで左右中央寄せにしていて、letter-spacingを大きめに取ると気持ち左にズレているように見えることがあります。
左側が「普通の中央寄せ」、右側が「字間を大きめに取ったほう」です。

「普通の中央寄せ」は問題なさそうなのに対し、「字間を大きめに取ったほう」は行末に空白ができてしまうんですね。
このあたりの解決策は以下のサイトが充実しているので、コーディングしていてハマってしまった場合は参考にしてみるとよいでしょう。

参考：letter-spacingで字間を開けたときに最後の字の後ろまで開いてしまう問題への対処法

10text-decoration: 文字の傍線を設定する

text-decorationは、（）内のプロパティをまとめて指定できるプロパティとして存在しています。
ただ、（）内のプロパティは比較的新しい仕様なので、単体で使うことは避けた方が無難でしょう。

text-decoration-line:blinkを設定すると文字を点滅させることができるのですが、現在は「文字の装飾ではなくアニメーション効果で実現させることが望ましい」とされています。
そのためか、このプロパティが使えるブラウザは現在ほとんどありません。

このtext-decorationを使えば、打ち消し線やちょっとした装飾に使えるので便利ですね！
コードはこんな感じ。必ず「線の位置」「線の種類」「色」がセットになります。波線にしたいからといって、”wavy”だけ書いても適用されないのでご注意を！

11text-align: 文字を寄せる方向を変える

主に使うのはこのあたりです。

実際に見てみましょう。

---

left: プロに頼られる、Web制作会社。

center: プロに頼られる、Web制作会社。

right: プロに頼られる、Web制作会社。

---

justifyは少しわかりにくいかもしれませんが、2行以上にわたる文章の時に効果を発揮します。

こちらが初期値（left）の文章。

これがjustifyに設定した文章です。

justifyに設定している文章のほうは枠ギリギリまで文字が配置されていることにお気づきでしょうか！

そして”「」”や”。”は枠ギリギリまでいってないじゃんｗって思ったそこのアナタ！これをぴったりくっつける方法は後ほど説明しますので、どうぞこのまま読み進めてください。

12text-shadow: 文字に影をつける

text-shadowは以下のように設定します。

各項目の間は半角スペースで区切り、色以外はpx単位で指定します。順番も決まっているので何回も書いて覚えていきましょう。

左方向や上方向に影を付けたい場合は、マイナスの値を設定すると指定できます。
また、上下左右どっちにも付けたい！なんて場合も大丈夫。上記の4項目のセットを「,」(カンマ)で区切れば設定できます。

---

①BRISK エンジニア採用2019

②BRISK エンジニア採用2019

③BRISK エンジニア採用2019

↑ 弊社ではデザイナー、コーダー以外にエンジニアも積極的に募集しております!!

13::selection: テキスト選択時の色を変える

文章をコピーするときに、文字に色が付きますが、これを変更することもできちゃいます。
「 ::selection { [cssを記述] } 」で好きな色に変えられます。
Firefoxに対応させるには先頭に「-moz-」を加えましょう。

サンプルをご用意しましたので、試しに選択してみてくださいね。

---

---

CSSはこんな感じです。backgorundとcolorの組み合わせ次第でいろいろできますね!（ちなみに色以外の設定はできないようです…。）

14writing-mode: 文字を縦書きにする

メインのレイアウトでがっつり使うことはあまりないかもしれませんが、「KVでインパクトを持たせたい」「テーブルの中で部分的に使いたい！」というときなどに出番がある縦書き。

これはwriting-modeで設定することができます。

 

上記以外の値も設定できるようですが、ブラウザによって見え方が大きく変わったり非対応だったりするので、ご利用の際は用法用量を守るといいでしょう。

---

ちなみに大正～昭和初期に見られた、「ルメラヤキ(キャラメル)」「ルービ（ビール）」といった右から左に読む文章については、残念ながら(?)CSSプロパティでは設定できないようです。
地道に入力するしかないようですね…。

15word-wrap: 文字の折り返し方法を指定する

狭い幅の領域に対して、長い文章（URLや改行のない文など）を挿入すると、文字が画面外にはみ出てしまうことがあります。

↑ ちなみこのURLは「竜宮の乙姫の元結の切り外し」をググったもの。日本語で最も長い単語だそうです。

枠内に文字を収めるためには当然文字を「折り返し」する必要があります。しかし困ったことに、2019年現在主流となっているCSS3では、折り返しに関するCSSプロパティは2つ存在するのです。

文字折り返しのプロパティ：word-wrap・overflow-wrap・word-break

それが「word-wrap（overflow-wrap）」と「word-break」です。なんで「word-wrap」は呼び方が２つあるの？という話ですが、ざっくりいうと以下のような経緯があります。

このため「overflow-wrap」を使用する場合は、その名称に対応していないブラウザでも同じ効果を適用するために「word-wrap」も併記する必要があります。

前置きが長くなってしまいましたが、「word-wrap」「word-break」は挙動が違うのでコンテンツによって適切なものを使い分けていきましょう。

文字の折り返しをするなら「word-wrap」「word-break」どっち？

結論から言うと、文字折り返しのプロパティは現状「word-wrap: break-word;」一択です。その理由を説明する前にまずはどんなプロパティなのかを確認しましょう。

「word-wrap」の設定値は以下の通り。

「word-break」は以下の通りです。こちらは日本語や中国語などの言語と英語やフランス語などの言語で挙動が変わるのが特徴です。

上記のプロパティから、文字を折り返す際に候補として挙がるのは「word-wrap: break-word」か「word-break: break-all」になるでしょう。
（もしも「英単語が絶対に出てこない！」という場合なら「word-break: normal」も検討してもいいかもしれません。）

ところが「word-break: break-all」を設定してしまうと、どんな言語でも問答無用で表示範囲外に達したら改行されてしまいます。

これ、ヤバいのかといいますと、英単語の”on”とか”in”など短いものでも途中で改行されてしまうことです。oとiで分けられたりしたら、ものすごく読みづらくなりますよね？
日本語などの場合も「。」など句読点が行頭に来てしまう危険があります。禁則処理どこいった。

その点「word-wrap: break-word」なら、単語の長さが表示範囲以上でない限り、途中で改行されることはないので、禁則処理もきちんと守られます。

以上から文字の折り返しなら「word-wrap: break-word」一択なのです。そして「overflow-wrap: break-word」とあわせて書くようにしましょう。

ちなみに、「word-wrap」「word-break」両方のプロパティを設定すると、word-break: break-all;を設定したのと同じ状態になってしまうので注意が必要です。

文字のCSSプロパティ：マニアック編

ここまでで、文字の間隔を調整したり、線や影を付けるなど、かなりのプロパティをご紹介してきました。
ですが、文字に関するCSSプロパティはまだまだこんなものじゃありません！
かゆいところに手が届くような、そんなマニアックめのプロパティや設定を集めてみました。

16蛍光ペンみたいな線はどうやったら出せるの？

見かけることが多い、文字に蛍光ペンみたいな色線が入っている効果。このブログでも既に何回か登場していますね。

これはtext-decorationでもborderでもないのです。背景色をbackgroundプロパティで設定し、liner-gradiantで色や文字との被り具合を調整します。

BRISK エンジニア採用2019

17文字にグラデーションをつける

ワードアートの挿入

ちょっと懐かしい感じのするこんなグラデーション文字も、以下の順番でできます！

1. ①背景色でグラデーションを設定
2. ②background-clip: text; で文字をくり抜く
3. ③text-fill-colorで、くり抜いた部分に背景色を適用

背景色の代わりに画像を設定することもできるので、表現の幅が広がります。
ただし上記の方法は、対応ブラウザは2019年8月現在で、SafariとChromeのみなので、非対応ブラウザ用に文字色を設定しておきましょう。
この２つにしか対応していないので、上記のプロパティには「-webkit-」を入れるのもお忘れなく。

ただ、どうしても「IEにだって文字グラデーションをつけたい！」ということがあるかもしれません。そんな場合はこちらの記事をご覧ください！
文字数や文字サイズが決まっている場合には効果てきめんです。

IE非対応のCSSグラデーションを文字にかける2つの方法（画像・SVG）

18「」や。の空白を詰めたい！

全角の「」や”、”だとか”。”って、普通の文字よりスペースとりますよね。それがデザインと違う感じになってしまうので気になる…という方もいるのではないでしょうか。
そんなときにめちゃくちゃ使えるのが「font-feature-setting」というプロパティです。これを使えばグラフィックデザインなどでは当たり前の文字詰めがWebでもできちゃうスグレモノなんですよ！

まずは実例をご覧ください。

他の制作会社にはない、「ひと味」違うBRISKの魅力

他の制作会社にはない、「ひと味」違うBRISKの魅力

どうですか、これだけ差が出ます。すごいでしょう！
気になる設定方法は以下の通りです。

よくあるミスが、「機能名」を” “でくくらないこと。くくりわすれるとエラーになり適用されませんのでご注意ください。また、有効か無効かは「1か0」、「onかoff」で設定しますが、省略した場合は自動的に有効とみなされます。

どんな機能が設定できるの？もっと知りたい！という方は以下のサイトがめちゃくちゃ詳しいので、一読することをおすすめします。
参考：文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング

19デザインとWeb上で見え方が違うのを合わせたい！

コーディングしていてよくあるのが、もらったデザインと実際ブラウザで見るので文字の見え方が違うこと。
「フォントの種類も大きさも太さも、字間だって完璧に合わせたのになんで？？？」と首をかしげまくったのはわたしだけではないはず。

そもそもフォントというのはベクターで構成されており、それをラスタライズ（ピクセルで表せるようにする処理）してブラウザ上に表示させています。
ただ、ラスタライズする際にジャギー（ジグザグ）が出てしまって、見た目がガッタガタになるのを防ぐのに「アンチエイリアス」という処理を裏で行っています。

このアンチエイリアスの処理の仕方によって、Web上での文字の見え方に相違が出るというわけです。
で、「どうやって解決するの？」という方法がこちら。reset.cssなどに組み込んでご利用ください。

↑ 出典：Webブラウザにおける文字のアンチエイリアスの現状の最適解

ただ、2017年時点の記事なので、もしかしたら今（2019年）はもっといい方法があるのかもしれませんので、あくまでも参考程度でご覧ください。

20文字の一部だけに効果をつけたい！

これまでご紹介してきたCSSプロパティは文章単位で適用するものがほとんどでしたが、「一文字だけ大きくしたい」「この文字はこの色にして、あの文字はあの色にしたい」なんてこともありますよね。そんなときもCSSにおまかせ！

・文章の１文字目にだけCSSを適用したい場合

・文章の1行目に適用したい場合

---

（例）文章の1文字目に適用したい場合・文章の1文字目に適用したい場合・文章の1文字目に適用したい場合・文章の1文字目に適用したい場合・文章の1文字目に適用したい場合・文章の1文字目に適用したい場合

---

どちらもブロック要素であることが適用条件です。また、::first-lineは改行された文章は対象にならないので、コーディングの際に気を付けましょう。

それ以外の位置に適用させたい場合は”span”タグで文字をくくり、そこにCSSを適用させましょう。

一文字ずつにCSSを当てれば、こんなこともできちゃいます。（用法用量を守って、デザイナーさんやクライアントさんに怒られない範囲でご利用ください。）

ここまでお読みいただき、ありがとうございました！