レイアウトとビューの定義 (HTML)
この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、 「最新のドキュメント」をご覧ください]
一貫性のある予測可能なユーザー インターフェイス管理を通じて、フォーム ファクター、ディスプレイ サイズ、ビュー状態を問わず、柔軟で調和のとれたユーザー エクスペリエンスを提供する Windows ランタイム アプリを構築できます。アプリは、ユーザーが電話、タブレットや大きな HD モニターで表示したときにも、画面を縦方向にしたときにも、アプリのサイズを変更したときにも適切に表示される必要があります。ユーザーが選ぶデバイスやビューを考慮して、ユーザーの選択した内容と合うよう UI が適切に再配置されるようにしてください。
.png "横方向の全画面ビュー、縦方向の全画面ビュー、スナップ ビュー、狭い幅にサイズ変更された表示")
JavaScript を使った Windows ランタイム アプリの UI を指定する場合、鍵となるのは、アプリでサポートされるビューとアプリで必要なレイアウトという 2 つの主要な要素です。この作業には、カスケード スタイル シート (CSS) が必要です。
CSS ユーザー インターフェイスの記述と管理には標準ベースの CSS を使い、コンテンツを表示から切り離します。つまり、表示内容を表示方法から切り離します。この分離により、さまざまなデバイス、フォーム ファクター、画面サイズ、ユーザー設定、ビュー状態をサポートする、一貫性と実用性に優れた楽しいユーザー エクスペリエンスを提供できます。
レイアウト レイアウトは、サプリでサポートしているビューに対応するためのメカニズムです。アプリ コンテンツのスタイル設定、構築、表示にカスケード スタイル シート レベル 3 (CSS3) レイアウト モジュール (グリッド、段組、領域、可変ボックスなど) を使って、ユーザーが好きな方法でコンテンツを適切に表示できるようにします。
セマンティック ズーム機能を持つアプリでは、セマンティックしきい値を指定でき、表示される情報の細かさと量に応じて、UI のグリッド レイアウトと線状レイアウトを切り替えることができます。
ビュー ビューは、ユーザーがアプリ コンテンツにアクセスし、それを操作する手段です。
- 横方向または縦方向
- 全画面またはサイズ変更
- パンとズームに対応した、サイズが調整された UI サーフェス
- 検索結果ウィンドウやフォルダー構造など、特定の UI 要素
Windows ランタイム アプリのレイアウトとビューを定義するには、HTML、JavaScript、CSS に関する知識が必要です。
このセクションの内容
| トピック | 説明 |
|---|---|
アプリのレイアウトを定義して、ウィンドウのサイズや方向を自由に調整することができます。 |
|
どのウィンドウ サイズでも適切に表示され、正しく機能するアプリを設計する場合、既定の全画面の横長のレイアウトを補完する追加のレイアウトを作成するかどうかを選ぶ必要があります。 |
|
ユーザーが複数の独立した機能を別のウィンドウで表示できるようにして、生産性を高めることができます。 |
|
Windows ランタイム アプリのユーザーに、柔軟性と適応性に優れたユーザー インターフェイスを提供するには、まず、コンテンツとコンテンツが使われるビューに最適なレイアウト モードを決める必要があります。このトピックでは、Windows 8 の Windows ストア アプリでサポートされるカスケード スタイル シート レベル 3 (CSS3) レイアウト機能について説明します。 |
|
ここで説明するレイアウト パターンを使って、アプリ ページに UI 要素をレイアウトできます。余白、ページ ヘッダー、ガターの幅など、各種要素の一貫したパターンに従って、アプリ間の統一性が確保され、システム全体の操作方法をわかりやすくユーザーに示すことができます。 |