CSSでテキストを自由自在に操る方法【文字装飾を徹底解説】

フロントエンド
1935 view

CSSでテキストを自由自在に操る方法【文字装飾を徹底解説】

最終更新日:2019/03/07

今回は、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 2の場合

色々なサイトのline-height

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

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

googleの検索の説明文　1.4
twitterのbody 約1.43
medium記事 1.58
ameblo記事1.6
日経新聞記事　1.7
niftynews記事 1.8
Qiita記事 1.9

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 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 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”;を指定するだけです。
下記のコードの下２行は全てのブラウザに対応する為のおまじないです。

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

縦書き文字にする

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

先程と同様に、コードの上２行は全てのブラウザに対応する為のおまじないです。
ブラウザ毎に挙動が少し異なるようですが、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で対応できる。

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

今回の記事では、CSSグリッドを使用して画面の幅に応じて列の量を変える方法を紹介します！CSSのグリッドを使いこなすことで、col-sm-4, col-md-8などを使用して、HTMLを乱雑にしたり、media only screen などを使用する必要性が無くなります。FlexBoxと一緒でモダン...

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック