HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> スタイルシート(CSS)辞典 >> グリッド >> グリッドによる文章の配置方法を指定する

グリッドによる文章の配置方法を指定する

CSSの書き方

layout-grid-type:値 ;

CSSの詳細情報
プロパティ名 layout-grid-type 読み方 レイアウト・グリッド・タイプ
初期値 loose 意味 グリッドの配置方法を指定
loose/strict/fixed
対象 ブロックレベル要素
CSSレベル IE独自 対応ブラウザ Windows MAC
継承 する IE 5.0以上 --

解説

「layout-grid-type」プロパティは、グリッドへ配置する文字の種類によってその配置方法を指定するスタイルシートです。実際は、全角の文字と半角英数字の文字の処理を指定します。

IE独自のスタイルシートのため、InternetExplorer以外のブラウザには対応していません。

値について

「layout-grid-type」プロパティで指定できる値は3種類です。以下の表のようになっています。

配置
loose 全角の文字の間隔は、「layout-grid-char」プロパティで指定したサイズで表示。
半角英数字の文字の間隔はその半分で表示
strict 全角の文字はマス目に配置して表示。半角英数字の文字はマス目に配置しない
fixed すべての文字をマス目に配置して表示

CSS/HTMLサンプル

p { layout-grid-type:strict; layout-grid-mode:both; layout-grid-line:0.5em; layout-grid-char:0.5em; width:500px; background:#ffdff9; }

段落要素の文字列をマス目に配置。ただし半角英数字は対象外 サンプル