【初心者向け】CSSでdisplay noneの使い方を丁寧解説！
「webサイト上で要素の表示、非表示を切り替えたい」
こう思う方も多いのではないでしょうか。
本記事をお読みいただくと以下が分かります。
- CSSでdisplay noneの使い方が分かる
HTMLやCSSに少し慣れてくると、よりユーザにとって見やすいサイト設計を進めていく段階だと思います。是非本記事をお読みいただき理解を深めてください。
CSSのdisplay noneとは
CSSのdisplay noneを使うと、要素を画面から消すことができます。display noneを使うことで、例えば「スマホ画面ではメニューバーは非表示にしたいが、PC画面では表示する」といったデバイスごとに見え方を使い分けることができます。
少し想像していただければわかりますが、webサイトのメニューバーの項目が多くなってきたときにPC画面だと大きい画面なので多少メニューバーの項目が多くなっても気にならないです。一方、スマホ画面だと小さすぎてメニューバーの項目が重なってしまい、肝心のメニューバーの項目が読めない可能性が出てきます。
こういったときのためにdisplay noneは有効です。
display noneとvisibility hiddenとの違い
display noneの書き方に入る前に、よく混同しやすいものとして「visibility hidden」との違いを紹介しておきます。visibility hiddenもその名の通り要素を隠すという役割を持っているので、何が違うのかわかりづらい方が多いと思います。
visibility hiddenは要素を「隠す」ので、作った要素を透明にしている（実際は存在している）一方で、display noneは「none」なので、要素を完全になくしているのと同じです（HTML上に書いていないのと同義です）。
ですので、visibility hiddenを使うと「見えない」だけで実は要素は存在しているので他の要素の位置は変わらないですが、display noneを使うと「存在していない」ので、次の要素で場所が埋められます。
そこまで複雑なサイト設計でなければどちらを使ってもすぐに困ることはないですが、よりサイトコンテンツが増えてきたときに他の要素の位置に影響を与えてしまうので、どちらを使うかはよく考えて設計しましょう。
CSSのdisplay noneの基本の書き方
それでは、display noneの基本の書き方を紹介していきます。
display noneをつける前の準備
まずは、コピーアンドペーストでいいので以下のコードを試してみてください。色が違うBoxが4つ表示されると思います。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>display none description</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="sample1" class="box"></div>
<div id="sample2" class="box">
<h3>Visibility:hiddenのBox</h3>
</div>
<div id="sample3" class="box">
<h3>display:noneのBox</h3>
</div>
<div id="sample4" class="box"></div>
</body>
</html>
@charset "UTF-8";
.box{
width:200px;
height:200px;
margin:15px;
float:left;
padding:20px;
}
#sample1{
background:#7fffd4;
}
#sample2{
/*visibility:hidden;*/
background:#ff7f50;
}
#sample3{
background:#00bfff;
/*display:none;*/
}
#sample4{
background:#6a5acd;
}
コメントアウトにしているので分かりやすいと思いますが、この後sample2のBoxをvisibility:hiddenに、sample3のBoxをdisplay:noneにしていきます。
先ほどの解説通り、sample2のBoxは「要素が隠される」だけなのでsample2のBoxが消えて他の3つのBoxの位置は変わらないはずです。一方でSample3のBoxは「none」なのでなかったことになり、sample3のBoxの位置に次の要素であるsample4のBoxが詰められるはずです。
display noneを試してみよう
上記のCSSコードのコメントアウトを消しただけですが、以下のコードが正しいコードになります（HTMLは変わりません）。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>display none description</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="sample1" class="box"></div>
<div id="sample2" class="box">
<h3>Visibility:hiddenのBox</h3>
</div>
<div id="sample3" class="box">
<h3>display:noneのBox</h3>
</div>
<div id="sample4" class="box"></div>
</body>
</html>
@charset "UTF-8";
.box{
width:200px;
height:200px;
margin:15px;
float:left;
padding:20px;
}
#sample1{
background:#7fffd4;
}
#sample2{
visibility:hidden;
background:#ff7f50;
}
#sample3{
background:#00bfff;
display:none;
}
#sample4{
background:#6a5acd;
}
こちらも、コピーアンドペーストでいいので試してみてください。sample2のvisibility:hiddenのコメントアウトを外した瞬間にsample2のBoxは消えるけれども他の要素の位置は変わらない一方で、sample3のdisplay:noneのコメントアウトを外した瞬間にsample4のBoxがsample3のBoxの位置に移動してくるのがお分かりいただけると思います。
まとめ
いかがでしたでしょうか。
非常にシンプルにdisplay noneの設定ができることがお分かりいただけたと思います。visibility hiddenも併せて紹介したので、両者の違いをしっかり理解しておくことをおすすめします。
是非本記事をきっかけに、ユーザにとって読みやすいサイト設計を進めてください。
