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

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


文章をグリッド(マス目)に配置する

CSSの書き方

layout-grid-mode:値 ;

CSSの詳細情報
プロパティ名 layout-grid-mode 読み方 レイアウト・グリッド・モード
初期値 both 意味 文字のマス目配置
both/none/line/char
対象 ブロックレベル要素
CSSレベル IE独自 対応ブラウザ Windows MAC
継承 する IE 5.0以上 --

解説

「layout-grid-mode」プロパティは、文字を原稿用紙などのマス目のように配置するスタイルシートです。グリッド系のプロパティはIE独自のプロパティとなっているため、現在はこのプロパティもInternetExplorer専用のCSSとなっていますので使用の際には注意してください。

また、「layout-grid-mode」プロパティは単体では動作しません。「layout-grid-char」「layout-grid-line」プロパティによって、別途、行や列の間隔を調整する必要があります。

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

配置
none 通常の配置(マス目配置ではない)
line 文章の行だけマス目で配置
char 文章の列だけマス目で配置
both 行と列両方マス目で配置

CSSレベル3で実装予定

「layout-grid-mode」プロパティと同じようなスタイルシート(line-grid-mode)がCSSレベル3で実装予定だそうです。

CSS/HTMLサンプル

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

段落要素内の文字列をグリッド配置 サンプル