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

VOL13. IE独自拡張による設定　その3 ★ テキスト　5.グリッド(升目)を想定する（IE5.0以降で有効）

通常、テキストの行間や文字間隔は「line-height:」や「letter-spacing:」で調整しますが、その代わりに原稿用紙の升目を想定して、行間隔や文字間隔を指定する方法があります。(※「line-height:」や「letter-spacing:」については、Vol8.テキスト表示に関する設定・その2を参照して下さい。)

「layout-grid-mode:」「layout-grid-type:」で文字を升目に合わせる方法を決め、升目のサイズは「layout-grid-line:」「layout-grid-char:」で指定します。実際に升目が表示されるわけではありませんが、IEでは、この方法でも文字の配置を微調整することができます。ただし、升目サイズは文字より大きく設定しておかないと正常に動作しないので注意して下さい。それぞれに対応する<値>は以下の通りです。

�@) layout-grid-mode: <値>;

文字をグリッドのどこに配置するかを指定しますが、升目サイズを指定する「layout-grid-line: 」「layout-grid-char:」がデフォルトでは「none=グリッドを設定しない」になっているので、これらのプロパティとセットで設定しないと動作しません。

both ... 文字を升目の中央に配置する

　※「layout-grid-line:」「layout-grid-char:」両方の設定が必要

line ... 行間は指定された幅で配置するが、文字間隔の設定は無効にする

　※「layout-grid-line:」の設定が必要

char ... 文字間隔は指定された幅で配置するが、行間の設定は無効にする

　※「layout-grid-char:」の設定が必要

none ... グリッドを無効にする

�A) layout-grid-type: <値>;

「layout-grid-mode:」が both、char の時に、「layout-grid-char:」で指定された<値>をそれぞれ以下のように設定に反映します。

loose ... 「layout-grid-char:」で指定された数値を各文字間の間隔に反映、ただし、アルファベットに対しては、この数値を升目幅とする。 (デフォルト)

fixed ... 「layout-grid-char:」で指定された数値を全ての文字に対して升目幅とし、文字は各升目の中間に配置

strict ... 「layout-grid-char:」で指定された数値を升目幅として表示に反映。ただし、アルファベットに対しては、幅の設定は無効として反映しない。

�B) layout-grid-line: <値>; / layout-grid-char: <値>;

「layout-grid-line:」は行間、「layout-grid-char:」は文字間隔を設定します。指定方法は以下の通りです。

auto ... 各要素に指定されている文字サイズの中で、最も大きいものに合わせて升目のサイズを想定する 

数値+単位 ... 数値に単位をつけて指定する

数値+% ... 親要素のボックスサイズに対する割合で指定する

none ...グリッドを設定しない (デフォルト)

�C) layout-grid:<mode><type><line><char>;

�@)〜�B)の<値>を順に並べることによって、升目を一括設定します。

ex.) 

p { layout-grid: both loose 25px 20px; }

p { layout-grid: both fixed 25px 20px; } 

p { layout-grid: both strict 25px 20px; }

初級篇2.VOL13. IE独自拡張による設定・その3-4 <<

>> 初級篇2.VOL13. IE独自拡張による設定・その4