スタイルシートリファレンス > layout-grid

スタイルシートリファレンス layout-grid


layout-grid 行間や文字間のスペースをまとめて指定する (IE5)

行間や文字間のスペースをまとめて指定します。


line(高さ) char(幅)

none
指定無し:規定値
auto
自動(最も大きな文字に合わせる)
数値指定
px,em
割合指定
%


mode

both
line char の両方に適用:規定値
line
line(行間)を適用
char
char(文字間)を適用
none
グリッドを無効


type

loose
日本語や韓国語に適した方法:規定値
strict
日本語や韓国語や中国語に適した方法
fixed
固定


px 画像を構成する最小単位 (モニタの解像度により変化)

em 文字の高さを1とした単位 (フォントサイズにより変化)

▲ページ先頭へ

使用例 layout-grid

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.smp1 {
layout-grid: both loose 20px 20px;
}
.smp2 {
layout-grid: both stric 20px 20px;
}
.smp3 {
layout-grid: both fixed 20px 20px;
}
-->
</style>
</head>
<body>
指定なし
<p>
あいうえお<br>
12345<br>
0123456789<br>
abcdefghij<br>
</p>
<br>
both loose 20px 20px
<p class="smp1">
あいうえお<br>
12345<br>
0123456789<br>
abcdefghij<br>
</p>
<br>
both strict 20px 20px
<p class="smp2">
あいうえお<br>
12345<br>
0123456789<br>
abcdefghij<br>
</p>
<br>
both fixed 20px 20px
<p class="smp3">
あいうえお<br>
12345<br>
0123456789<br>
abcdefghij<br>
</p>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


指定なし

あいうえお
12345
0123456789
abcdefghij


both loose 20px 20px

あいうえお
12345
0123456789
abcdefghij


both strict 20px 20px

あいうえお
12345
0123456789
abcdefghij


both fixed 20px 20px

あいうえお
12345
0123456789
abcdefghij


▲ページ先頭へ

関連項目【グリッド】

layout-grid
行間や文字間のスペースをまとめて指定する (IE5)
layout-grid-line
行間のスペースを指定する (IE5)
layout-grid-char
文字間のスペースを指定する (IE5)
layout-grid-mode
グリッドの有効・無効を指定する (IE5)
layout-grid-type
グリッドのタイプを指定する (IE5)

▲ページ先頭へ

スタイルシートリファレンス > layout-grid