第3回/フロントエンド開発/グリッドシステム の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• 第3回/フロントエンド開発/グリッドシステム へ行く。
• 第3回/フロントエンド開発/グリッドシステム の差分を削除

#author("2021-06-30T03:15:40+00:00","","")
#author("2021-07-02T05:54:27+00:00","","")
[[第3回/フロントエンド開発]]

* グリッドシステムとは [#o769bfa1]
* レスポンシブデザインとは [#o769bfa1]

- ユーザの環境(PC,タブレット,スマートフォン)に合わせて、見せ方を変化させること。
- メリット
-- 1つのhtmlで完結する（変更が楽）
-- ユーザにあったページが自動で表示される

- こんな感じ~

&attachref(res01.jpg,,50%);
~
&attachref(res02.jpg,,50%);

* Bootstrapにおけるレスポンシブデザイン [#pa7df087]
* 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%);