SunShine!
CSSを使って要素を消す方法はいくつかあれど、使いそうなのは2つ。
「display: none;
」と「visibility: hidden;
」の違いの備忘録。
CSS
要素を消す方法
なくすか見えなくするかの違い。
どっちがどっちかを比べるよ。
書いとかないと忘れちゃうから。
要素の消し方2選
いずれかの方法で要素を消すよ。
他にも消し方はあるわけだが。
ここではCSSを使うこの2つの方法で。
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;
要素全体をなきものにする。
他の要素が詰まってくる。
CSS指定
<ul>
<li>ここは普通に表示</li>
<li style="display: none;">これを<code>display: none;</code>で消します</li>
<li>これを<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>
visibility: hidden;
要素を見えなくする。
存在はしてるけど見えない状態。
他の要素は詰めてこない。
CSS指定
<ul>
<li>ここは普通に表示</li>
<li>これを<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>
両方指定
両方指定すると。
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>
どう消すかは適材適所で
どんなふうに消したいか次第で、使うCSSは選んでね。
他の要素とか状況とかもあると思うんで。
見せ方はそれぞれだよね。
ご意見やご感想などお聞かせください! コメント機能です。