画面幅と設計 — CSS応用（第3回）

PCでは完璧なのに、スマホで崩れる。そして直そうとすると分岐が増えていく。

順番を逆にすると、この2つが同時に減ります。狭い画面を初期状態にして、広い画面に足していく書き方です。

そもそもレスポンシブデザインとは

1つのHTMLで、スマホでもPCでも適切に表示する作り方です。

かつてはPC用サイトとスマホ用サイトを別々に作っていました。しかし端末の画面サイズは無数にあり、作り分けは現実的ではありません。そこで、画面幅に応じてCSSの当たり方を変えるという方法が標準になりました。

今のWebアクセスは半分以上がスマートフォンです。「まずスマホで成立させ、広い画面には余裕を足す」という順番で考えるのが現在の基本になっています。

あわせて出てくるSassは、CSSを書きやすくする拡張です。変数を使ったりファイルを分けたりでき、最終的には普通のCSSに変換されます。

よくある書き方（Before）

.title { font-size: 32px; }
@media (max-width: 768px) { .title { font-size: 24px; } }
@media (max-width: 375px) { .title { font-size: 20px; } }

端末が増えるたびに分岐が増えます。

直した書き方（After）

.title { font-size: clamp(1.25rem, 4vw, 2rem); }

最小1.25rem、最大2rem、その間は画面幅に応じて滑らかに変化します。分岐ゼロです。

なぜそうなるか

モバイルファースト

max-width で「大きい画面から削っていく」より、min-width で「小さい画面に足していく」ほうが記述が減ります。狭い画面は縦一列が基本形なので、そこを初期状態にするのが自然です。

.list { display: grid; gap: 16px; }
@media (min-width: 768px) { .list { grid-template-columns: repeat(3, 1fr); } }

命名で壊れなくする（BEM）

.card {}            /* Block  かたまり */
.card__title {}     /* Element  かたまりの部品 */
.card--featured {}  /* Modifier  状態違い */

クラス名を見ただけで所属が分かるので、他の場所に影響しません。SMACSSなど他の流儀もありますが、チームで1つに統一されていることが本質です。

アニメーション

.card { transition: transform .2s ease-out; }
.card:hover { transform: translateY(-4px); }

動かすプロパティは transform と opacity を優先します。width や top を動かすとレイアウト計算が毎フレーム走り、カクつきます。

Sass

変数・入れ子・ファイル分割ができます。ただし入れ子を深くしすぎると詳細度が上がって前回の問題が再発するので、3階層までを目安に。

手を動かす課題

一覧ページをスマホ幅（375px）で開き、横スクロールが出ないところまで直してください。仕上げに、カードのホバーで浮き上がる動きを transition で付けます。

次回はSEOです。実装者が責任を持つ範囲だけに絞って扱います。

今回の学び

まず、大きい画面から削るより、小さい画面に足すほうが記述が減るということ。狭い画面は縦一列が基本形なので、そこを初期状態にするのが自然でした。

次に、命名の目的は、影響範囲を閉じることだということ。クラス名の流儀はいくつもありますが、どれを選ぶかより、1つに統一されていることのほうが効いていました。

そして、動かすものを選ぶと、カクつきが消えること。幅や位置を動かすと毎フレーム計算が走ります。同じ見た目でも、何を動かすかで滑らかさが変わります。