V2 templateのCSSレイアウト
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[Open棟梁 wiki>https://opentouryo.osscons.jp]]」は、「...
-[[戻る>リリース情報#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/Op...
-ヘッダーエリアは、常にブラウザの上部に固定されます。
#ref(header.png,nolink,50%);
-ヘッダーエリアのグリッドシステム
--[[Bootstrap 3 のグリッドシステム>http://getbootstrap.co...
12 分割されたカラムに対してコンテンツを割り当てます。
--Open 棟梁 2.0 のヘッダーエリアは、上の図のように
---10 個分のカラムを持つ「タイトルエリア」と、
---2 個分のカラムを持つ「ボタンエリア」を
>用意しました。
--なお、Bootstrap では
---そのカラムの割り当て方を ''col-*-*'' というクラスで定...
---1つめの ''*'' には画面サイズを示すキーワードが、
---2つめの ''*'' には、割り当てるカラム数を
>指定します。~
※ 詳細は [[Bootstrap のサイト>http://getbootstrap.com/css...
--たとえばタイトルエリアの
col-xs-10
---では、1つめのパラメーターが "xs" ですので、全サイズの...
---また、2つめのパラメーターは "10" ですので、12 カラム...
***ボディーエリア [#k9280c87]
-[[ボディーエリア>https://github.com/OpenTouryoProject/Op...
ボディーエリアは、以下の図のように、さらに
--「メニューエリア」
--「コンテンツエリア」
>に分かれます。
-[[メニューエリア>https://github.com/OpenTouryoProject/Op...
--上記のとおり、レスポンシブデザインを採用し、
---ブラウザ幅が広いときは画面左側に固定され、
---ブラウザ幅が狭いときはヘッダーエリアの下に固定されます。
--メニューエリアの実装には、[[Bootsnipp のスニペット>http...
このため、具体的な実装方法などはこちらをご覧ください。
--なお、メニューエリアは、WWWブラウザの画面がスクロールさ...
コンテンツエリアが固定表示させるよう、[[JavaScript>https:...
-[[コンテンツエリア>https://github.com/OpenTouryoProject/...
--コンテンツページ (*.aspx) に定義したものが表示されます。
--ボディーエリアにも、Bootstrap 3 のグリッドシステムを採...
---メニューエリアには 2 カラム分を、
---コンテンツエリアには残りの 10 カラム分を
>割り当てています。
--ここで、それぞれのクラスを ''col-sm-2''、''col-sm-10'' ...
---"sm" は、画面サイズが 768px 以上の場合に適用されます。
---画面サイズが 768px よりも狭い場合は、[[Style.css>https...
スマホなど、サイズの小さな画面向けのデザイン (上記の「ブ...
--ブラウザの幅が広いとき
#ref(body.png,nolink,50%);
--ブラウザの幅が狭いとき
#ref(body_Narrow.png,nolink,50%);
***フッターエリア [#j7fdd113]
-[[フッターエリア>https://github.com/OpenTouryoProject/Op...
--アプリケーションの共通的なフッターを表示するエリアです。
--常にブラウザの下部に固定されます。
-フッターエリアの実装には、~
[[Bootstrap の Sticky Footer テンプレート>http://getboots...
このため、具体的な実装方法などはこちらをご覧ください。
終了行:
「[[Open棟梁 wiki>https://opentouryo.osscons.jp]]」は、「...
-[[戻る>リリース情報#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/Op...
-ヘッダーエリアは、常にブラウザの上部に固定されます。
#ref(header.png,nolink,50%);
-ヘッダーエリアのグリッドシステム
--[[Bootstrap 3 のグリッドシステム>http://getbootstrap.co...
12 分割されたカラムに対してコンテンツを割り当てます。
--Open 棟梁 2.0 のヘッダーエリアは、上の図のように
---10 個分のカラムを持つ「タイトルエリア」と、
---2 個分のカラムを持つ「ボタンエリア」を
>用意しました。
--なお、Bootstrap では
---そのカラムの割り当て方を ''col-*-*'' というクラスで定...
---1つめの ''*'' には画面サイズを示すキーワードが、
---2つめの ''*'' には、割り当てるカラム数を
>指定します。~
※ 詳細は [[Bootstrap のサイト>http://getbootstrap.com/css...
--たとえばタイトルエリアの
col-xs-10
---では、1つめのパラメーターが "xs" ですので、全サイズの...
---また、2つめのパラメーターは "10" ですので、12 カラム...
***ボディーエリア [#k9280c87]
-[[ボディーエリア>https://github.com/OpenTouryoProject/Op...
ボディーエリアは、以下の図のように、さらに
--「メニューエリア」
--「コンテンツエリア」
>に分かれます。
-[[メニューエリア>https://github.com/OpenTouryoProject/Op...
--上記のとおり、レスポンシブデザインを採用し、
---ブラウザ幅が広いときは画面左側に固定され、
---ブラウザ幅が狭いときはヘッダーエリアの下に固定されます。
--メニューエリアの実装には、[[Bootsnipp のスニペット>http...
このため、具体的な実装方法などはこちらをご覧ください。
--なお、メニューエリアは、WWWブラウザの画面がスクロールさ...
コンテンツエリアが固定表示させるよう、[[JavaScript>https:...
-[[コンテンツエリア>https://github.com/OpenTouryoProject/...
--コンテンツページ (*.aspx) に定義したものが表示されます。
--ボディーエリアにも、Bootstrap 3 のグリッドシステムを採...
---メニューエリアには 2 カラム分を、
---コンテンツエリアには残りの 10 カラム分を
>割り当てています。
--ここで、それぞれのクラスを ''col-sm-2''、''col-sm-10'' ...
---"sm" は、画面サイズが 768px 以上の場合に適用されます。
---画面サイズが 768px よりも狭い場合は、[[Style.css>https...
スマホなど、サイズの小さな画面向けのデザイン (上記の「ブ...
--ブラウザの幅が広いとき
#ref(body.png,nolink,50%);
--ブラウザの幅が狭いとき
#ref(body_Narrow.png,nolink,50%);
***フッターエリア [#j7fdd113]
-[[フッターエリア>https://github.com/OpenTouryoProject/Op...
--アプリケーションの共通的なフッターを表示するエリアです。
--常にブラウザの下部に固定されます。
-フッターエリアの実装には、~
[[Bootstrap の Sticky Footer テンプレート>http://getboots...
このため、具体的な実装方法などはこちらをご覧ください。
ページ名: