Layout Grid
テキストを原稿用紙に書いたように均等配列します。
LETTER SPACINGと同じような効果ですが、行も一定の間隔で指定できます。
このプロパティーは、IE5から対応しています。
{ layout-grid-type : loose | fixed | strict }
{ layout-grid-line : length | Percentage | auto | none }
{ layout-grid-char : length | Percentage | auto | none }
{ layout-grid-mode : both | line | char | none }
{ layout-grid : layout-grid-mode | layout-grid-type | layout-grid-line | layout-grid-char }
グリッドの合わせ方を指定します。
合わせ方には、3つのキーワードがあります。
LOOSEは、欧文では頭揃えで均等に配置しています。FIXEDで和文も欧文も均等に配置しますが、STRICTでは欧文は配置されません。
サンプルのグリッドの画像は19pxで、フォントサイズは14ポイントです。
{ layout-grid-type : loose | fixed | strict }
<div style="background-image: url('grid.gif');">
<p style="layout-grid-type: loose; layout-grid-char: 20px; font-family:
'ＭＳ ゴシック';">
ＭＳゴシックの場合。</p>
</div>
ＭＳ ゴシックの場合。
<div style="background-image: url('grid.gif');">
<p style="layout-grid-type: loose; layout-grid-char: 20px; font-family:
'ＭＳ Ｐゴシック';">ＭＳＰゴシックの場合。</p>
</div>
ＭＳＰゴシックの場合。
<div style="background-image: url('grid.gif');">
<p style="layout-grid-type: loose; layout-grid-char: 20px; font-family:
Arial;">DYMAIC HTML</p>
</div>
DYMAIC HTML
<div style="background-image: url('grid.gif');">
<p style="layout-grid-type: fixed; layout-grid-char: 20px; font-family:
'ＭＳ Ｐゴシック';">ＭＳＰゴシックの場合。</p>
</div>
ＭＳＰゴシックの場合。
<div style="background-image: url('grid.gif');">
<p style="layout-grid-type: fixed; layout-grid-line: 20px; layout-grid-char:
20px; font-family: Arial;">DYMAIC HTML</p>
</div>
DYMAIC HTML
<div style="background-image: url('grid.gif');">
<p style="layout-grid-type: strict; layout-grid-char: 20px; font-family:
'ＭＳ Ｐゴシック';">ＭＳＰゴシックの場合。</p>
</div>
ＭＳＰゴシックの場合。
<div style="background-image: url('grid.gif');">
<p style="layout-grid-type: strict; layout-grid-char: 20px; font-family:
'ＭＳ Ｐゴシック';">DYMAIC HTML</p>
</div>
DYMAIC HTML
グリッドの行間を指定
グリッドの行間隔を指定します。指定には、数値・パーセントとAUTOと指定しないNONEがあります。このプロパティーを使用する場合、LAYOUT-GRID-MODOでBOTHかLINEが指定していなければなりません。
{ layout-grid-line : length | Percentage | auto | none }
<div style="background-image: url('grid.gif');">
<p style="layout-grid-line: 60px; layout-grid-type: fixed; layout-grid-mode:
both; font-family: 'ＭＳ Ｐゴシック';">ＭＳＰゴシックの場合。<br>
ＭＳＰゴシックの場合。</p>
</div>
ＭＳＰゴシックの場合。
ＭＳＰゴシックの場合。
グリッドの字送りを指定
グリッドの字送りの間隔を指定します。指定には、数値・パーセントとAUTOと指定しないNONEがあります。このプロパティーを使用する場合、LAYOUT-GRID-MODOでBOTHかCHARが指定していなければなりません。
{ layout-grid-char : length | Percentage | auto | none }
<div style="background-image: url('grid.gif');">
<p style="layout-grid-char: 20px; layout-grid-type: fixed;
layout-grid-mode: both; font-family: 'ＭＳ Ｐゴシック';">ＭＳＰゴシックの場合。</p>
</div>
ＭＳＰゴシックの場合。
<div style="background-image: url('grid.gif');">
<p style="layout-grid-char: 60px; layout-grid-type: fixed;
layout-grid-mode: char; font-family: 'ＭＳ Ｐゴシック';">ＭＳＰゴシックの場合。</p>
</div>
ＭＳＰゴシックの場合。
グリッドに合わせる方向の指定
テキストをグリッドにあわせる方向を指定します。指定には、縦・横方向合わせるBOTH、縦方向のみのLINE、横方向のみのCHAR、指定しないNONEの4つのキーワードがあります。
{ layout-grid-mode : both | line | char | none }
<div style="background-image: url('grid.gif');">
<p style="layout-grid-mode: both; layout-grid-type: fixed; layout-grid-line:
60px; layout-grid-char: 20px; font-family: 'ＭＳ Ｐゴシック';">ＭＳＰゴシックの場合。<br>
ＭＳＰゴシックの場合。</p>
</div>
ＭＳＰゴシックの場合。
ＭＳＰゴシックの場合。
<div style="background-image: url('grid.gif');">
<p style="layout-grid-mode: line; layout-grid-type: fixed; layout-grid-line:
60px; layout-grid-char: 20px; font-family: 'ＭＳ Ｐゴシック';">ＭＳＰゴシックの場合。<br>
ＭＳＰゴシックの場合。</p>
</div>
ＭＳＰゴシックの場合。
ＭＳＰゴシックの場合。
<div style="background-image: url('grid.gif');">
<p style="layout-grid-mode: char; layout-grid-type: fixed; layout-grid-line:
60px; layout-grid-char: 20px; font-family: 'ＭＳ Ｐゴシック';">ＭＳＰゴシックの場合。<br>
ＭＳＰゴシックの場合。</p>
</div>
ＭＳＰゴシックの場合。
ＭＳＰゴシックの場合。
グリッドを一括して指定
グリッドを一括して指定します。
{ layout-grid : layout-grid-mode | layout-grid-type | layout-grid-line | layout-grid-char }
<div style="background-image: url('grid.gif');">
<p style="layout-grid: strict 60px 60px both; font-family: 'ＭＳ Ｐゴシック';">ＭＳＰゴシックの場合。<br>
ＭＳＰゴシックの場合。</p>
</div>
ＭＳＰゴシックの場合。
ＭＳＰゴシックの場合。
 |
 |
|---|
