【初心者向け】CSSでdisplay noneの使い方を丁寧解説!

2023.01.31
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つ表示されると思います。

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>
css
@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は変わりません)。

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>
css
@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も併せて紹介したので、両者の違いをしっかり理解しておくことをおすすめします。

是非本記事をきっかけに、ユーザにとって読みやすいサイト設計を進めてください。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5