17.4.5 文字の装飾と表示位置

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

文字の色

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

ソース

<span style="color: red;">フェラーリ</span>はイタリアの自動車メーカーで,優秀な F1 コンストラクターとして有名である.

出力

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

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

ソース

<span style="color: #ff0000;">フェラーリ</span>はイタリアの自動車メーカーで,優秀な F1 コンストラクターとして有名である.

出力

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

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

文字の大きさ

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

ソース

font-size プロパティを使うと<span style="font-size: large;">このように</span>文字が大きくなります.

出力

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

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

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

文字の太さ

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

ソース

文字を太くするには <span style="font-weight: bold;">font-weight プロパティ</span>を使います

出力

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

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

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

斜体

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

ソース

font-style プロパティの値を italic にすると<span style="font-style: italic;">イタリック体</span>になります.

出力

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

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

フォント

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

ソース

<span style="font-family: 'fantasy';">フォントを fantasy にしてみました.ソースと出力の見た目がちょっと変わりますね.</span>

出力

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

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

アンダーライン,打ち消し線

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

ソース

<span style="text-decoration: underline;">下線</span>,<span style="text-decoration: line-through;">打ち消し線</span>

出力

下線打ち消し線

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

行の高さ

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

ソース

<p>普通の行の高さは<br>こんな感じです.</p> <p style="line-height: 2em">しかし line-height プロパティを指定すると<br>このように 1 行の高さを変えることができます.</p>

出力

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

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

文字の表示位置

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

ソース

<div style="text-align: center">こうすると中央に文字が表示されます.</div> <div style="text-align: right">今度は右揃えです.</div>

出力

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

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

インデント

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

ソース

<p>この文章の左端が,通常の位置です.</p> <p style="text-indent: 1em;">一方 text-indent プロパティを使うと,字下げして表示されます.</p>

出力

この文章の左端が,通常の位置です.

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

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