![SunShine!](https://pxa.xsrv.jp/test103/wp-content/uploads/2020/07/ohisama-icon-001.png)
SunShine!
CSSを使って要素を消す方法はいくつかあれど、使いそうなのは2つ。
「display: none;
」と「visibility: hidden;
」の違いの備忘録。
![コンピューター](https://pxa.xsrv.jp/test103/wp-content/uploads/2020/04/Dual-display-002-300x199.jpg)
CSS
要素を消す方法
なくすか見えなくするかの違い。
どっちがどっちかを比べるよ。
書いとかないと忘れちゃうから。
要素の消し方2選
いずれかの方法で要素を消すよ。
他にも消し方はあるわけだが。
ここではCSSを使うこの2つの方法で。
![ソースコード](https://pxa.xsrv.jp/test103/wp-content/uploads/2017/02/technology-12-300x169.jpg)
display: none;
visibility: hidden;
それぞれの例を。
本番ではclass指定でいいと思う。ここでは直接指定する。
<ul>
<li>ここは普通に表示</li>
<li>これを<code>display: none;</code>で消します</li>
<li>これを<code>visibility: hidden;</code>で消します</li>
<li>ここは何も指定しない(普通に表示)</li>
</ul>
表示
- ここは普通に表示
- これを
display: none;
で消します - これを
visibility: hidden;
で消します - ここは何も指定しない(普通に表示)
display: none;
要素全体をなきものにする。
他の要素が詰まってくる。
CSS指定
<ul>
<li>ここは普通に表示</li>
<li style="display: none;">これを<code>display: none;</code>で消します</li>
<li>これを<code>visibility: hidden;</code>で消します</li>
<li>ここは何も指定しない(普通に表示)</li>
</ul>
表示
- ここは普通に表示
- これを
visibility: hidden;
で消します - ここは何も指定しない(普通に表示)
指定なし
<ul>
<li>ここは普通に表示</li>
<li>これを<code>display: none;</code>で消します</li>
<li>これを<code>visibility: hidden;</code>で消します</li>
<li>ここは何も指定しない(普通に表示)</li>
</ul>
表示
- ここは普通に表示
- これを
display: none;
で消します - これを
visibility: hidden;
で消します - ここは何も指定しない(普通に表示)
visibility: hidden;
要素を見えなくする。
存在はしてるけど見えない状態。
他の要素は詰めてこない。
CSS指定
<ul>
<li>ここは普通に表示</li>
<li>これを<code>display: none;</code>で消します</li>
<li style="visibility: hidden;">これを<code>visibility: hidden;</code>で消します</li>
<li>ここは何も指定しない(普通に表示)</li>
</ul>
表示
- ここは普通に表示
- これを
display: none;
で消します - ここは何も指定しない(普通に表示)
指定なし
<ul>
<li>ここは普通に表示</li>
<li>これを<code>display: none;</code>で消します</li>
<li>これを<code>visibility: hidden;</code>で消します</li>
<li>ここは何も指定しない(普通に表示)</li>
</ul>
表示
- ここは普通に表示
- これを
display: none;
で消します - これを
visibility: hidden;
で消します - ここは何も指定しない(普通に表示)
両方指定
両方指定すると。
CSS指定
<ul>
<li>ここは普通に表示</li>
<li style="display: none;">これを<code>display: none;</code>で消します</li>
<li style="visibility: hidden;">これを<code>visibility: hidden;</code>で消します</li>
<li>ここは何も指定しない(普通に表示)</li>
</ul>
表示
- ここは普通に表示
- ここは何も指定しない(普通に表示)
指定なし
<ul>
<li>ここは普通に表示</li>
<li>これを<code>display: none;</code>で消します</li>
<li>これを<code>visibility: hidden;</code>で消します</li>
<li>ここは何も指定しない(普通に表示)</li>
</ul>
表示
- ここは普通に表示
- これを
display: none;
で消します - これを
visibility: hidden;
で消します - ここは何も指定しない(普通に表示)
どう消すかは適材適所で
![CSS](https://pxa.xsrv.jp/test103/wp-content/uploads/2022/12/code-003-300x169.jpg)
どんなふうに消したいか次第で、使うCSSは選んでね。
他の要素とか状況とかもあると思うんで。
見せ方はそれぞれだよね。
ご意見やご感想などお聞かせください! コメント機能です。