グリッドで配置された文字の間隔や行間を指定する

layout-grid-char/layout-grid-line

CSSの書き方

layout-grid-line:値 ;
layout-grid-char:値 ;

CSSの詳細情報
プロパティ名 layout-grid-line/layout-grid-char 読み方 レイアウト・グリッド・ライン/キャラクター
初期値 none 意味 グリッドの間隔調整
none/auto/サイズ指定
対象 ブロックレベル要素
CSSレベル IE独自 対応ブラウザ Windows MAC
継承 する IE 5.0以上

解説

「layout-grid-line」プロパティおよび「layout-grid-char」プロパティは、グリッドの間隔を調整することにより、文字の間隔や行間を調節するためのスタイルシートです。

「layout-grid-mode」プロパティが指定されている要素に対して有効です。

IE独自のプロパティとなっており、InternetExplorer以外のブラウザでは使用できません。

値(none)

「layout-grid-line」は行間を調節するプロパティ、「layout-grid-char」は文字間を調節するプロパティです。

「layout-grid-line:none;」、「layout-grid-char:none;」としたときは、初期値ですので、対象の要素内の文字列はグリッドで配置されません。通常の表示になります。

値(auto)

「layout-grid-line:auto;」、「layout-grid-char:auto;」としたときは、グリッドの間隔は対象の要素内の文字列の中で、最も大きい文字に合わせて、自動的に間隔が決まります。

値(サイズ指定)

両プロパティで指定できる間隔は、サイズで指定することも可能です。

ただし、「layout-grid-char」プロパティに設定するサイズは、後に解説する「layout-grid-type」の値によって、何を示すかが異なります。

「layout-grid-type」の値を「strict」または「fixed」としたときは、「layout-grid-char」プロパティのサイズはグリッドのマス目の横幅を表します。

一方、「layout-grid-type」の値が「loose」のときは、値は文字の間隔を表します。

CSS/HTMLサンプル

p { layout-grid-mode:both; layout-grid-line:0.5em; layout-grid-char:0.5em; width:500px; background:#ffdff9; }

段落要素内の文字列をグリッド配置 サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!