【CSS入門】display:noneとvisibility:hiddenの違いを徹底解説！使い分けのポイント

CSSでは、visibilityプロパティとdisplayプロパティを使って、HTMLドキュメント内の要素を非表示にすることができます。一見すると、どちらのプロパティを使っても見た目は同じように思えるかもしれませんが、実は両者には重要な違いがあります。

display: none と visibility: hidden の基本的な違い

display: none — 要素そのものがドキュメント上にレンダリングされず、領域（スペース）も一切確保されません。要素が最初から存在しなかったかのような挙動になります。
visibility: hidden — 要素はドキュメント上にレンダリングされ、領域もきちんと確保されます。ただし、画面上には表示されないため、「見えないだけで場所は残っている」状態になります。

挙動の比較表

項目	display: none	visibility: hidden
レンダリング	行われない	行われる
領域の確保	なし	あり
再表示時の再描画	発生する	発生しない（高速）
子要素への影響	まとめて非表示	子要素単位で visibility を指定すれば再表示可能

例1：CSS Display none のサンプル

まずは display: none を使った例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CSS Display None</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
    box-sizing: border-box;
}
input[type="button"] {
    border-radius: 10px;
}
.child{
    display: inline-block;
    height: 40px;
    width: 40px;
    color: white;
    border: 4px solid black;
}
.child:nth-of-type(1){
    background-color: #FF8A00;
}
.child:nth-of-type(2){
    background-color: #F44336;
}
.child:nth-of-type(3){
    background-color: #C303C3;
}
.child:nth-of-type(4){
    background-color: #4CAF50;
}
.child:nth-of-type(5){
    background-color: #03A9F4;
}
.child:nth-of-type(6){
    background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display-None</legend>
<div id="container">
<div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
</div><br>
<input type="button" value="Hide Primary Colors" onclick="displayNone()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function displayNone(){
    for(var i=0; i<3; i++)
    primaryColor[i].style.display = 'none';
}
</script>
</body>
</html>

出力結果

このコードを実行すると、次のような結果になります。

「Hide Primary Colors（原色を非表示にする）」ボタンをクリックする前：

【CSS入門】display:noneとvisibility:hiddenの違いを徹底解説！使い分けのポイント

ボタンをクリックした後：

【CSS入門】display:noneとvisibility:hiddenの違いを徹底解説！使い分けのポイント

ご覧のとおり、display: none が適用された要素は完全に消え、後ろの要素が詰めて表示されます。つまり、領域ごと取り除かれるのがポイントです。

例2：CSS Visibility hidden のサンプル

続いて、visibility: hidden を使った例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility hidden</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
    box-sizing: border-box;
}
input[type="button"] {
    border-radius: 10px;
}
.child{
    display: inline-block;
    height: 40px;
    width: 40px;
    color: white;
    border: 4px solid black;
}
.child:nth-of-type(1){
    background-color: #FF8A00;
}
.child:nth-of-type(2){
    background-color: #F44336;
}
.child:nth-of-type(3){
    background-color: #C303C3;
}
.child:nth-of-type(4){
    background-color: #4CAF50;
}
.child:nth-of-type(5){
    background-color: #03A9F4;
}
.child:nth-of-type(6){
    background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-hidden</legend>
<div id="container">
<div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
</div><br>
<input type="button" value="Hide Primary Colors" onclick="visibilityHidden()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function visibilityHidden(){
    for(var i=0; i<3; i++)
    primaryColor[i].style.visibility = 'hidden';
}
</script>
</body>
</html>

出力結果

このコードを実行すると、次のような結果になります。

「Hide Primary Colors（原色を非表示にする）」ボタンをクリックする前：

【CSS入門】display:noneとvisibility:hiddenの違いを徹底解説！使い分けのポイント

ボタンをクリックした後：

【CSS入門】display:noneとvisibility:hiddenの違いを徹底解説！使い分けのポイント

こちらの場合、要素は見えなくなりますが、元の領域はそのまま残り、レイアウトが崩れません。空白部分がそのまま維持されている点に注目してください。

まとめ：どう使い分けるべき？

要素をレイアウトから完全に取り除きたい場合 → display: none
要素は見えなくしたいが、レイアウトは維持したい場合 → visibility: hidden
ホバー時のフェード演出など、再表示を頻繁に行う場合 → 再描画コストが低い visibility: hidden が有利

このように、両者は「領域を確保するかどうか」という点で明確に異なります。用途に応じて適切なプロパティを選択することで、意図したレイアウトとパフォーマンスを実現できます。

CSSのvisibilityプロパティで要素の表示・非表示を制御する方法

CSSのdisplay:none徹底解説！要素を非表示にする方法と実用サンプル

CSSのdisplayプロパティとは？各値の違いと使い方を実例付きで解説
CSSのdisplayプロパティとはすべてのHTML要素には、CSSのdisplayプロパティにあらかじめデフォルト値が設定されています。このプロパティは、その要素がドキュメント内でどのように描画されるかを決定する重要な役割を持っています。注意：デフォルトのdisplayプロパティは上書きすることができますが、これは要素そのものの種類が変わるわけではなく、ドキュメント上での表示の挙動が変化するだけである点に留意してください。 displayプロパティの主な値 displayプロパティにはさまざまな値を指定できますが、特によく使われる代表的な値は以下の4つです。 block（ブロック）
CSSの疑似クラスと疑似要素の違いを徹底解説！コロンの数と使い分けのポイント
CSSには「疑似クラス」と「疑似要素」という、名前がよく似た2つの機能があります。どちらもセレクターを拡張する仕組みですが、役割や書き方が異なります。本記事では、両者の違いをサンプルコード付きでわかりやすく解説します。疑似クラス（Pseudo-Class）とは疑似クラスは、:hover、:active、:last-childのように、セレクターの「状態」や「条件」を表すものです。マウスオーバー時のスタイル変更など、要素が特定の状態にあるときの見た目を制御できます。疑似クラスはコロン1つ（:）で始まります。 CSS疑似クラスの基本構文は以下のとおりです。 :pseudo-class {