【layout-grid】グリッドに関する指定をまとめて行う

グリッドのイメージ

layout-gridプロパティでは、グリッドに関するプロパティ(layout-grid-modelayout-grid-typelayout-grid-charlayout-grid-line)の値をまとめて指定することができます。

指定する時は、各プロパティの値を任意の順番で並べて、半角スペースで区切って指定します。 省略した値については、そのプロパティのデフォルトの値(初期値)が適用されます。

また数値を1つだけ指定した場合は、layout-grid-lineの値として設定されます。 2つ指定した場合は、layout-grid-linelayout-grid-charの順番で値が適用されます。

ちなみにlayout-grid関係のプロパティは、一定の文字間隔や行間隔で文字を配置するために使用されます。 例えば一定の文字間隔や行間隔で、原稿用紙のマス目に文字を入力したような状態で表示することができます。

※縦横にグリッドが描画されているような状態で、グリッドに合わせて文字が配置されるようになる(グリッドとはマス目の事)

ただしlayout-gridを含め、これらのプロパティはInternet Explorerが独自に追加した機能となります。

なおInternet Explorer(IE)8では、Standardsモードで表示すると、layout-grid-typeとlayout-grid-lineの設定が反映されなくなるようですが、<meta>で下記の指定をするとIE8でもグリッド表示が有効となります。

※下記の指定をすることで表示モードがIE7 Standardsとなります

<meta http-equiv="X-UA-Compatible" content="IE=7">

書式

  • layout-grid : ★ ■ ♥ ▲ ……… グリッドに関する指定をまとめて行う(一括指定)

★:layout-grid-modeの値
■:layout-grid-typeの値
♥:layout-grid-lineの値
▲:layout-grid-charの値

layout-grid-modeの値

line
グリッドの高さに合わせて文字列を配置します。またlayout-grid-lineで指定した値を有効にします。
char
グリッドの幅に合わせて文字列を配置します。またlayout-grid-charで指定した値を有効にします。
none
グリッドを無効にします。
both
グリッドの高さと幅に合わせて文字列を配置します。layout-grid-lineとlayout-grid-charで指定した値を両方とも有効にします。(初期値)

layout-grid-typeの値

strict
全角文字と半角カナのみをグリッド内の中心に配置します。
fixed
すべての文字をグリッド内の中心に配置します。
loose
全角文字と半角カナをグリッドの幅に合わせて配置し、半角英数字はグリッドの幅の半分で配置されます。

layout-grid-lineの値

数値
数値にpxやemなどの単位を付けてグリッドの高さを指定します。
%値
親要素の高さに対するグリッドの高さの割合を%値で指定します。
auto
文字列の中で最も大きな文字の高さに設定されます。
none
グリッドの高さを指定しません(初期値)

layout-grid-charの値

数値
数値にpxやem、ptなどの単位を付けてグリッドの幅を指定します。
%値
親要素の幅に対するグリッドの幅の割合を%値で指定します。
auto
文字列の中で最も大きなサイズの文字幅に設定されます。
none
グリッドの幅を指定しません(初期値)

使用した時の例

.sample1 {layout-grid: both fixed 30px 30px;}
.sample2 {layout-grid: fixed 30px;}
<h4>layout-grid: both fixed 30px 30px</h4>
<p class="sample1">スタイルシートとは、HTMLで制作したページをより細かく装飾などしたりすること
ができる技術です。外部ファイルにスタイルシートを記述しておくことで管理が楽になります</p>
<h4>layout-grid: fixed 30px</h4>
<p class="sample2">スタイルシートとは、HTMLで制作したページをより細かく装飾などしたりすること
ができる技術です。外部ファイルにスタイルシートを記述しておくことで管理が楽になります</p>

ブラウザ上の表示例

layout-grid: both fixed 30px 30px

スタイルシートとは、HTMLで制作したページをより細かく装飾などしたりすること ができる技術です。外部ファイルにスタイルシートを記述しておくことで管理が楽になります

layout-grid: fixed 30px

スタイルシートとは、HTMLで制作したページをより細かく装飾などしたりすること ができる技術です。外部ファイルにスタイルシートを記述しておくことで管理が楽になります

※IEの場合のみ有効となります

対応ブラウザなどのデータ

初期値 個別のプロパティを参照 値の継承 継承する
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer5~

関連情報