【layout-grid-mode】グリッドに合わせる方向を指定

グリッドのイメージ

layout-grid-modeプロパティでは、グリッドの高さや幅に合わせて文字列(文字)を配置するかどうかを指定することができます。 例えば、グリッドの高さのみに合わせたり、幅のみに合わせたり、またはその両方であったりといった、グリッドに文字列を合わせる方向を指定します。

またlayout-grid-modeプロパティでlayout-grid-line(グリッドの高さ)とlayout-grid-char(グリッドの幅)で指定した値を有効・無効にすることができます。

※初期値はどちらも有効となっている

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

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

なおlayout-grid-modeプロパティは、Internet Explorer独自のプロパティとなります。

書式

  • layout-grid-mode : ……… グリッドに合わせる方向

★:line、char、none、both

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

使用した時の例

p {
  layout-grid-type:fixed;
  layout-grid-line:30px;
  layout-grid-char:30px;
}

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

ブラウザ上の表示例

layout-grid-mode: line

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

layout-grid-mode: char

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

layout-grid-mode: none

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

layout-grid-mode: both

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

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

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

初期値 both 値の継承 継承する
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer5~

関連情報