低価格・高品質・最速のHTMLコーディングはクロノドライブへ

RWD(レスポンシブ・ウェブ・デザイン)で要素の表示・非表示を操作するときのNGコード

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

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

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

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ