第3回/フロントエンド開発/グリッドシステム の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 第3回/フロントエンド開発/グリッドシステム へ行く。
  • 1 (2021-06-30 (水) 04:47:16)
  • 2 (2021-06-30 (水) 21:15:51)

第3回/フロントエンド開発

グリッドシステムとは†

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

• こんな感じ
  

Bootstrapにおけるレスポンシブデザイン†

• bootstrapでは、「画面サイズ(横幅)」を基準にして、表示するコンテンツの大きさを変更している。
• 基本は「画面を12等分して、どの環境では、どれだけの大きさで表示するか」を設定する
• 大きさの基準は以下の通り
  
  

  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分だけ表示

• クラスに付属させるだけでレスポンシブになるため、簡単に作れる

まあ触ってみよう†

• なんかやってみる
• Chromeでは、F12 => 右上のボタン で、スマホサイズのエミュレートができる