【layout-grid-char】グリッドの幅を指定

グリッドのイメージ

layout-grid-charプロパティでは、グリッドの幅を指定することができます。 これは結果的に文字幅を指定することになり、グリッドの幅を指定する事で、一定の文字間隔で文字列が配置されるようになります。

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

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

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

書式

  • layout-grid-char : ……… グリッドの幅(文字幅)を指定

★:数値、%値、auto、none

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

使用した時の例

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

ブラウザ上の表示例

layout-grid-char: 30px

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

layout-grid-char: auto

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

layout-grid-char: none

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

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

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

関連情報