初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL8. テキスト表示に関する設定　その2 ★ 行の高さ（行間）、文字間隔、単語間隔

１．行の高さ（行間）

line-height: <値>;

行の高さとは一行の縦幅のことで、その行に表示されているフォントサイズに対応して行間を決定します。例えばフォントサイズ12ptの時に「line-height: 12pt;」と指定すると、行の高さとフォントの高さが一致することになり、従って文字どうしの上下の空間は「0」になります。「line-height: 3;」とすれば、下の図のようにフォントの高さに対して行の縦幅は3倍になります。

この<値>の指定方法には、以下の4つがあります。

�@）「数値+単位」で指定する

（スタイルシートで使用できる単位については、「Column7.スタイルシートと単位」を参照して下さい。）

ex1. line-height: 1.5em;

�A）「%」で指定する

その要素のフォントサイズを基準として、それに対するパーセンテージで指定します。

ez2. line-height: 150%;

�B）単位なしの数値で指定する

「%」での指定はその要素のフォントサイズを「100」としていますが、これを「1」として単位を省き、数値のみで倍率を指定することもできます。

ex3. line-height: 1.5;

既に気づかれたかもしれませんが、ex.1、2、3は、表示はどれも同じになります。

�C）キーワードで指定する

「line-height:」に対応するキーワードは「normal」のみです。これを指定すると、行間はブラウザが自動的に設定してくれますが、デフォルトなので特に指定しなくても同じ結果になります。

２．文字間隔

letter-spacing: <値>;

この<値>は「数値+単位」で指定します。マイナスの数値を指定することもでき、これにより文字を重ね合わせたロゴなどのデザイン文字を表現することもできます。なお、デフォルトは「normal」で、これを指定すると標準的な文字間隔が自動的に設定されます。

ex. 

letter-spacing: 5px; 

letter-spacing: 8px; 

３．単語間隔

word-spacing: <値>;

単語どうしの間隔を指定するプロパティです。この<値>も「数値+単位」で指定します。デフォルトは「normal」で、これを指定すると標準的な間隔が自動的に設定されます。

ex. 

word-spacing: 2px;  → 

word-spacing: 10px;  → 

初級篇2.VOL8. テキスト表示に関する設定・その1 <<

>> 初級篇2.VOL8. テキスト表示に関する設定・その3