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

layout-grid-line: ;

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

ホームページ制作・作成において、layout-grid-line（レイアウトグリッドライン）は、行グリッドの高さを指定します。

layout-grid-line 行グリッドの高さを指定（IE）

ホームページ制作において、layout-grid-lineを使用することで、行グリッドの高さ（縦書きの場合は幅）を指定します。

layout-grid-line : none

無指定（初期値）

layout-grid-line : auto

最も大きな文字に合わせて行グリッドの高さを設定

layout-grid-line : %

親ボックスのサイズに対する割合を%値で指定

layout-grid-line : 数値

単位はpx・em・exなど

古典的な行グリッド仕様と現代のWeb標準における行間設計の最適化

ホームページ（ウェブサイト）上で日本語の文章を縦書きで表示したり、特定の行幅に美しく整列させたりしたい場面があります。かつてInternet Explorer（IE）独自の拡張プロパティとして提供されていた「layout-grid-line」は、要素内の行グリッドの高さ（縦書きの場合は幅）を指定するための設定でした。より専門的には、このプロパティの仕様的な役割と、現代の標準的なホームページ制作における最適な行間設計の手法を理解しておく必要があります。

layout-grid-lineの指定値とその役割

layout-grid-lineは、テキストを配置するための「行の格子」の間隔を明示的に指定し、文字のフォントサイズに関わらず一定のベースラインを維持するために使われていました。指定できる値には以下のものがありました。

・none（無指定）
行グリッドを設定せず、ブラウザの標準的なテキスト配置を行います。

・auto（自動）
配置されている最も大きな文字のサイズに合わせて、自動で行グリッドの高さを均等に算出します。

・数値または%
pxやemなどの単位を用いた具体的な数値、あるいは親ボックスに対する割合で、行の高さの基準となるグリッドラインの間隔を固定します。

しかしながら、これらの仕様はIEの終了に伴い、現代のWeb標準（Chrome、Safari、Edge、Firefoxなど）の仕様からは完全に除外されています。そのため、現在のホームページ制作において記述しても機能しない点に注意が必要です。

現代のホームページ（ウェブサイト）における行間設計の実装手法

現在のWeb標準環境において、読みやすく均整のとれた日本語の行間や、縦書きにおける美しい行の並びを表現するためには、別の洗練されたCSSプロパティを組み合わせてプログラミングを行います。

最も基本かつ重要なプロパティは「line-height」です。line-heightに単位のない数値（例：line-height: 1.7;）を指定することで、フォントサイズに比例した均等で美しい行高をすべてのモダンブラウザで安全に再現できます。
また、縦書きを実装する「writing-mode: vertical-rl;」を適用した環境において、行同士の間隔（横方向の並び）をコントロールしたい場合は、line-heightによる制御に加えて、要素間の余白を調整する「margin」や「padding」を適切に組み合わせて設計します。

事業用ホームページの制作において、日本の伝統的な文字組みの美しさを取り入れつつ、検索エンジン（SEO）に最適化された強固で保守性の高いソースコードを維持するためには、古い独自仕様に頼るのではなく、現代の閲覧環境に即した標準技術を正しく選択していくことが極めて重要です。これにより、訪問者がストレスなく読み進められるユーザーインターフェースを構築できます。

layout-grid-line: ;

layout-grid系プロパティ

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

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

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

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

ホームページ制作におけるCSSの設定で閉じ忘れがあると、CSSが全く効かなくなり、ホームページのレイアウトやカラーの設定が一切反映されなくなってしまう事がありますので注意が必要です。場合によってはレイアウト崩れなどが起こることがありますので、Webデザインの調整などの際には、閉じ忘れに十分注意しましょう。

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

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

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

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