この記事ではWeb制作の実務でよく使われる「CSSで要素を非表示にする方法」について解説します。
Webサイトをレスポンシブ対応するにあたって、表示・非表示を切り替える機会は多く存在します。3つのプロパティの違いを理解して、適切なプロパティを実務で使えるように学習していきましょう。
- CSSで要素を非表示にする方法
display: none;opacity: 0;visibility: hidden;の使い方
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
CSSを非表示にするプロパティ3選
CSSで要素を非表示にできるプロパティは3種類あります。
CSSで要素を非表示にできるプロパティ
- display: none; ・・・表示形式を変えて隠す
- visibility: hidden; ・・・表示・非表示を指定して隠す
- opacity: 0; ・・・透明度を変えて隠す
CSSのdisplay: none;で要素を非表示にする
displayはブロックレベル要素やインライン要素など、要素の表示形式を指定するプロパティです。
displayプロパティを使って要素を消す場合は値に「none」を指定します。
セレクタ {
display: none;
}1行記述するだけで要素を非表示にすることができます。
実際の使用例
<div class="block1">
<p>この要素をdisplay: none;で隠します！</p>
</div>表示結果
この要素をdisplay: none;で隠します！
上記のblock1クラスにCSSでdisplay: none;を適用します。
.block1 {
display: none;
}表示結果
要素を非表示にすることができました。逆に要素を表示させる場合はdisplayの値をnone以外にすれば表示されるようになります。block, inline, inline-blockのいずれかにすれば要素が表示されます。
display: none; で要素を非表示にすると、直下の要素や右側の要素が詰まるという特徴があります。挙動を動画で確認してみましょう。
<div class="boxWrap">
<div class="box box1">要素1</div>
<div class="box box2">display:none;で非表示</div>
<div class="box box3">要素3</div>
<button>クリック</button>
</div>.boxWrap {
margin-left: 20px;
margin-top: 20px;
display: flex;
flex-direction: column;
}
.box {
cursor: pointer;
align-items: center;
border: 1px solid #000;
display: inline-block;
margin-bottom: 8px;
padding: 10px;
width: fit-content;
}
.box1 {
background-color: orange;
}
.box2 {
background-color: lightyellow;
}
.box3 {
background-color: lightblue;
}
button {
display: inline-block;
background-color: red;
padding: 20px;
color: #fff;
width: fit-content;
}document.addEventListener('DOMContentLoaded', () => {
document.querySelector('button').addEventListener('click', function() {
document.querySelector(".box2").style.display = "none";
});
});ボタンをクリックすると中央の要素がdisplay: none; で非表示になり、要素3が上に詰まっています。
visibilityプロパティは要素の表示・非表示の適用をすることができます。
基本書式
セレクタ {
visibility: visible;
}上の場合は要素が可視状態（表示状態）となります。要素を非表示にする場合はvisibility: hidden;を適用します。
セレクタ {
visibility: hidden;
}実際の使用例
<div class="block2">
<p>この要素をvisibility:hiddenで隠します！</p>
</div>表示結果
この要素をvisibility: hiddenで隠します！
こちらにCSSでvisibility: hidden;を適用すると要素が非表示になります。
.block2 {
visibility: hidden;
}表示結果
要素を非表示にすることができました。
上記の場合、visibility: visible;を指定すると要素が表示状態になります。
visibility: hidden;で要素を非表示にすると、display:none;と違って要素が詰まらないという特徴があります。また、非表示になった要素はクリックすることができません。
挙動を動画で確認してみましょう。
<div class="boxWrap">
<div class="box box1">要素1</div>
<div class="box box2">visibility:hidden;で非表示</div>
<div class="box box3">要素3</div>
<button>クリック</button>
</div>.boxWrap {
margin-left: 20px;
margin-top: 20px;
display: flex;
flex-direction: column;
}
.box {
cursor: pointer;
align-items: center;
border: 1px solid #000;
display: inline-block;
margin-bottom: 8px;
padding: 10px;
width: fit-content;
}
.box1 {
background-color: orange;
}
.box2 {
background-color: lightyellow;
}
.box3 {
background-color: lightblue;
}
button {
display: inline-block;
background-color: red;
padding: 20px;
color: #fff;
width: fit-content;
}document.addEventListener('DOMContentLoaded', () => {
document.querySelector('button').addEventListener('click', function() {
document.querySelector(".box2").style.visibility = "hidden";
});
});ボタンをクリックすると中央の要素がvisibility: hidden;で非表示になりますが、要素3が上に詰まることはありません。非表示になった要素の上にカーソルを載せてもポインターは表示されません。
CSSのopacity: 0;で要素を非表示にする
opacityは要素の不透明度を設定することができます。
基本書式
セレクタ {
opacity: 0~1;
}opacityの値は0から1（もしくは0%から100%）の間で数字を設定することができます。
opacityの値が小さいほど要素は透明になります。中間の値であれば要素は半透明状態になります。
実際の使用例
<div class="block3">
<p>この要素をopacity:0.1;で薄くします！</p>
</div>
<div class="block4">
<p>この要素をopacity:0.5;で半透明にします！</p>
</div>
<div class="block5">
<p>この要素をopacity:1;で表示させます！</p>
</div>.block3 {
opacity: 0.1;
}
.block4 {
opacity: 0.5;
}
.block5 {
opacity: 1;
}表示結果
opacityの値を0にすれば透明状態になります。
opacity: 0;で要素を非表示にすると、display:none;と違って要素が詰まらないという特徴があります。またvisibility: hidden;と違って、非表示になっても要素をクリックすることができます。
挙動を動画で確認してみましょう。
<div class="boxWrap">
<div class="box box1">要素1</div>
<div class="box box2">opacity:0;で非表示</div>
<div class="box box3">要素3</div>
<button>クリック</button>
</div>.boxWrap {
margin-left: 20px;
margin-top: 20px;
display: flex;
flex-direction: column;
}
.box {
cursor: pointer;
align-items: center;
border: 1px solid #000;
display: inline-block;
margin-bottom: 8px;
padding: 10px;
width: fit-content;
}
.box1 {
background-color: orange;
}
.box2 {
background-color: lightyellow;
}
.box3 {
background-color: lightblue;
}
button {
display: inline-block;
background-color: red;
padding: 20px;
color: #fff;
width: fit-content;
}document.addEventListener('DOMContentLoaded', () => {
document.querySelector('button').addEventListener('click', function() {
document.querySelector(".box2").style.opacity = "0";
});
});ボタンをクリックすると中央の要素がopacity: 0;で非表示になりますが、要素3が上に詰まることはありません。非表示になった要素の上にカーソルを載せると、ポインターが表示されます。
透明人間のようなイメージが近いと思います！
display: none;の場合は非表示になるだけでなく要素自体が「無くなる」ので、その要素の次にある要素が詰まって表示されます。
visibility: hidden;の場合は「非表示になるだけ」、opacity: 0;の場合は「透明になるだけ」です。要素自体が無くなるわけではありません。
CSSで要素を非表示にするプロパティの特徴とまとめ
- display: none; ・・・表示形式を変えて隠す。要素ごと無くなる。
- visibility: hidden; ・・・表示・非表示を指定して隠す。要素は残る。
- opacity: 0; ・・・透明度を変えて隠す。要素は残る。
プロパティ | 要素の有無 | クリックイベント |
| なくなる | クリックできない |
| 存在する | クリックできない |
| 存在する | クリックできる |
どれを使っても非表示になるものの、ソースコード上は存在して検索エンジンに読み込まれる点には注意しておきましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
