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

目次

概要

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

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

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

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

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

画面デザイン

画面デザインは、

レスポンシブデザイン

ブラウザの幅が広いとき

Overview.png

ブラウザの幅が狭いとき

Overview_Narrow.png

3 つのエリア

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

ヘッダーエリア

  • ヘッダーエリアは、アプリケーションで共通的なヘッダーを表示するエリアです。
  • ヘッダーエリアは、常にブラウザの上部に固定されます。
header.png
  • Open 棟梁 2.0 のヘッダーエリアは、上の図のように
    • 10 個分のカラムを持つ「タイトルエリア」と、
    • 2 個分のカラムを持つ「ボタンエリア」を

用意しました。

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

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

  • たとえばタイトルエリアの
    col-xs-10
  • では、1つめのパラメーターが "xs" ですので、全サイズの画面に適用されます。
  • また、2つめのパラメーターは "10" ですので、12 カラム分の 10 カラムを割り当てることを意味します。

ボディーエリア

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

に分かれます。

  • 上記のとおり、レスポンシブデザインを採用し、
    • ブラウザ幅が広いときは画面左側に固定され、
    • ブラウザ幅が狭いときはヘッダーエリアの下に固定されます。
  • メニューエリアの実装には、Bootsnipp のスニペットを参考といたしました。
    このため、具体的な実装方法などはこちらをご覧ください。
  • なお、メニューエリアは、WWWブラウザの画面がスクロールされたときも
    コンテンツエリアが固定表示させるよう、JavaScript で制御しています。
  • コンテンツページ (*.aspx) に定義したものが表示されます。
  • ボディーエリアにも、Bootstrap 3 のグリッドシステムを採用し、
    • メニューエリアには 2 カラム分を、
    • コンテンツエリアには残りの 10 カラム分を

割り当てています。

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

フッターエリア

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

添付ファイル: fileOverview_Narrow.png 32件 [詳細] fileOverview.png 46件 [詳細] fileheader.png 45件 [詳細] filebody_Narrow.png 39件 [詳細] filebody.png 39件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-07-19 (木) 14:21:36 (90d)