サイトをデザインしていく上で不要な要素を非表示にしたくなることがあると思う。例えば、チェックボックスで要素の状態を切り替えたい時やレスポンシブデザインなどを設定したい時などは要素を非表示する必要が出てくる。

そんな時はCSSで要素を非表示にすることができるが、その方法にはいくつかある。というわけで、今回はCSSで要素を隠す方法とシーンに沿った用途なんかを簡潔にまとめておくことにする。

display: none;で丸ごと非表示にする

「display: none;」は要素を丸ごと非表示にするプロパティになる。これを設定しておくことで指定した要素をまるで無かったことのように非表示にすることができる。

ただし、これを使ったことで場合によっては検索エンジンにサイトの評価を下げられることがあるようなので、正しい使い方で設定する必要がある。なお、display: none;で非表示にした要素は、表示させたい条件下でdisplay: block;などdisplay要素を別のものに書き換える設定をすることで表示させることができる。記述例は以下の通り。

用途

・ボタン系で要素の表示条件を切り替える場合
・レスポンシブ設定でデバイスによって表示条件を切り替える場合

※上記のように特定の条件下で表示・非常時を切り替えることができれば使っても問題ないとされる

注意点

・切り替え設定の無い要素に設定するとSEO的にNGとされる

visibility: hidden;で要素を非表示にする

「visibility: hidden;」は要素のサイズを残したまま非表示にすることのできるプロパティである。これは「display: none;」の代わりに使われることがあるが、「display: none;」を再現するには高さや幅なども消えたようにする設定を合わせる必要がある。

具体的には以下のようなコードを書くことでdisplay: none;を再現できるようになる。ただし、要素によってはそれが持つサイズが残ってしまうことがあり、残った分だけ他の要素の位置に影響するので使いどころに注意が必要。


※大抵は上記の記述で事足りるが、場合によってはbackgraundに関する記述をする必要が出てきたりする

用途

・切り替え設定の無い要素を非表示にする場合（display: none;が使いづらい場合）

注意点

・要素のサイズを100％消せるわけではないので、他の要素の位置に影響することがある

position: absolute;で要素を画面外に飛ばす

「position: absolute;」は画面と特定位置の指定した位置に要素を固定することのできるプロパティ。他の要素と被って表示されるようになるもので、相対位置を設定する「position: relative;」と合わせて使われることが多い。

position: absolute;を使って要素を非表示にするテクニックとして、消したい要素を画面外の左に飛ばしてしまうという方法がある。これは要素を非表示にしているわけではないので、飛ばした要素に含まれる情報を検索ロボットに読み取らせることができたりするが、現在ではSEO的にNGとされているっぽいので使いどころはあまりないかもしれない。

また、画面外の左に設定するのはスクロールを防ぐためだと思われる（あんまり詳しくは知らない）。もし、画面外の右に飛ばしてしまうとスクロールできるようになるので、サイトのデザインが崩れる要因になる。特にモバイル用のレスポンシブデザインで要素を画面右外に設定すると、スマホなんかで見た時に横にズラせるようになるという不具合が発生する。

個人的な意見だが、ハンバーガーメニューをチェックボックスで実装するときなんかにdisplay: none;を使わずにチェックボックスを隠す方法として使えたりするんじゃないかと思っている。記述例は以下の通り。

用途

・display: none;が使いづらい要素を非表示にしたい場合

注意点

・必ずleft: -数値;で設定すること（rightで設定するとスクロール可能になることがある）
・ブログ記事などで利用しないこと（要素をズラしているだけなので、謎の余白が発生する原因になる）