16.4.5. 文字の装飾と表示位置

テキストに関する見ばえを指定する方法を説明します。

文字の色 #

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

ソース

フェラーリはイタリアの自動車メーカーで、優秀な F1 コンストラクターとして有名である。出力

フェラーリはイタリアの自動車メーカーで、優秀な F1 コンストラクターとして有名である。

値の部分は red, blue など名前で指定することもできますが、他にも # の後に 16 進数の 2 桁の数を 3 つ続けて書いて光の三原色(赤・緑・青)の強さを指定することもできます。たとえば赤色は #ff0000 と表されるので、上の例は次のように書いても構いません。

ソース

フェラーリはイタリアの自動車メーカーで、優秀な F1 コンストラクターとして有名である。出力

フェラーリはイタリアの自動車メーカーで、優秀な F1 コンストラクターとして有名である。

色の指定について詳しいことは 16.4.9. 補足 を参照してください。

文字の大きさ #

文字の大きさは font-size プロパティで指定します。

ソース

font-size プロパティを使うとこのように文字が大きくなります。出力

font-size プロパティを使うとこのように文字が大きくなります。

値の指定には 16.4.9. 補足 で説明するように数字を使っても良いですし、large などのキーワードで指定することもできます。medium が通常のサイズで xx-small, x-small, small, medium, large, x-large, xx-large の順に字が大きくなっていきます。

なお font-size プロパティ指定の際には、em は親要素のフォントサイズを意味します。

文字の太さ #

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

ソース

文字を太くするには font-weight プロパティを使います出力

文字を太くするには font-weight プロパティを使います

値として normal を指定すると普通の太さ、bold を指定するとそれより太くなります。また 100, 200, …, 900 と 100 単位の数字で指定することもできます。この場合数字が大きくなるほど文字は太くなりますが、どれくらい太くなるかはウェブブラウザに依存します。

親要素との相対的な太さを指定するときは border, lighter という値を使います。

斜体 #

文字を斜体にするには font-style プロパティを用います。

ソース

font-style プロパティの値を italic にするとイタリック体になります。出力

font-style プロパティの値を italic にするとイタリック体になります。

値には normal, italic, obliqueの3つがあります。italic も oblique も斜体ですが、oblique は通常のフォントを傾けるのに対し、italic は斜体専用のフォントを表示します。

フォント #

フォントを変えるには font-family プロパティを用います。

ソース

フォントを fantasy にしてみました。ソースと出力の見た目がちょっと変わりますね。出力

フォントを fantasy にしてみました。ソースと出力の見た目がちょっと変わりますね。

値としてフォント名を指定する場合は、”ＭＳ　ゴシック”のようにクォーテーションでフォント名をくくります。またフォント名以外にフォントファミリー (serif, sans-serif, cursive, fantasy, monospace など) を指定することも出来ます。

アンダーライン、打ち消し線 #

文字にアンダーラインや打ち消し線を付けるには text-decoration プロパティを使います。

ソース

下線、打ち消し線出力

下線、打ち消し線

値には underline, line-through の他に oveline (上線) と blink (文字の点滅) があります。

行の高さ #

行の高さを設定するには line-height プロパティを使います。

ソース

普通の行の高さは
こんな感じです。

しかし line-height プロパティを指定すると
このように 1 行の高さを変えることができます。

普通の行の高さは

こんな感じです。

しかし line-height プロパティを指定すると

このように 1 行の高さを変えることができます。

文字の表示位置 #

テキストの表示位置は通常左揃えですが text-align プロパティを用いると右揃えや中央揃えができます。

ソース

こうすると中央に文字が表示されます。今度は右揃えです。

プロパティの値には left, center, right と justify の4つがあります。justify は両端を揃えることです。

インデント #

ブロック要素のはじめの 1 行の字下げ幅を指定するには、text-indent プロパティを用います。

ソース

この文章の左端が、通常の位置です。

一方 text-indent プロパティを使うと、字下げして表示されます。

この文章の左端が、通常の位置です。

一方 text-indent プロパティを使うと、字下げして表示されます。

長さは数値で指定する他に、親ブロック要素の横方向の長さに対する割合を%で指定することもできます。数値による指定については 16.4.9. 補足 を見てください。