![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[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 フォームサンプル (WebForms_sample)、 -MVC サンプル (MVC_sample)、 -旧シングルページアプリケーション サンプル (SPA_sample) がありますが、いずれも同様の画面デザインとしています。 このため、以下は Web フォームサンプル (WebForms_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/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Aspx/Common/Master/testBlankScreen.master#L30]]は、アプリケーションで共通的なヘッダーを表示するエリアです。 -ヘッダーエリアは、常にブラウザの上部に固定されます。 #ref(header.png,nolink,50%); -ヘッダーエリアのグリッドシステム --[[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/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Aspx/Common/Master/testBlankScreen.master#L43]]は、ヘッダーエリアとフッターエリア以外のエリアです。~ ボディーエリアは、以下の図のように、さらに --「メニューエリア」 --「コンテンツエリア」 >に分かれます。 -[[メニューエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Aspx/Common/Master/testBlankScreen.master#L45]]は、アプリケーションの各メニューを表示するエリアです。 --上記のとおり、レスポンシブデザインを採用し、 ---ブラウザ幅が広いときは画面左側に固定され、 ---ブラウザ幅が狭いときはヘッダーエリアの下に固定されます。 --メニューエリアの実装には、[[Bootsnipp のスニペット>https://bootsnipp.com/snippets/featured/responsive-navigation-menu]]を参考といたしました。~ このため、具体的な実装方法などはこちらをご覧ください。 --なお、メニューエリアは、WWWブラウザの画面がスクロールされたときも~ コンテンツエリアが固定表示させるよう、[[JavaScript>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/Scripts/touryo/else.js#L48]] で制御しています。 コンテンツエリアが固定表示させるよう、[[JavaScript>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Scripts/touryo/else.js#L48]] で制御しています。 -[[コンテンツエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Aspx/Common/Master/testBlankScreen.master#L62]]は、各ページのコンテンツを表示するエリアです。 --コンテンツページ (*.aspx) に定義したものが表示されます。 --ボディーエリアにも、Bootstrap 3 のグリッドシステムを採用し、 ---メニューエリアには 2 カラム分を、 ---コンテンツエリアには残りの 10 カラム分を >割り当てています。 --ここで、それぞれのクラスを ''col-sm-2''、''col-sm-10'' としています。 ---"sm" は、画面サイズが 768px 以上の場合に適用されます。 ---画面サイズが 768px よりも狭い場合は、[[Style.css>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Content/touryo/Style.css#L281]]で、[[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/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Aspx/Common/Master/testBlankScreen.master#L115]]は、 --アプリケーションの共通的なフッターを表示するエリアです。 --常にブラウザの下部に固定されます。 -フッターエリアの実装には、~ [[Bootstrap の Sticky Footer テンプレート>http://getbootstrap.com/examples/sticky-footer/]]を参考といたしました。~ このため、具体的な実装方法などはこちらをご覧ください。 IP:202.246.252.97 TIME:"2018-07-19 (木) 14:21:36" REFERER:"https://opentouryo.osscons.jp/index.php?cmd=edit&page=V2%20template%E3%81%AECSS%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88" USER_AGENT:"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36"
