テキストの装飾

色の指定

<div style="color:#00f; background:inherit;">サンプル文字列</div> <div style="background-color:#fff; color:inherit;">サンプル文字列</div><br /> <div><span style="background-color:#fff; color:#00f;">一部</span>だけの指定です.</div>

出力結果は以下です.

サンプル文字列
サンプル文字列

一部だけの指定です.

色の指定方法は以下の通りです.

inheritで色を継承します.

Caution

背景色を指定した場合,たとえ同じ色であっても,文字色も指定しなければいけません.逆も同様です.

文字の大きさ

<div style="font-size:2em;">サンプル文字列</div>

出力結果は以下です.

サンプル文字列

サイズの指定方法は以下の通りです.

文字の装飾

<div style="text-decoration:underline overline;">サンプル文字列</div>

出力結果は以下です.

サンプル文字列

noneで何もせず,underlineで下線を,overlineでオーバーラインを,line-throughで打ち消し線をひきます.また,blinkで文字を点滅させます.

Caution

点滅によるちらつきが発生するため,blinkの使用はなるべく控えるべきです.

大文字と小文字

<div style="text-transform:capitalize;" xml:lang="en">sample string</div>

出力結果は以下です.

sample string

英文字の操作です.noneで何もせず,capitalizeで単語の先頭を大文字に,uppercaseで全て大文字に,lowercaseで全て小文字にします.

テキストの配置

行配置

<div style="text-align:center;">サンプル文字列</div>

出力結果は以下です.

サンプル文字列

ブロック要素のみ有効です.leftは左寄せ,centerはセンタリング,rightは右寄せ,justifyは均等割付です.

垂直配置

<span style="font-size:3em; vertical-align:top;">大きい文字があります.</span> このようにテキスト等の垂直配置を指定します.<br /> <span style="font-size:3em; vertical-align:middle;">大きい文字があります.</span> このようにテキスト等の垂直配置を指定します.

出力結果は以下です.

大きい文字があります.このようにテキスト等の垂直配置を指定します.
大きい文字があります.このようにテキスト等の垂直配置を指定します.

インライン要素のみ有効です.baseline(既定値)はその外の要素のベースラインに合わせて整形します.text-topは,値が指定された要素の一番上を,その外の要素の文字の一番上に合わせて整形します.text-bottomは,値が指定された要素の一番下を,その外の要素の文字の一番下に合わせて整形します.middleは,値が指定された要素の中央点を,その外の要素のベースラインから0.5ex上の点に合わせて整形します.superは上付き文字に,subは下付き文字にします.topはその要素で最も上にあるものに上端を合わせ,bottomはその要素で最も下にあるものに下端を合わせます.

インデント

<div style="text-indent:2em;">サンプル文字列<br />サンプル文字列</div>

出力結果は以下です.

サンプル文字列
サンプル文字列

ブロック要素のみ有効です.単位を使って1行目のインデントの幅を指定します.マイナスの値も指定できます.

行送り

<div style="line-height:2em;">サンプル文字列</div>

出力結果は以下です.

サンプル文字列

ブロック要素のみ有効です.単位を使って1行の高さを指定するか,数字を直接記述して,文字の高さの何倍にするか指定します.

字間

<div style="letter-spacing:1em;">サンプル文字列</div>

出力結果は以下です.

サンプル文字列

単位を使って字間の幅を指定します.マイナスの値も指定できます.また,normalと書くとUAの既定値になります.

単語間スペース

<div style="word-spacing:1em;" xml:lang="en">sample string</div>

出力結果は以下です.

sample string

欧文の単語間隔を単位を使って指定します.マイナスの値も指定できます.また,normalを指定するとUAの既定値になります.

スペースの扱い

<div style="white-space:pre;">サ ン  プ ル  文 字  列</div>

出力結果は以下です.

サ ン  プ ル  文 字  列

ブロック要素のみ有効です.normalでは通常通りXHTML文章中の空白や改行は意味をもちません.preでpre要素と同様の効果です.nowrapUAの幅に合わせた折り返しを行いません.

背景画像

<div style="background-image:url(sample.png); background-repeat:repeat-x; color:inherit;"> 背景画像の指定</div>

出力結果は以下です.

背景画像の指定

background-imageプロパティで背景画像のファイルを指定します.background-repeatプロパティでは,repeatは格子状に(既定値),repeat-xは横方向帯状に,repeat-yは縦方向帯状に画像を敷き詰めます.no-repeatを指定すると,画像を1つだけ表示します.

これらの属性をbody要素に指定してページの背景とした場合,背景画像をスクロールするか固定するかをbackground-attachmentプロパティで指定します.scrollでスクロール(既定値)させ,fixedで固定させます.

また,background-positionプロパティで背景画像の位置を決めます.主にブロック要素に指定し,2つの方法があります.

フォント

フォントの種類

<div style="font-family:Arial,'Times New Roman';" xml:lang="en">sample string</div>

出力結果は以下です.

sample string

フォントの名前を指定してフォントを変えます.フォント名が空白文字を含む場合は'でフォント名を囲います.複数指定もできます.上の例では,Airalがある場合はそれで,ない場合はTimes New Romanが適用されます.それもない場合は,UA既定のフォントが適用されます.

フォントのスタイル

<div style="font-style:italic;">サンプル文字列</div>

出力結果は以下です.

サンプル文字列

normalで通常の書体,obliqueで斜体,italicでイタリック体になります.

フォントの太さ

<div style="font-weight:bold;">サンプル文字列</div>

出力結果は以下です.

サンプル文字列

normalで通常の太さ,boldで太字,bolderで1段階太く,lighterで1段階細くします.また,100から900までの100刻みの数字も指定でき,数字が大きいほど太くなります.normalは400,boldは700に相当します.

フォントの変体

<div style="font-variant:small-caps;">Sample string</div>

出力結果は以下です.

Sample string

normalで何もせず,small-capsで小文字がスモールキャピタルで表示されます.