「Open棟梁 wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
本ページでは、Open 棟梁 v2.0 から 新しくなった画面デザインについてご紹介いたします。
なお、Open 棟梁のサンプルには、
- Web フォームサンプル (ProjectX_sample)、
- MVC サンプル (MVC_sample)、
- シングルページアプリケーション サンプル (SPA_sample)
がありますが、いずれも同様の画面デザインとしています。
このため、以下は Web フォームサンプル (ProjectX_sample) の例をご紹介いたします。
画面デザイン †
画面デザインは、
レスポンシブデザイン †
ブラウザの幅が広いとき †
ブラウザの幅が狭いとき †
3 つのエリア †
- この各エリアは、マスターページ (*.master) に定義しています。
- 以下、それぞれのエリアについて説明いたします。
ヘッダーエリア †
- ヘッダーエリアは、アプリケーションで共通的なヘッダーを表示するエリアです。
- ヘッダーエリアは、常にブラウザの上部に固定されます。
ヘッダーエリアのグリッドシステム †
- Open 棟梁 2.0 のヘッダーエリアは、上の図のように
- 10 個分のカラムを持つ「タイトルエリア」と、
- 2 個分のカラムを持つ「ボタンエリア」を
用意しました。
- なお、Bootstrap では
- そのカラムの割り当て方を col-*-* というクラスで定義します。
- 1つめの * には画面サイズを示すキーワードが、
- 2つめの * には、割り当てるカラム数を指定します。
※ 詳細は Bootstrap のサイトをご覧いただければと思いますが、
- では、1つめのパラメーターが "xs" ですので、全サイズの画面に適用されます。
- また、2つめのパラメーターは "10" ですので、12 カラム分の 10 カラムを割り当てることを意味します。
ボディーエリア †
- ボディーエリアは、ヘッダーエリアとフッターエリア以外のエリアです。
- ボディーエリアは、以下の図のように、さらに
に分かれます。
メニューエリア †
- 上記のとおり、レスポンシブデザインを採用し、
- ブラウザ幅が広いときは画面左側に固定され、
- ブラウザ幅が狭いときはヘッダーエリアの下に固定されます。
- なお、メニューエリアは、WWWブラウザの画面がスクロールされたときも
コンテンツエリアが固定表示させるよう、JavaScript で制御しています。
コンテンツエリア †
- コンテンツエリアは、各ページのコンテンツを表示するエリアです。
- コンテンツページ (*.aspx) に定義したものが表示されます。
ボディーエリアのグリッドシステム †
- ボディーエリアにも、Bootstrap 3 のグリッドシステムを採用し、
- メニューエリアには 2 カラム分を、
- コンテンツエリアには残りの 10 カラム分を
割り当てています。
- ここで、それぞれのクラスを col-sm-2、col-sm-10 としています。
- "sm" は、画面サイズが 768px 以上の場合に適用されます。
- 画面サイズが 768px よりも狭い場合は、Bootstrap のメディアクエリを使用し、スマホなど、
サイズの小さな画面向けのデザイン (上記の「ブラウザの幅が狭いとき」) に切り替わります。
フッターエリア †
- フッターエリアは、
- アプリケーションの共通的なフッターを表示するエリアです。
- 常にブラウザの下部に固定されます。