第3回/フロントエンド開発/グリッドシステム
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
[[第3回/フロントエンド開発]]
* レスポンシブデザインとは [#o769bfa1]
- ユーザの環境(PC,タブレット,スマートフォン)に合わせて、...
- メリット
-- 1つのhtmlで完結する（変更が楽）
-- ユーザにあったページが自動で表示される
- こんな感じ~
&attachref(res01.jpg,,50%);
~
&attachref(res02.jpg,,50%);
* Bootstrapにおけるグリッドシステム [#pa7df087]
- レスポンシブデザインの実装を容易化するbootstrapの仕組み．
-- 画面を''格子状（グリッド）''にとらえ，画面サイズに応じ...
- bootstrapでは、「画面サイズ(横幅)」を基準にして、表示す...
- 基本は「画面を12等分して、どの環境では、どれだけの大き...
- 大きさの基準は以下の通り~
&attachref(res3.png,,50%);
~
&attachref(res4.png,,50%);
xs: iPhone縦向き
sm: iPhone(～8)横向き、iPad縦向き
md: iPhone(X～)横向き、PCブラウザ半分
lg: ipad横向き
xl: PCブラウザ全画面
-- 例
<div class="col-xs-12 col-sm-6 col-xl-4">
-- スマホだと横幅全部に表示、ipadだと半分、PCだと1/3分だ...
- クラスに付属させるだけでレスポンシブになるため、簡単に...
* まあ触ってみよう [#j55cac6d]
- なんかやってみる
- Chromeでは、F12 => 右上のボタン で、スマホサイズのエミ...
&attachref(res5.jpg,,50%);
終了行:
[[第3回/フロントエンド開発]]
* レスポンシブデザインとは [#o769bfa1]
- ユーザの環境(PC,タブレット,スマートフォン)に合わせて、...
- メリット
-- 1つのhtmlで完結する（変更が楽）
-- ユーザにあったページが自動で表示される
- こんな感じ~
&attachref(res01.jpg,,50%);
~
&attachref(res02.jpg,,50%);
* Bootstrapにおけるグリッドシステム [#pa7df087]
- レスポンシブデザインの実装を容易化するbootstrapの仕組み．
-- 画面を''格子状（グリッド）''にとらえ，画面サイズに応じ...
- bootstrapでは、「画面サイズ(横幅)」を基準にして、表示す...
- 基本は「画面を12等分して、どの環境では、どれだけの大き...
- 大きさの基準は以下の通り~
&attachref(res3.png,,50%);
~
&attachref(res4.png,,50%);
xs: iPhone縦向き
sm: iPhone(～8)横向き、iPad縦向き
md: iPhone(X～)横向き、PCブラウザ半分
lg: ipad横向き
xl: PCブラウザ全画面
-- 例
<div class="col-xs-12 col-sm-6 col-xl-4">
-- スマホだと横幅全部に表示、ipadだと半分、PCだと1/3分だ...
- クラスに付属させるだけでレスポンシブになるため、簡単に...
* まあ触ってみよう [#j55cac6d]
- なんかやってみる
- Chromeでは、F12 => 右上のボタン で、スマホサイズのエミ...
&attachref(res5.jpg,,50%);
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
