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

layout-grid-mode: ;

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

ホームページ制作・作成において、layout-grid-mode（レイアウトグリッドモード）は、グリッドに文字を乗せるかを指定する場合に使用するプロパティです。

layout-grid-mode グリッドに文字を乗せるかを指定（IE）

ホームページ制作において、layout-grid-modeを使用することで日本語などの文字列をグリッドに乗せるかを指定します。

both

横方向・縦方向ともグリッドに乗せる（初期値）

none

横方向・縦方向ともグリッドに乗せない

line

行グリッド（横書きの場合の高さ）のみを有効

char

文字グリッド（横書きの場合の幅）のみを有効 チャー

文字配置の有効化と現代のコーディング規約に沿ったグリッド設計

ホームページ（ウェブサイト）を制作する際、日本語の文章の行方向や列方向の整列状態を細かくコントロールしたい場面があります。かつてInternet Explorer（IE）独自の拡張プロパティとして提供されていた「layout-grid-mode」は、要素内の文字列をあらかじめ定義されたレイアウトグリッド（格子）に沿わせるかどうか、あるいはどの方向のグリッドを有効にするかを指定するための設定でした。より専門的には、このプロパティの挙動の特徴と、現在のモダンなWeb制作においてどのように設計を置き換えるべきかを理解しておく必要があります。

layout-grid-modeの指定値とその挙動

layout-grid-modeは、文字グリッド（横方向の間隔）と行グリッド（縦方向の間隔）のどちらを有効化するかを以下の指定値によって制御していました。

・both（両方）
縦方向と横方向の双方のグリッドを有効にし、文字を完全に格子状に配置します。日本語の原稿用紙のようなきっちりとした文字組みを実現する際の標準的な設定でした。

・none（なし）
どちらのグリッドも適用せず、文字本来の幅やブラウザの標準的な行間計算に基づいて通常通りテキストを描画します。

・line（行のみ）
行グリッド（横書きの場合は行の高さ、縦書きの場合は行の幅）のみを有効にし、文字間のグリッドは無視してプロポーショナルに配置します。

・char（文字のみ）
文字グリッド（横書きの場合は文字の幅、縦書きの場合は文字の高さ）のみを有効にし、行間は通常の計算に基づいて描画します。

これらの仕様は、レガシーブラウザであるIEの終了とともに現代のWeb標準（ChromeやSafariなど）からは除外されたため、現在のホームページ（ウェブサイト）制作で記述しても機能しません。

現代のWeb標準における文字組みのグリッド制御

現在のホームページ制作において、文字の配置ルールを整えたり、美しく整列した日本語タイポグラフィを実装したりするためには、最新の標準CSSプロパティを活用してプログラミングを行います。

縦書きにおいて行の間隔を高精度に制御したい場合は、「writing-mode: vertical-rl;」を指定した上で、行間を制御する「line-height」や、要素間の余白を調整する「margin」「padding」を適切に組み合わせて設計します。
また、文字同士の横方向の整列を美しく保つためには、「letter-spacing」による文字間隔の微調整や、「text-align: justify;（両端揃え）」を併用することで、IE時代の仕様に頼ることなく、あらゆるデバイスで均整のとれた可読性の高いレイアウトを再現できます。

事業用ホームページにおいて、東アジア圏の美しい文字組みの文化を取り入れつつ、検索エンジン（SEO）に最適化された強固なソースコードを維持するためには、現在の閲覧環境に即したWeb標準の設計ルールを正しく選択していくことが重要です。

layout-grid-mode: ;

layout-grid系プロパティ

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

• layout-grid　グリッドの指定をまとめて行う（IE）
• layout-grid-char　文字グリッドの幅（IE）
• layout-grid-line　行グリッドの高さ（IE）
• layout-grid-type　グリッドへの文字の乗せ方（IE）

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

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

ホームページ制作では、親要素の指定値との相対的な数値で子要素を設定するケースがあります。その親要素の指定値を少し変更した場合、意図せず子要素の指定値も影響を受けることがあります。メディアクエリの利用などの際には、相対指定を再設定する必要がある場合がありますのでスマートフォン表示がおかしい場合は、確認してみましょう。

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

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

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

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