RWDってコンテンツ設計もデザインもコーディングも難しいなと常々思う今日このごろです。

さて今回はそんなRWDでよくある、解像度ごとに表示するコンテンツを切り替えるときに注意したいことについてまたまた古川がお送りします。
小ネタなのでサクっと２分くらいで読み終えることができますよ。

NGコード

See the Pen 解像度ごとに要素の表示・非表示を切り替えるコード（NG） by Y.Kogawa (@Y-Kogawa) on https://codepen.io‘>CodePen.0

このコードはメディアクエリの外でdisplay: noneを適用する非表示用のクラスを用意し、表示したいメディアクエリでそのクラスをdisplay: blockにして表示するという考え方です。
一見出来ているように思いますが、inlineとして扱いたい要素も表示される際にblockになってしまうため、inlineにしたい要素には使えません。
「非表示にしたものを表示する」というアプローチではこういった問題が発生しますので、シンプルに非表示にだけしましょう。

Goodコード

See the Pen 解像度ごとに要素の表示・非表示を切り替えるコード（Good） by Y.Kogawa (@Y-Kogawa) on https://codepen.io‘>CodePen.0

このコードは先程の「非表示にしたものを表示する」というアプローチではなく単純に「非表示にする」というものです。
スタイルシートだけを見るとパソコン向けのメディアクエリの中に.hide-pcとあるため一見するとわかりにくくみえますが、displayのプロパティが変わることなく動作させることが出来ます。

最後に

RWDに限りませんが、一方だけを見て上手くいったという判断は「その場合だけ」ということがよくあります。どういった状況が起こり得るのかをシミュレートして本当にその対応が適切なのか考える時間を作ることが大事です。