【layout-grid-line】グリッドの高さを指定

グリッドのイメージ

layout-grid-lineプロパティでは、グリッドの高さ(行の高さ)を指定することができます。 グリッドの高さを指定する事で、一定の行間隔で文字列を配置することが可能となります。

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

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

ただしlayout-grid-lineプロパティは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-line : ……… グリッドの高さ

★:数値、%値、auto、none

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

使用した時の例

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

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

ブラウザ上の表示例

layout-grid-line:30px

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

layout-grid-line:auto

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

layout-grid-line:none

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

※IEでのみ適用結果が表示されます

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

初期値 none 値の継承 継承しない
適用可能な要素 入力可能要素
メディア visual
対応ブラウザ Internet Explorer5~

関連情報