レイアウトの選択 (HTML)

この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、 「最新のドキュメント」をご覧ください]

Windows ランタイム アプリのユーザーに、柔軟性と適応性に優れたユーザー インターフェイスを提供するには、まず、コンテンツとコンテンツが使われるビューに最適なレイアウト モードを決める必要があります。このトピックでは、Windows 8 の Windows ストア アプリでサポートされるカスケード スタイル シート レベル 3 (CSS3) レイアウト機能について説明します。可変ボックス レイアウトとグリッド レイアウトは、アプリとカスタム コントロールのための柔軟なレイアウトを作るのに便利です。一方、段組と領域は、テキストなどの読み取りコンテンツをレイアウトするのに最適です。

可変ボックス レイアウト

可変ボックス (Flexbox) は、相対可変サイズ指定と組み込みサイズ指定の両方をサポートする制約ベースのシステムを使って、子要素の配置とサイズ指定が行われるレイアウト メカニズムです。可変ボックス レイアウトは複数の画面サイズに対応でき、デジタル新聞や雑誌など、さまざまなデジタル印刷メディアの使用シナリオを実現します。

Flexbox レイアウトは、複雑な Web ページをレイアウトすることを目的とし、画面やブラウザー ウィンドウのサイズがさまざまに変化する場合にも要素の相対的な位置とサイズを一定に保つ場合に、特に役立ちます。位置とサイズを正しく設定するのが難しいフロートへの依存を軽減できます。

Flexbox レイアウトは、ボックスのサイズを定義するときに利用可能な領域を考慮することで、相対的にサイズ指定と配置を行えるようにします。たとえば、ブラウザー ウィンドウ内の余分な空白を、複数の子要素にそのサイズに応じて均等に分配し、それらの子要素をコンテナーとなるブロックの中央に配置することができます。

Flexbox レイアウトを使うと、次の作業が可能になります。

  • — 異なるサイズの画面やブラウザー ウィンドウを使用した際にも — 流動的で、しかも互いに相対的な位置とサイズを維持する複数の要素 (画像、コントロールなど) で構成されるレイアウトを構築する。
  • 一連の要素のレイアウト軸 (水平または垂直) に並行する余白を、指定した要素のサイズの増加に比例して割り当てる方法を指定する。
  • 一連の要素のレイアウト軸に並行する余白を、一連の要素の前後または間に割り当てる方法を指定する。
  • 左右に並べて配置されたボタンの上下の余白など、要素の周りにある、要素のレイアウト軸に対して垂直な余白の形を指定する。
  • ページ内に要素をレイアウトする方向を制御する。たとえば、上から下、左から右、右から左、下から上など。
  • ドキュメント オブジェクト モデル (DOM) で指定されている順序とは異なる順序で、画面上の要素を並べ替える。

グリッドと異なり、Flexbox を親コンテナー内に明示的に位置付ける上で子要素は必要ありません。動的に決定された数の子要素を使って軽量の項目コンテナーを設計する場合は、一般にはグリッドが便利です。

詳しくは、「可変ボックス ("Flexbox") レイアウト」をご覧ください。

グリッド配置

グリッドは、予測可能な一連のサイズ指定動作を使用して、レイアウトに利用できる領域を列と行に分割するメカニズムを作成者に提供します。作成者は、列と行の間のグリッド線を参照するか、グリッド セルを定義および参照して、アプリのビルディング ブロック要素の位置決めとサイズ指定を正確に行えます。グリッド セルは、列と行の交点をカバーする長方形の領域です。

Flexbox と同様に、グリッドを使うと、フロートやスクリプトによる位置決めよりも流動的なレイアウトを行えます。Web ページまたは Web アプリケーションの主な領域空間を分割し、サイズ、位置、レイヤーに基づいて HTML コントロールの構成要素間の関係を定義できます。これにより、ブラウザー ウィンドウ内の利用可能な領域を考慮できない固定レイアウトを作成する必要がなくなります。 グリッドでは複数の要素を列または行で整列させることができますが、コンテンツ構造を持たないため、HTML テーブルでは実現できないシナリオも実現できます。グリッドとメディア クエリを併用することで、デバイスのフォーム ファクター、方向、利用可能な領域などの変更に、レイアウトをシームレスに適応させることができます。グリッドは水平レイアウトと垂直レイアウトの両方を制御するため、最上位アプリ レイアウトには、通常、Flexbox ではなくグリッドが適します。

詳しくは、「グリッド レイアウト」をご覧ください。

段組レイアウト

段組レイアウトは、特定の列から任意の数の列へのコンテンツ フローをサポートします。

段組レイアウトを使うと、列間にギャップやオプションの規則が設定されている複数の列に、コンテンツをフローすることができます。また、ブラウザー ウィンドウのサイズに基づいて、列数を変更することもできます。 複数列要素は、column-width プロパティまたは column-count プロパティが auto に設定されないために、段組レイアウトのコンテナーとして動作する要素として、W3C によって定義されています。段組レイアウトには、コンテンツ ボックスとコンテンツの間の新しい種類のコンテナーとして定義される、列ボックスが導入されました。 複数列要素には、列ボックスの行を複数含めることができます。 行は、列スパン要素 (column-span:all が指定された要素) で区切られます。 行は、複数列要素の方向順に並べられます。隣り合う列ボックスは、列ギャップで区切られます。列ギャップには必要に応じて列規則を設定できます。

詳しくは、「段組レイアウト」をご覧ください。

領域レイアウト

領域レイアウトは、1 つのコンテンツ ストリームを取得し、そのストリームを HTML テンプレートの複数の空のコンテナーにセグメント化するページ レイアウト機能です。HTML テンプレートとは、もともとほとんどコンテンツを持たず、代わりに受信したコンテンツが特定のレイアウトになるように、サイズと位置が決められた空のコンテナーで主に構成されているドキュメントのことです。領域を使うと、カスケード スタイル シート (CSS) でサイズと位置が明示的に指定された複数の列にまたがってテキストを表示できるので、新聞や雑誌のようなスタイルのレイアウトを作成できます。

詳しくは、「領域」をご覧ください。

Windows 8 のハンズオン ラボ

アプリ レイアウトなど Windows 8 の主要機能を試してみたい場合は、Windows 8 のハンズオン ラボをダウンロードしてください。このラボでは、任意のプログラミング言語 (JavaScript と HTML または C# と XAML) で Windows ストア アプリのサンプルを作成する方法をモジュール形式の手順で紹介します。

関連トピック

UI のレイアウト

アプリのページのレイアウト

レイアウトとスケーリングの UX ガイドライン