テックブログ

  1. CSS
  2. 24 view

【脱初心者!】CSSでの文字装飾を徹底解説

今回は、CSSでの文字装飾についてまとめる事にしました。

この記事を読めば、CSSでの文字装飾を全てマスターすることが出来ます。

em、remの使い方や、font-feature-settingsで文字カーニングが出来るという事を知らない人は結構多いのではないでしょうか!?

知ってるものも多いと思うので、サクサク飛ばしながら読んでいってください。

実践的な文字装飾

サイズ変更 font-size

文字のサイズは、font-sizeプロパティーを数字+単位で指定する事で変更できます。
単位にはpx、%、em、remがあります。

指定できる単位と説明

  • pxは絶対値
  • %は親要素の相対値
  • emも親要素の相対値
  • remはHTMLのfont-sizeからの相対値

CodePenでHTML/CSSのサンプルを用意しているので確認に使ってください。

See the Pen OaqRQE by akitoshi (@kakizoe) on CodePen.

h2→ 24px
h2のspanで囲われた要素→ 31.2px
h3→ 24px

理由
h2→ 絶対値
h2のspanで囲われた要素→ h2の24pxを親要素に持ち、emで1.3倍が指定されているから
h3→ HTMLのfont-sizeの初期値が16px。remで1.5倍が指定されているから。

rem指定にすると、ルートエレメント(HTMLのfont-size)を変更するだけで、様々なところで指定された要素を変更可能。
レスポンシブにも便利。
なので、px、em、%による指定よりも、rem指定がオススメです。

色変更 color

文字の色を変更したいときはcolorプロパティーを使用します。
文字色の変更には、色名を指定する方法と、カラーコードを使用する方法があります。

HTML/CSSサンプル

See the Pen xQBRMz by akitoshi (@kakizoe) on CodePen.

カラーコードを指定する場合は、HTMLカラーチャートでカラーコードを選ぶことができます。

また、Chromeの検証機能を使うと、サイトのロゴと、同じ色にしたいなどといった時に便利です。
color

文字の太さを変える font-weight

文字の太さを変更する際にはfont-weightプロパティーを利用します。

HTML/CSSサンプル

See the Pen Gwergg by akitoshi (@kakizoe) on CodePen.

font-weightは数値でも指定することができますが、上記の3つさえ覚えればOKです!

行の高さの変更 line-height

行の高さを変更するにはline-heightプロパティーを使用します。
自分のfont-sizeを1とした、相対値指定と、pxによる絶対値指定が可能です。

HTML/CSSサンプル

See the Pen PxLWOG by akitoshi (@kakizoe) on CodePen.

line-height 1の場合
line-height
line-height 2の場合

色々なサイトのline-height

google-line-height

Google検索の説明文のline-heightが1.4だったので、可読性を最低限維持しながら情報を詰め込む場合は1.4で十分なようです。

他にも少しだけ、色々なサイトのline-heightを調べてみたので、参考にしてみてください

1.7ぐらいのサイトが多いようなので、悩んだら1.7にしておくと良さそうですね。

文字間隔の変更 letter-spacing

文字の間の隙間はletter-spacingプロパティーで変更できます。
letter-spacingプロパティの指定は、行頭、行末には影響を与えず、マイナスの値を指定する事も可能です。

HTML/CSSサンプル

See the Pen MzxJXB by akitoshi (@kakizoe) on CodePen.

letter-spacingのお供 text-indent

先程のletter-spacingのサンプルをみてください。
letter-spacing で間隔を開けた際に、最後の文字の後ろにも空間ができてしまい、中央寄せをしているのにずれているように見えてしまっていますね。
そんな時に役にたつのがtext-indentです。

text-indentプロパティを使用すると、文章の段落などの一行目のインデント幅を指定する事ができます。
ので、letter-spacingの値と同じだけ、text-indentを追加します。

HTML/CSSサンプル

See the Pen KrEWXE by akitoshi (@kakizoe) on CodePen.

中央寄せに成功する事ができました。
text-indentプロパティーでは、letter-spacingと同様に、マイナスでの指定も可能になっています。

線をひく text-decoration

text-decorationプロパティーを使うと、様々なタイプの線を引く事ができます。

  • 元々下線が引かれていて消したい時 text-decoration:none;
  • 下戦を引きたい時 text-decoration:underline;
  • 打ち消し線を引きたい時 text-decoration:line-through;
  • オプションを指定したい場合 text-decoration:underline [ボーダースタイル] [カラーコード];

よく使うボーダースタイルの紹介

  • none 初期値。既存のデザインを打ち消したい時に使用する。
  • solid 一本の線
  • double 二本の線
  • dashed 破線
  • dotted 点線

下のサンプルでは上記で紹介したborder以外の例ものせてあります。

HTML/CSSサンプル

See the Pen vQPZOo by akitoshi (@kakizoe) on CodePen.

枠で囲む border

文字に限った事ではないですが、枠で囲む際にはborderプロパティーを使用します。
borderプロパティーで指定できるオプション

  • ボーダースタイル
  • 枠の太さを何ピクセルにするか
  • 何色にするか

HTML/CSSサンプル

See the Pen aQMwVX by akitoshi (@kakizoe) on CodePen.

フォントの種類を変える font-family

font-familyは閲覧者のPCに該当フォントが入っていない場合適用されないので、優先度の高いものから複数指定するのが一般的です。

使い方

font-family: 一番使いたいフォント,二番目に使いたいフォント,三番目に使いたいフォント,・・・・・・・;

実は今のwindiiのサイトのロゴもCSSでできてたりします。

font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif;
letter-spacing: 1.2px;
font-weight: bold;

有名なフォント

  • ゴシック体 sans-serif
  • 明朝体 serif
  • メイリオ Meiryo

他にも数多くのフォントがあり、以下のサイトで確認する事ができます。
総称ファミリ名分類のフォント名一覧

大企業のフォント調査

Google
font-family: arial,sans-serif;

Twitter
font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

AMAZON
font-family: 'Hiragino Kaku Gothic Pro W3','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;

YAHOO
font-family:MS PGothic,Arial,Hiragino Kaku Gothic ProN,Osaka,sans-serif;

もしかしたら使うかもしれない文字装飾シリーズ

文字カーニングを行う font-feature-settings

カーニングとは、特定の文字同士が組み合わさった時に体裁よく見えるよう文字と文字の間隔を詰める機能です。
(特定の文字とは半角英数字、区切り文字 (、。括弧など)を指します。)

CSSのfont-feature-settingsプロパティーを使えば、イラストレーター等を使用しないでも、文字カーニングする事ができます。

この画像の上の文字がカーニングを施したものです。
全体的に文字が詰められていますが、特に句読点のところが詰まって綺麗になったのではないでしょうか。

使い方は、シンプルでfont-feature-settings: “palt”;を指定するだけです。
下記のコードの下2行は全てのブラウザに対応する為のおまじないです。

.curning {
font-feature-settings: "palt";
-moz-font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
}

縦書き文字にする

CSSで縦書き文字にするには、writing-mode: vertical-rl;プロパティを使います。

先程と同様に、コードの上2行は全てのブラウザに対応する為のおまじないです。
ブラウザ毎に挙動が少し異なるようですが、CodePen上では、位置が左寄せになってしまいました。
左端から書かれるように、するため、position:absolute;right:0;で対応しています。

See the Pen JezMab by akitoshi (@kakizoe) on CodePen.

選択範囲の色を変更する ::selection

CSS の ::selection 疑似要素は、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用します。

以下の選択してくださいの部分を選択してみて下さい。
使用方法は、適用したい要素の後に::selectionをつけ、backgroun:カラーコード;です。

See the Pen MzxQxo by akitoshi (@kakizoe) on CodePen.

番外編

文字にルビを振る

html-css-ruby

<ruby>
平 <rt>へい</rt>
成 <rt>せい</rt>
</ruby>

まとめ

  • font-sizeはremがオススメ
  • 色の変更は、カラーコードで。Chromeの検証が便利
  • 文字の太さはfont-weightで変更 bold normal lighterを覚えればいい。
  • 行間 line-heightは困ったら1.7
  • 文字間隔調整のletter-spacingはtext-indentと一緒に使う
  • ボーダースタイルは複数ある。
  • font-familyは複数指定する。
  • CSSで文字カーニングが実装できる。
  • 縦書きで和風にする事だってできる。
  • ルビはHTMLで対応できる。
The following two tabs change content below.

zoe

1994年、京都生まれ。麻布高校卒業後、2年間FPSのクランマスターとして活躍し、駒澤大学の経営学部に進学 → 中退→ とんかつ屋→ WINDII→ Sier→ ベンチャー→ WINDII
  • コメント: 0

CSSの最近記事

  1. Flexboxを習得して使いこなす【CSS】

  2. WordPressで目次をサイドバーに固定する方法【JS不要】

  3. 【脱初心者!】CSSでの文字装飾を徹底解説

  4. GRID入門 CSSでHTMLをレスポンシブ対応にする方法

  5. 【超簡単】Angular6でPug + Stylusを導入して爆速コーディングする方法

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。