Bootstrap / AdminLTE におけるレスポンシブとレイアウト基礎メモ

最近は、ひたすらデザイナーさんのデザインを実装している。
既存はAdminLTEを利用しているので、レスポンシブ対応。

今回、AdminLTEを利用せずに新しいデザインを載せ替えていった。
デザイナーさんから来たデザインがPC対応でレスポンシブに対応をしていなかった。

ふと思ってしまった。
CSSもデザインだけ上書きをして、レスポンシブの内容はそのまま残せるんじゃないかと。

だが、もらったSCSSもネスト化されている。
その構造を踏まえてレスポンシブの機能を残しつつ、実装していくことになる。
色だけならまだしも、paddingとか出てくることを考えると、引っかかりポイントまた出てきそうだな....

もらったSCSSはコンテンツが4つの場合はこの配置にする。のような指定もある。
競合しそうだなー
とは思いつつ調べていくことにする。

ブレークポイント（画面幅）

区分	幅(px)	主な用途
xs	0〜575	スマホ
sm	576〜767	大きめスマホ
md	768〜991	タブレット
lg	992〜1199	PC
xl	1200〜1399	大画面PC
xxl	1400〜	超ワイド

例：.col-md-6 → 768px以上の画面で横幅50%
※　Bootstrap（＝AdminLTEのベース）は 1行を12分割（グリッドシステム）のためmd-6で12の半分を利用している。

⸻

container / row / col の基本

container

・ページの大枠
・中央寄せされ、ブレークポイントごとに最大幅が変わる

container-fluid

・常に横幅100%

row

・カラムを横に並べる行
・中に .col-* を配置

col-（数値）（カラム）

・12分割で幅指定
・.col-12 = 全幅、.col-6 = 半分
・ブレークポイント指定でレスポンシブ対応（例：.col-12 col-md-6 col-lg-3）

⸻

よく使う書き方

中央寄せ

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 offset-md-2">中央寄せコンテンツ</div>
  </div>
</div>

サイドバー + メイン

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-3">サイドバー</div>
    <div class="col-12 col-lg-9">メイン</div>
  </div>
</div>

⸻

まとめ

・レスポンシブは ブレークポイント（xs/sm/md/lg/xl/xxl）で切り替え
・基本構造は container → row → col
・container = 枠、row = 行、col = 幅指定