layout-grid

InternetExplorer独自のプロパティで、グリッド関連の指定をまとめて行います。尚、グリッドとは、原稿用紙のマス目にあたる部分を指します。

ブラウザ

IE5 / IE5.5 / IE6

書式

要素[.class名][#id名]{ layout-grid : layout-grid-mode layout-grid-type layout-grid-line layout-grid-char;

※layout-grid-charの指定はlayout-grid-lineの直後である必要があります。

▲PageTop

指定できる値

・layout-grid-modeプロパティの指定(行／文字グリッド適用区分の指定)
値	初期値	意味
both	○	行／文字グリッド共に有効にします。
none		グリッドは使用されません。
line		行グリッドのみを有効にします。
char		文字グリッドのみを有効にします。

・layout-grid-typeプロパティの指定(グリッドを適用させる文字種の指定)
値	初期値	意味
loose	○	筆記体以外の半角英数字についてはグリッドの半分に収められるようです。
strict		全角文字や半角カナのみグリッドに収めます。
fixed		全ての文字をグリッドに収めます。

・layout-grid-lineプロパティの指定(行グリッドの高さ(幅)の指定)
値	初期値	意味
none	○	指定しない場合と同様になります。
auto		横書きの場合で高さ(縦書きならば幅)が最も大きな文字に合わせられます。
数値+単位		グリッドの高さ(幅)を指定します。単位例：px,em,ex,%

・layout-grid-charプロパティの指定(文字グリッドの幅(高さ)の指定)
値	初期値	意味
none	○	指定しない場合と同様になります。
auto		横書きの場合で幅(縦書きならば高さ)が最も大きな文字に合わせられます。
数値+単位		グリッドの幅(高さ)を指定します。単位例：px,em,ex,%

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        layout-grid : both fixed 25px 25px;
      }
      #sample2 {
        layout-grid : both fixed 50px 50px;
      }
    </style>
  </head>
  <body>
    <div id="sample1">layout-gridサンプル1</div>
    <br>
    <div id="sample2">layout-gridサンプル2</div>
  </body>
</html>

表示結果

layout-gridサンプル1

layout-gridサンプル2

▲PageTop

layout-grid

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

CSS