「[[Open棟梁 wiki>https://opentouryo.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>リリース情報#i11149ce]]

*目次 [#y541fab0]
#contents

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

なお、Open 棟梁のサンプルには、
-Web フォームサンプル (ProjectX_sample)、
-MVC サンプル (MVC_sample)、
-シングルページアプリケーション サンプル (SPA_sample) 

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

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

*画面デザイン [#y7a5a8f9]
画面デザインは、
-[[Bootstrap 3 の CSS>http://getbootstrap.com/css/]] を使用し、~
[[レスポンシブデザインに対応>#pe542e5d]]いたしました。
-以下の図のように [[3 つのエリア>#ye9d5702]]に分かれます。

*レスポンシブデザイン [#pe542e5d]
**ブラウザの幅が広いとき [#d007bb14]
#ref(Overview.png,nolink,50%);

**ブラウザの幅が狭いとき [#v8d551db]
#ref(Overview_Narrow.png,nolink,50%);

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

** ヘッダーエリア [#kd762597]
-[[ヘッダーエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Aspx/Common/testBlankScreen.master#L28]]は、アプリケーションで共通的なヘッダーを表示するエリアです。
-ヘッダーエリアは、常にブラウザの上部に固定されます。

#ref(header.png,nolink,50%);

***ヘッダーエリアのグリッドシステム [#e8c275c1]
-[[Bootstrap 3 のグリッドシステム>http://getbootstrap.com/css/#grid]]では、~
12 分割されたカラムに対してコンテンツを割り当てます。

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

>用意しました。

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

>※ 詳細は [[Bootstrap のサイト>http://getbootstrap.com/css/#grid]]をご覧いただければと思いますが、

-たとえばタイトルエリアの
 col-xs-10

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

**ボディーエリア [#k9280c87]
-[[ボディーエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Aspx/Common/testBlankScreen.master#L42]]は、ヘッダーエリアとフッターエリア以外のエリアです。
-ボディーエリアは、以下の図のように、さらに
--「[[メニューエリア>#g4af97d9]]」
--「[[コンテンツエリア>#te75c297]]」

>に分かれます。

***メニューエリア [#g4af97d9]
-[[メニューエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Aspx/Common/testBlankScreen.master#L43]]は、アプリケーションの各メニューを表示するエリアです。

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

-メニューエリアの実装には、[[Bootsnipp のスニペット>https://bootsnipp.com/snippets/featured/responsive-navigation-menu]]を参考といたしました。~
このため、具体的な実装方法などはこちらをご覧ください。

-なお、メニューエリアは、WWWブラウザの画面がスクロールされたときも~
コンテンツエリアが固定表示させるよう、[[JavaScript>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Scripts/touryo/else.js#L48]] で制御しています。

***コンテンツエリア [#te75c297]
-[[コンテンツエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Aspx/Common/testBlankScreen.master#L60]]は、各ページのコンテンツを表示するエリアです。
-コンテンツページ (*.aspx) に定義したものが表示されます。

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

>割り当てています。

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

-ブラウザの幅が広いとき
#ref(body.png,nolink,50%);

-ブラウザの幅が狭いとき
#ref(body_Narrow.png,nolink,50%);

**フッターエリア [#j7fdd113]
-[[フッターエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Aspx/Common/testBlankScreen.master#L114]]は、
--アプリケーションの共通的なフッターを表示するエリアです。
--常にブラウザの下部に固定されます。

-フッターエリアの実装には、~
[[Bootstrap の Sticky Footer テンプレート>http://getbootstrap.com/examples/sticky-footer/]]を参考といたしました。~
このため、具体的な実装方法などはこちらをご覧ください。
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS