女性向けエンジニアスクール
3秒でわかる
小さい画面向けの指定を土台にして、広い画面の調整を後から足す設計手順。CSSでは既定を狭い幅で書き、min-widthで上書きしていきます。
もう少し詳しく
どういうものか
モバイルファーストは、狭い画面の表示を先に設計し、画面が広くなったときの調整を後から重ねる進め方です。CSS では、メディアクエリの外側に狭い画面向けの指定を書き、min-width の条件で広い画面向けの上書きを足していきます。
逆の進め方はデスクトップファーストと呼び、既定をパソコン向けにして max-width で狭い画面を打ち消します。同じ見た目に到達できますが、書く量と考える順序が変わります。
なぜ必要か
情報の優先順位が決まるからです。狭い画面には全部を並べられないので、まず何を先頭に置くかを決めることになります。この判断を先に済ませておくと、広い画面では余白と段組みを足すだけで済みます。逆順だと、要素を隠す指定と位置を戻す指定が増え続けます。
閲覧の実態も理由の一つです。個人向けサイトでは狭い画面からの閲覧が半数を超えることが珍しくなく、検索エンジンの評価も狭い画面の表示を基準に行われます。
具体例
カードを縦に積む状態を土台にし、広くなったら段組みへ移します。
/* 既定は狭い画面向け */
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 16px;
}
/* 768px 以上で 2 列 */
@media (min-width: 768px) {
.cards { grid-template-columns: repeat(2, 1fr); padding: 24px; }
}
/* 1024px 以上で 3 列 */
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}HTML 側の head に viewport の指定が無いと、この CSS は狭い画面で効きません。
<meta name="viewport" content="width=device-width, initial-scale=1">つまずきやすいところ
min-width と max-width を混ぜて書くと、どちらが後に来るかで結果が変わり、上書きの追跡が難しくなります。片方に統一します。
区切り幅を機種名で決めるのも避けたい点です。特定の端末の画素数に合わせると、次の世代で合わなくなります。中身が崩れる幅を実際にブラウザの幅を変えながら探し、その値を区切りにします。
固定幅の指定も残りやすい問題です。width に px を書いた要素や、横に長い表、大きな画像は、狭い画面で横スクロールを生みます。最大幅を 100 パーセントに抑え、表は横方向にだけスクロールする箱へ入れます。
覚え方
「狭い画面が既定、広い画面が追加」。上書きが増えてきたら順序が逆になっている合図です。
