ホーム＞HTMLリファレンス（アルファベット検索）＞layout-grid-typeプロパティ
layout-grid-type プロパティ …文字グリッドの表示方法を指定する
使用プロパティ
 |
layout-grid-type: 値; |
対象となる
要素 |
ブロック要素 |
継承 |
する
|
値 |
次項（値と働き）を参照してください。 |
 |
 |
 解説
 layout-grid-type プロパティを使えば、グリッドに収める文字の種類によって、その表示方法を指定ことができます。値は次項（値と働き）を参照してください。
※「グリッド」とは、原稿用紙の「マス目」のことをいいます。グリッド関連のプロパティは、テキストを原稿用紙のマス目に書いたように表示します。
※グリッド関連のプロパティは、 Internet Explorer 独自のプロパティとなっていますので、使用の際は注意しましょう。また、対応ブラウザを気にせずに行間と文字間を指定したい場合は、行間は line-height プロパティ、文字間は word-spacing プロパティで指定するのが良いでしょう。
その他のグリッド関連のプロパティは「CSS一覧プロパティ辞典 -グリッド関連-」を参照してください。
|
| 値 |
働き |
値 |
働き |
| loose |
全角文字、半角カナには、layout-grid-char プロパティで指定した値が適用され、半角英数字（筆記体以外）の文字の間隔には、layout-grid-char プロパティで指定した値の半分が適用されます。初期値。 |
strict |
全角文字や半角カナのみをグリッドに収めます。
|
| fix |
すべての文字をグリッドに収めます。 |
|
|
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
p.sample {
layout-grid-mode: both;
layout-grid-type: strict;
layout-grid-line: 1.5em;
layout-grid-char: 1.5em;
}
</style>
</head>
<!--ページの本文-->
<body>
<p.sample>layout-grid-mode プロパティの値を「both」にして行グリッド、文字グリッドの両方を有効にします。layout-grid-type プロパ」ティの値を「strict」にして全角文字や半角カナのみをグリッドに収めます。layout-grid-line プロパティの値を「1.5em」にして行グリッドの高さを指定しています。layout-grid-char プロパティの値を「1.5em」にして文字グリッドの幅を指定しています。</p>
</body>
|
|
[ブラウザでの表示例]
| HOME PAGE ZERO ガイド |
|
layout-grid-type プロパ」ティの値を「strict」にして全角文字や半角カナのみをグリッドに収めます。layout-grid-mode プロパティの値を「both」にして行グリッド、文字グリッドの両方を有効にします。layout-grid-char プロパティの値を「1.5em」にして文字グリッドの幅を指定しています。layout-grid-line プロパティの値を「1.5em」にして行グリッドの高さを指定しています。
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
