CSSプロパティ｜ layout-grid-type [ホームページ制作の装飾プロパティ]

layout-grid-type: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「layout-grid-type」についてのご説明です。

ホームページ制作・作成において、layout-grid-type（レイアウトグリッドタイプ）は、グリッドへの文字の乗せ方を指定します。

layout-grid-type グリッドへの文字の乗せ方を指定（IE）

ホームページ制作において、layout-grid-typeを使用することで、グリッドのタイプ（グリッドへの文字の乗せ方）を指定します。

fixed

すべての文字をグリッドの中心

loose

全角文字や半角カナはグリッド幅を空けて、半角英数はその半分の幅を空けて表示（初期値） ルース

strict

全角文字や半角カナはグリッドの中心に、半角英数はそのまま表示

日本語の原稿用紙組み表現と現代のWeb標準における代替設計

ホームページ（ウェブサイト）上で日本語の文章を縦書きで表示したり、原稿用紙のように文字の格子（グリッド）に美しく整列させたりしたい場面があります。かつてInternet Explorer（IE）独自のプロパティとして登場した「layout-grid-type」は、こうした東アジア圏特有の文字組み（グリッドへの文字の乗せ方）を制御するための設定でした。より専門的には、このプロパティの歴史的背景と、現代の標準的なホームページ制作における代替アプローチを理解しておくことが求められます。

layout-grid-typeの役割と指定値による挙動

layout-grid-typeは、あらかじめ設定されたグリッドに対して、全角文字や半角英数文字をどのように配置するかを細かくコントロールするプロパティです。指定できる値には以下のものがありました。

・fixed（固定）
すべての文字の種類に関わらず、一律でグリッドの中心に合わせて均等に配置します。等幅フォントのようなカチッとした原稿用紙風の文字組みを表現できます。

・loose（ルース）
全角文字や半角カタカナはグリッドに合わせて配置し、半角英数文字に関してはその半分の幅のグリッドを適用して自然な文字間隔で表示します。

・strict（ストリクト）
全角文字などはグリッドの中心に配置しつつも、半角英数文字についてはグリッドに縛られず、プロポーショナル（文字ごとの本来の幅）でそのまま表示します。

しかしながら、これらのプロパティはW3Cの国際的なWeb標準仕様には採用されず、IE独自のレガシーな機能として残ったため、現代の主要なブラウザ（Chrome、Edge、Safari、Firefoxなど）ではサポートされていません。そのため、現在のホームページ制作で記述しても意図した通りの表示は再現されない点に注意が必要です。

現代のホームページ（ウェブサイト）における文字組みグリッドの実装手法

現在のWeb標準環境において、日本語の文字を格子状にきれいに整列させたり、縦書きの美しい文字組みを実現したりするためには、別の洗練されたCSSプロパティを組み合わせてプログラミングを行います。

まず、文字を縦書きにする場合は「writing-mode: vertical-rl;」プロパティを使用します。これにより、日本語特有の右から左へ流れる縦書きレイアウトが最新のブラウザでも安全に再現できるようになります。
さらに、文字の等幅配置（グリッドのような整列）を実現するためには、フォントの設定を制御する「font-variant-numeric: tabular-nums;」や、文字幅を等幅に固定するフォントファミリー（monospaceなど）の指定が効果的です。また、文字と文字の間隔を一定に保つ「letter-spacing」や、テキストの配置を均等に割り振る「text-align: justify;（両端揃え）」を適切に組み合わせることで、IE時代の古い仕様に頼ることなく、あらゆるデバイスで均整のとれた美しい日本語タイポグラフィを表現できます。

事業用ホームページにおいて、伝統的な縦書き文書の美しさを取り入れつつ、検索エンジン（SEO）にも正しくインデックスされる堅牢なマークアップを維持するためには、こうした最新の標準技術に基づいた設計ルールを採用していくことが極めて重要です。

layout-grid-type: ;

layout-grid系プロパティ

ホームページ制作で使用する他のlayout-grid系プロパティです。

• layout-grid　グリッドの指定をまとめて行う（IE）
• layout-grid-char　文字グリッドの幅（IE）
• layout-grid-line　行グリッドの高さ（IE）
• layout-grid-mode　グリッドに文字を乗せるかどうかを指定（IE）

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページ制作・Webデザインの1ポイント

テンプレートなどを使用して制作されたホームページの場合、CSSの設計が詳しく把握できていないままホームページのレイアウトを変更してしまうと、親要素の設定を子要素が解釈する部分などでズレが出ることがあります。デベロッパーツールなどで要素の関係性を確認するとエラー箇所が分かる場合がありますので利用を検討しましょう。

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ