【layout-grid-type】グリッド内での文字の配置方法

グリッドのイメージ

layout-grid-typeプロパティでは、グリッドに対しての文字の配置方法を指定することができます。 例えば、全角文字と半角カナのみをグリッド内の中心に配置したり、グリッドの幅に合わせて配置することなどが可能となります。

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

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

ただしlayout-grid-typeプロパティは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-type : ……… グリッド内での文字の配置方法

★:strict、fixed、loose

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

使用した時の例

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

ブラウザ上の表示例

layout-grid-type: strict

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

layout-grid-type: fixed

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

layout-grid-type: loose

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

※IEでのみ有効となります

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

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

関連情報