STEP 1
レスポンシブのきほん
スマホ・タブレット・PC——画面の大きさはさまざま。1つのHTMLを、CSSの@media(メディアクエリ)で幅ごとに調整します。
ブレイクポイント
レイアウトを切り替える幅の境目。例: 768px 未満はスマホ用に。
モバイルファースト
スマホ向けを基本に作り、広い画面用を足していく考え方。
@media
@media (max-width:768px){…} で「◯px以下のとき」のCSSを書く。
ハンバーガー
狭い画面ではメニューを三本線アイコンに畳むのが定番。
STEP 2
幅を変えて体感する
スライダーで画面の幅を変えると、下のミニサイトのレイアウトが切り替わります。2つのブレイクポイント(600px / 900px)に注目。
STEP 3
レスポンシブクイズ
画面幅への対応、理解できましたか?全8問です。
PLUS
レスポンシブのコツ
1. まずスマホから
小さい画面で成立させ、広い画面で余白や段組みを足す(モバイルファースト)。
2. 幅は%やremで
固定pxばかりだとはみ出す。可変の単位で「伸び縮み」させる。
3. 画像は max-width:100%
親をはみ出さないように。画面に合わせて縮む。
4. viewportメタタグ
<meta name="viewport"> がないとスマホで縮小表示に。必ず入れる。
レスポンシブの合言葉:
① 1つのHTMLを幅で切り替える(@media)
② スマホファースト
③ 幅は可変単位・画像は max-width:100%
—— どんな画面でも読みやすく。それが今のWebの前提です。