【CSS】テキスト関連の装飾

テキストを装飾するCSSプロパティをまとめました。

イメージとしては太字とか下線とか Microsoft Officeででできるものは全てできる感じですね。

フォントの大きさ
1. フォントサイズの単位
2. フォントサイズの変更
フォントに関するプロパティ
テキストに関するプロパティ

フォントの大きさ

フォントサイズの単位

CSSでフォントサイズを指定するときの単位は2種類あります。

絶対値の「px（ピクセル）」と、相対値の「em（エム）」と「rem（root em）」です。

「px」はそのままピクセル（画素、ドット、液晶の点）の数で大きさを指定します。

「em」はその要素のフォントサイズを 1としたときの比率です。

「rem」はhtml要素のフォントサイズを 1としたときの比率です。

初期値では 1em = 1rem = 16px となります。

ちょっとわかりずらいので、下の2つの例で p要素のフォントサイズがどうなるか確認してみてください。

CSS

html { font-size : 20px ; }
div { font-size : 16px ; }
p { font-size : 0.5em ; }

HTML

<html>
    <div>
        <p>ここは 8pxになります</p>
    </div>
<html>

2つめ。

CSS

html { font-size : 20px ; }
div { font-size : 16px ; }
p { font-size : 0.5rem ; }

HTML

<html>
    <div>
        <p>ここは 10pxになります</p>
    </div>
<html>

フォントサイズの変更

もうすでに上で出てますが、font-sizeプロパティで文字を大きくしたり小さくしたりできます。

パソコンで20pxでつくって丁度いいと思っても、スマホで20pxだと大きいと感じることもあるので、レスポンシブデザイン（スマホ画面サイズ対応）では remを使うのがいいみたいですね。

デザインの都合上大きさを変えたくないときは px、周りに合わせて大きさが変わってもいいときは em, remといった使い分けがいいかと。

フォントに関するプロパティ

文字の上下の余白の大きさを指定する

line-heightプロパティで文字の上下の余白の大きさを指定します。

font-sizeを 10px、line-heightを 20pxとした場合、上下に余白が 5pxずつになります。

CSS

p { line-height : 20px }

フォントの種類を指定する

font-familyプロパティでフォントの種類を指定します。

「,」で区切って複数指定すること場合が多いみたいですね。

理由は環境によってはそのフォントが無い可能性があるからで、ない場合は前に書かれたものから優先して適用されます。

フォント名の中にスペースが含まれるものは「”」または「’」（これらを引用符といいます）で囲います。

そうでないものも引用符で囲ってもいいので、引用符を使っておいた方が無難ですね。

指定したフォントが全て無い場合に「じゃあこんな雰囲気のフォントで」という指定の仕方があります。

それは総称フォントファミリーというもので、5種類ありますが、「serif」と「sans-serif」のどちらかを指定しておけばOKです。

これらは引用符は使えないことに注意しましょう。

「serif」と「sans-serif」はセリフがあるかないかで、サンセリフは明朝体、セリフはゴシック体のイメージです。

CSS

p { font-family : "Osaka", "メイリオ", sans-serif }

文字の太さを指定する

font-weightプロパティで文字の太さを指定できます。

100, 200, 300…, 900 の 9段階で太さを指定できるようになってますが、残念ながら日本語のフォントは「normal (ふつう) 」「bold (太字)」の2種類だけしか対応してないことが多いです。

なので、「normal」と「bold」だけ覚えておけば十分でしょう。

一応「bolder」と「lighter」という1段太くしたり、細くしたりするものもあります。

CSS

.sample_weight400 { font-weight: normal }
.sample_weight700 { font-weight : bold }

HTML

<p class="sample_weight400">ここはふつうの太さ</p>
<pclass="sample_weight700">ここは太字</p>

文字を斜体にする

font-styleプロパティで文字を斜めにします。

指定できる値としては「normal」「italic」「oblique」があります。

欧文フォントの場合、イタリック体と斜体で別のデザインが用意されてることがありますが、日本語フォントの場合はほぼ用意されてないので、単純に斜めになるだけで表示内容は同じです。

CSS

.sample_normal { font-style : normal }
.sample_italic { font-style: italic }
.sample_oblique { font-style : oblique }

HTML

<p class="sample_normal">normal</p>
<p class="sample_italic">italic</p>
<p class="sample_oblique">oblique</p>

ブラウザ

normal

italic

oblique

フォント関連を一括指定する

ここまで説明してきたフォント関連の値をまとめて指定することができるのが fontプロパティです。

各プロパティの値は半角スペースで区切って指定しますが、順番があるので注意してください。

最初に font-styleと font-weightを指定します
次に font-sizeを指定します
次の line-heightを指定する場合は、その前に指定した font-sizeとの間を「/」で区切ります
最後に font-familyを指定します

1と 3は省略できます。

一行で書けるのはスマートですが、順番を覚えてないと調べて使う羽目になるので、一つずつ別に指定していった方がいいかもです。

テキストに関するプロパティ

文字の色を指定する

colorプロパティで文字の色を指定します。

CSS

.sample_color { color: red }

HTML

<p class="sample_color">文字に色をつける</p>

ブラウザ

文字に色をつける

文字に影を付ける

text-shadowプロパティで文字に影を付けます。

どんな影をつけるかを 4つ値を半角スペースで区切って指定します。

影の表示位置の右方向へ移動量（マイナスで左方向）
影の表示位置の下方向へ移動量（マイナスで上方向）
影のぼかす範囲（強さ）
影の色を指定

3と 4は省略可です。

また、「,」で影を複数つけることもできます。

CSS

.sample_shadow {
    font-size : 30px ;
    text-shadow : 30px 0px 3px red,   0px 30px 3px blue ;
}

HTML

<p class="sample_shadow">A</p>

ブラウザ

いろいろ説明しましたが、実際にやってみた方が分かりやすいと思うので、ジェネレータサイトを貼っておきます。

http://www.bad-company.jp/text-shadow/

テキストの左寄せ、中央寄せ、右寄せ

text-alignプロパティで文字を左寄せ、中央寄せ、右寄せにしたいときに使います。

値はそれぞれ「left」「center」「right」です。

CSS

.sample_left { text-align : left }
.sample_center { text-align : center }
.sample_right { text-align : right }

HTML

<p class="sample_left">左寄せ</p>
<p class="sample_center">中央寄せ</p>
<p class="sample_right">右寄せ</p>

ブラウザ

左寄せ

中央寄せ

右寄せ

文字に下線、上線、取り消し線を付ける

text-decorationプロパティで下線、上線、取り消し線を付けます。

値はそれぞれ「underline」「overline」「line-through」です。

CSS

.sample_under { text-decoration : underline }
.sample_over { text-decoration : overline }
.sample_through { text-decoration : line-through }

HTML

<p class="sample_under">下線</p>
<p class="sample_over">上線</p>
<p class="sample_through">取り消し線</p>

ブラウザ

下線

上線

取り消し線

文字の間隔を指定する

letter-spacingプロパティで文字と文字の間隔を指定します。

「normal」が初期値で 0です。

emで指定した方がいいです。文字の大きさが変わっても間隔のバランスは変わらないので。

一応マイナスでも指定できます。

CSS

.sample_space { letter-spacing : 1em }

HTML

<p>文字の間隔は0em</p>
<p class="sample_space">文字の間隔は1em</p>

ブラウザ

ここの文字の間隔は0em

ここの文字の間隔は1em

縦書きにする

writing-modeプロパティで縦書きになります。

登場する機会は少なそうなので紹介まで。

CSS

.sample_tate { writing-mode : vertical-rl }

HTML

<p class="sample_tate">
    吾輩は猫である。<br>
    名前はまだない。<br>
    どこで生れたか頓と見当がつかぬ。
</p>

ブラウザ

吾輩は猫である。
名前はまだない。
どこで生れたか頓と見当がつかぬ。