幅によって出すものを入れかえる

01 / 05

並べ方を変えても入らないものがある

文字を小さくして、幅に上限をつけて、それでもスマホには入りきらないものがある。項目が6つ並んだメニューなんかがそうだね。

そういうときはそもそも出さないという手がある。幅ごとに見せる要素そのものを変えるんだ。

02 / 05

display: none; を指定した要素は、画面から消えるだけでなく場所も取らなくなる。まわりの要素は詰めて並ぶよ。

消したいほうに書くだけ。1行で消える。

.pc-menu {  display: none;}

03 / 05

入れかえは2つセットで書く。ふだんはPC向けを出してスマホ向けを消し、@media の中で逆にするんだ。

.sp-menu {  display: none;}@media (max-width: 670px) {  .pc-menu {    display: none;  }  .sp-menu {    display: block;  }}

04 / 05

display: none; で消した中身は、画面を読み上げる機能からも消える。だから大事な情報を消してはいけない。

消していいのは、

この2つくらいだと思っておこう。

05 / 05

ここまで来ると、同じHTMLから幅ごとに違う画面を組み立てていることになる。上級編の総仕上げだよ。

ここから書いてみよう。