Purple town

応用編　その４【TXT指定】

応用編　スタイル宣言　その４　文字の配置【TXT指定】

文字の指定が出来るようになったところで次は文字の配置です。
『p』にするか『div』にするか行の大きさで決めようと前に書きましたが実は『div』だけで行の指定をすることができるのです。

前の章で後回しにした『line-height』がこの場合活躍をします。
指定は『font-size』でも指定した数値に単位を入れると『文字のサイズ－行のサイズ』で出た数値が上下に割り振られます。
数値のみを入れた場合はその数字にフォントサイズをかけた値が指定サイズになります。
％での指定も出来ます。

<div style="line-height:normal">いろはにほへと<BR> ちりぬるを</DIV>	いろはにほへとちりぬるを
<div style="line-height:20px">わかよたれそ<BR> つねならむ</DIV>	わかよたれそつねならむ
<div style="line-height:1.5">うゐのおくやま<BR> けふこえて</DIV>	うゐのおくやまけふこえて
<div style="line-height:80%">あさきゆめみし<BR> ゑひもせすん</DIV>	あさきゆめみしゑひもせすん

テキストの配置指定は『text-align』。left（左）、right（右）、center（中央）、justify（均等割付・IE5.0以降対応）があります。

行間と配置も決まったら文字の装飾をしてみましょう。
全体に使うことがあまり無いと思うのでこんなのもある程度に覚えてください。

文字の装飾は『text-decoration』none（なし）、underline（下線）、overline（上線）、line-through（打ち消し線）、blink（点滅）。

大小文字の指定は『text-transform』capitalize（先頭文字のみ大文字）、uppercase（大文字）、lowercase（小文字）。

インデントの指定は『text-indent』１行目の文字の食い込みor字下げを指定します。単位はpxやemやexなど。
〔px＝ピクセル、em＝フォントの高さが１、ex＝xの高さが１〕

この回のおさらい。
<div style="line-height:20px;text-align:justify;text-decoration:line-through;text-transform:capitalize;text-indent:50px"> txtの行間が20pxで均等割付。打ち消し。先頭が大文字。40px下がる。 </div>

txtの行間が20pxで均等割付。打ち消し。先頭が大文字。40px下がる。

ジャンル別一覧