16.4.7 文字の装飾

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

文字の色

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

例:

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

値の部分はred,blueなど名前で指定することもできますが，他にも#の後に16進数の2桁の数を3つ続けて書いて光の三原色(赤・緑・青)の強さを指定することもできます．これについては16.4.13 補足(2) 色の指定方法を参照してください．

たとえば，赤色は#ff0000ですから，上の例は次と等価になります．

ただ，この方法で望みの色を出すことはたやすくありません．何らかの描画ソフトを利用して，出したい色の赤・緑・青の強さを調べる必要があるでしょう．

文字の大きさ

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

例:

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

値には16.4.12 補足(1) 長さの指定方法で説明する方法を用いて数字で指定する他に，largeなどのキーワードで指定することもできます．mediumが通常のサイズで，xx-small,x-small,small,medium,large,x-large,xx-largeの順に字が大きくなっていきます．

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

文字の太さ

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

例:

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

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

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

斜体

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

例:

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

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

フォント

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

例:

フォントをfantasyにしてみました．

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

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

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

例:

下線，打ち消し線

値にはunderline,line-throughの他にoveline(上線)とblink(文字の点滅)がありますが，blinkに対応しているウェブブラウザはまだ多くないようです．