V2 templateのCSSレイアウト

「Open棟梁 wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る

目次 †

概要 †

本ページでは、Open 棟梁 v2.0 から 新しくなった画面デザインについてご紹介いたします。

なお、Open 棟梁のサンプルには、

• Web フォームサンプル (WebForms_sample)、
• MVC サンプル (MVC_sample)、
• 旧シングルページアプリケーション サンプル (SPA_sample)

がありますが、いずれも同様の画面デザインとしています。

このため、以下は Web フォームサンプル (WebForms_sample) の例をご紹介いたします。

画面デザイン †

画面デザインは、

• Bootstrap 3 の CSS を使用し、
  レスポンシブデザインに対応いたしました。
• 以下の図のように 3 つのエリアに分かれます。

レスポンシブデザイン †

ブラウザの幅が広いとき †

ブラウザの幅が狭いとき †

3 つのエリア †

• この各エリアは、マスターページ (*.master) に定義しています。
• 以下、それぞれのエリアについて説明いたします。

ヘッダーエリア †

• ヘッダーエリアは、アプリケーションで共通的なヘッダーを表示するエリアです。
• ヘッダーエリアは、常にブラウザの上部に固定されます。

• ヘッダーエリアのグリッドシステム
  • Bootstrap 3 のグリッドシステムでは、
    12 分割されたカラムに対してコンテンツを割り当てます。

• Open 棟梁 2.0 のヘッダーエリアは、上の図のように
  • 10 個分のカラムを持つ「タイトルエリア」と、
  • 2 個分のカラムを持つ「ボタンエリア」を

用意しました。

• なお、Bootstrap では
  • そのカラムの割り当て方を col-*-* というクラスで定義します。
  • １つめの * には画面サイズを示すキーワードが、
  • ２つめの * には、割り当てるカラム数を

指定します。
※ 詳細は Bootstrap のサイトをご覧いただければと思いますが、

• たとえばタイトルエリアの

  col-xs-10

• では、１つめのパラメーターが "xs" ですので、全サイズの画面に適用されます。
• また、２つめのパラメーターは "10" ですので、12 カラム分の 10 カラムを割り当てることを意味します。

ボディーエリア †

• ボディーエリアは、ヘッダーエリアとフッターエリア以外のエリアです。
  ボディーエリアは、以下の図のように、さらに
  • 「メニューエリア」
  • 「コンテンツエリア」

に分かれます。

• メニューエリアは、アプリケーションの各メニューを表示するエリアです。

• 上記のとおり、レスポンシブデザインを採用し、
  • ブラウザ幅が広いときは画面左側に固定され、
  • ブラウザ幅が狭いときはヘッダーエリアの下に固定されます。

• メニューエリアの実装には、Bootsnipp のスニペットを参考といたしました。
  このため、具体的な実装方法などはこちらをご覧ください。

• なお、メニューエリアは、WWWブラウザの画面がスクロールされたときも
  コンテンツエリアが固定表示させるよう、JavaScript で制御しています。

• コンテンツエリアは、各ページのコンテンツを表示するエリアです。

• コンテンツページ (*.aspx) に定義したものが表示されます。

• ボディーエリアにも、Bootstrap 3 のグリッドシステムを採用し、
  • メニューエリアには 2 カラム分を、
  • コンテンツエリアには残りの 10 カラム分を

割り当てています。

• ここで、それぞれのクラスを col-sm-2、col-sm-10 としています。
  • "sm" は、画面サイズが 768px 以上の場合に適用されます。
  • 画面サイズが 768px よりも狭い場合は、Style.cssで、Bootstrap のメディアクエリを使用し、
    スマホなど、サイズの小さな画面向けのデザイン (上記の「ブラウザの幅が狭いとき」) に切り替わります。

• ブラウザの幅が広いとき
  

• ブラウザの幅が狭いとき
  

フッターエリア †

• フッターエリアは、
  • アプリケーションの共通的なフッターを表示するエリアです。
  • 常にブラウザの下部に固定されます。

• フッターエリアの実装には、
  Bootstrap の Sticky Footer テンプレートを参考といたしました。
  このため、具体的な実装方法などはこちらをご覧ください。