| プロパティ名 | 値 | 適用対象 | 継承 |
|---|---|---|---|
| layout-grid-line: | グリッドの高さ | ブロック レベル要素 | なし |
| layout-grid-char: | グリッドの幅 | ブロック レベル要素 | なし |
| layout-grid-mode: | グリッドに合わせる方向 | ブロック レベル要素 | なし |
| layout-grid-type: | グリッド内での文字の 配置方法 | ブロック レベル要素 | なし |
| layout-grid: | グリッドに関する指定を まとめて行う | ブロック レベル要素 | なし |
layout-grid-line、layout-grid-char、layout-grid-mode、layout-grid-type、layout-gridプロパティは、一定の文字間隔や行間隔で文字を配置する場合に指定します。
これらのプロパティを指定すると、縦横にグリッドが描画されている状態を想定し、原稿用紙に書くように文字を配置します。
なお、グリッド線は表示されません。
これらのプロパティを指定すると、縦横にグリッドが描画されている状態を想定し、原稿用紙に書くように文字を配置します。
なお、グリッド線は表示されません。
layout-grid-line
| 値 | 意味 |
|---|---|
| 数値 | 数値に、em, pt, mm等の単位を付けてグリッドの高さを指定します。 絶対単位、相対単位の両方を使用できます。 |
| 数値（%） | 親要素の高さに対するグリッドの高さの割合を%で指定します。 |
| auto | 文字列の中で最も大きな文字サイズの高さに設定されます。 |
| none | グリッドの高さを指定しません(デフォルト)。 |
layout-grid-lineプロパティは、グリッドの高さ（行の高さ）を指定します。
グリッドの高さを指定することで、一定の行間隔で文字列を配置できます。
グリッドの高さ＝値には上記の何れかを指定します。
グリッドの高さを指定することで、一定の行間隔で文字列を配置できます。
グリッドの高さ＝値には上記の何れかを指定します。
layout-grid-char
| 値 | 意味 |
|---|---|
| 数値 | 数値に、em, pt, mm等の単位を付けてグリッドの幅を指定します。 絶対単位、相対単位の両方を使用できます。 |
| 数値（%） | 親要素の幅に対するグリッドの幅の割合を%で指定します。 |
| auto | 文字列の中で最も大きなサイズの文字幅に設定されます。 |
| none | グリッドの幅を指定しません(デフォルト)。 |
layout-grid-charプロパティは、グリッドの幅を指定します。つまり、文字幅を指定することになります。グリッドの幅を指定することで、一定の文字間隔で文字列を配置できます。グリッドの幅さ＝値には上記の何れかを指定します。
layout-grid-mode
| 値 | 意味 |
|---|---|
| line | グリッドの高さに合わせて文字列を配置します。layout-grid-lineプロパティで指定した値を有効にします。 |
| char | グリッドの幅に合わせて文字列を配置します。layout-grid-charプロパティで指定した値を有効にします。 |
| none | グリッドを無効にします。 |
| both | グリッドの高さと幅の両方に合わせて文字列を配置します。layout-grid-line、layout-grid-charプロパティの両方の値を有効にします(デフォルト)。 |
layout-grid-modeプロパティは、グリッドの高さや幅に合わせて文字列を配置するかどうかを指定します。グリッドに合わせる方向＝値には上記の何れかを指定します。
layout-grid-type
| 値 | 意味 |
|---|---|
| strict | 全角文字と半角カナのみをグリッド内に配置します。 |
| fixed | すべての文字をグリッド内に配置します。 |
| loose | 全角文字と半角カナをグリッドの幅に合わせて配置します(半角英数字は、グリッドの幅の半分で配置されます。 |
layout-grid-typeプロパティは、グリッドに対してどのように文字を配置するかを指定します。グリッド内での文字の配置方法＝値には上記の何れかを指定します。
layout-grid
layout-gridプロパティは、上記各プロパティの値をまとめて指定できます。4つのプロパティの値を任意の順番に、半角スペースで区切って指定します。省略した値は、デフォルト値が適用されます。又、値が1つの場合は、layout-grid-lineの値とみなされ、値が2つの場合は、layout-grid-line、layout-grid-charの順番で値が適用されます。
●こららのプロパティはW3Cの正式な仕様ではありません。
●これらのプロパティは、Internet Explorer独自のプロパティです。、他のプラウザでは使用できません。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
.sampl01{layout-grid-type:fixed;
layout-grid-line:2em;
layout-grid-char:2em;
layout-grid-mode:both;
color:red;
}
p,div {font-size:1.2em;
}
p.sampl02,.sampl03,.sampl04,.sampl05,.sampl06,.sampl07,.sampl08,.sampl09
{color:blue;
font-weight:bold;
}
.sampl06{layout-grid-char:1.5em;}
.sampl07{layout-grid-char:5%;}
.sampl08{layout-grid-char:auto;}
.sampl09{layout-grid-char:none;}
.sampl02{layout-grid-line:1.5em;}
.sampl03{layout-grid-line:10%;}
.sampl04{layout-grid-line:auto;}
.sampl05{layout-grid-line:none;}
-->
</style>
</head>
<body>
<h3>グリッドを指定</h3>
<div class="sampl01">
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。
日本全国の東照宮の総本社的存在である。正式名称は地名等を冠称しない「東照宮」であるが、他の東照宮との区別のために、
「日光東照宮」と呼ばれることが多い。</div>
<h3>普通に表示</h3>
<p>日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。
日本全国の東照宮の総本社的存在である。正式名称は地名等を冠称しない「東照宮」であるが、他の東照宮との区別のために、「
日光東照宮」と呼ばれることが多い。
</p>
<p class="sampl06">layout-grid-char:1.5em</p>
<p class="sampl07">layout-grid-char:10%</p>
<p class="sampl08">layout-grid-char:auto</p>
<p class="sampl09">layout-grid-char:none</p>
<p class="sampl02">layout-grid-line:1.5em</p>
<p class="sampl03">layout-grid-line:10%</p>
<p class="sampl04">layout-grid-line:auto</p>
<p class="sampl05">layout-grid-line:none</p>
</body>
</html>
