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

layout-grid: ;

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

ホームページ制作・作成において、layout-grid（レイアウトグリッド）は、グリッドの指定をまとめて行う場合に使用するプロパティです。

layout-grid グリッドの指定をまとめて行う（IE）

ホームページ制作において、layout-gridを使用することで、グリッド（桝目）に関する指定をまとめて行うことができます。日本語などの文字を一文字ずつグリッドに入れてレイアウトします。

• layout-grid-mode
• layout-grid-type
• layout-grid-line
• layout-grid-char

の各プロパティの値をスペース区切りで指定します。

一括指定プロパティ「layout-grid」の概要と現代のCSS Gridへの技術的変遷

ホームページ（ウェブサイト）の文字組みにおいて、日本語の文章を格子（グリッド）に沿って規則正しく整列させたいケースがあります。かつてInternet Explorer（IE）独自の拡張仕様として提供されていた一括指定プロパティ「layout-grid」は、こうした日本語特有の原稿用紙のような文字配置（グリッド設定）をまとめて行うためのプロパティでした。より専門的には、この古い仕様の仕組みと、現代のWeb標準における「CSS Grid Layout」への進化という技術的な変遷を正しく理解しておくことが重要です。

layout-gridによるショートハンドの記述ルール

layout-gridプロパティは、グリッドに関する4つの個別設定（モード、タイプ、行高、文字幅）を半角スペースで区切り、任意の順序で1行にまとめて記述できる便利なショートハンド（一括指定）でした。例えば以下のように記述して利用されていました。

layout-grid: both fixed 20px 16px;

この記述により、「縦横両方のグリッドを有効にし（both）」「文字種に関わらず中心に等幅配置し（fixed）」「行間グリッドを20pxに設定し（layout-grid-line）」「文字幅グリッドを16pxに固定する（layout-grid-char）」という複雑な日本語用文字組みが一括で適用できました。
しかしながら、これらはIE専用の非標準仕様であったため、現代の主要なブラウザ（Chrome、Safari、Edge、Firefoxなど）では完全に廃止されており、現在のホームページ（ウェブサイト）制作において記述しても一切機能しない点に注意が必要です。

現代のWeb制作を支える「CSS Grid Layout」との違い

現代のホームページ制作において「グリッド」という言葉を使う場合、それは古いIE仕様のことではなく、世界標準である「CSS Grid Layout（ディスプレイ：grid）」のことを指します。

かつてのlayout-gridが「テキスト（文字）を一文字ずつ格子に嵌め込むための仕組み」であったのに対し、現代のCSS Grid Layoutは「ページ全体のレイアウト（枠組み）を格子状に分割し、要素（画像、テキスト、ボタンなど）を自由自在に配置するための仕組み」です。

現代のCSS Gridを活用することで、以下のような記述を用いて、2カラムや3カラムといった複雑な事業用ホームページのレイアウトを極めて柔軟に構築できます。

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;

これにより、画面サイズに応じて格子の数や幅を動的に変化させる高度なレスポンシブデザインが容易になり、スマートフォンやタブレットなどあらゆる閲覧環境において、要素が重なったり崩れたりすることのない堅牢なホームページ（ウェブサイト）が実現できます。

古い文字組み仕様としてのグリッドは、現在のWeb標準では「writing-mode（縦書き指定）」や「letter-spacing（文字間微調整）」にその役割が引き継がれています。一方で、現代のレイアウトを統括する「CSS Grid Layout」を適切にプログラミングしていくことが、ユーザーにとって見やすく操作しやすいユーザーインターフェースを構築し、Web集客の成果を持続させるための必須の技術となっています。

layout-grid: ;

layout-grid系プロパティ

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

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

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

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

layout-grid（レイアウトグリッド）などCSSで簡易指定をするときは半角スペースで区切りながら一括指定します。この時に、必須指定の部分が無指定の場合は、指定した値自体が全て無効になることがありますので、注意が必要です。

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

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

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

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