CSS 要素を隠す・非表示 display none と visibility hidden

こんにちは。レモンティーです。

今回は、CSSで要素の非表示をやります。
使うのは display : nonevisibility : hidden です。

これらはともに要素を見えなくしてくれますが違いがあります。
display : noneだと
そもそも存在しないかのように扱われますが

visibility : hiddenだと
表示されていた領域はあいかわらず確保されるので
本当にただ見えなくなる、という感じです。

実際にみたほうがピンときやすいかもしれません
↓の三つの四角のうち、真ん中の灰色のものを
両方のやり方で見えなくしてみます。

cubeAcubeBcubeC


display : noneの場合

cubeAcubeBcubeC


visibility : hiddenの場合

cubeAcubeBcubeC


確かにdisplay : noneの場合は無かったようになり
visibility : hiddenの場合は見えなくなっただけのようですね。

中はこうなっています

HTML

display : noneの場合
<span class="cube RED">cubeA</span><span class="cube GRAY dsp">cubeB</span><span class="cube BLUE">cubeC</span>

visibility : hiddenの場合
<span class="cube RED">cubeA</span><span class="cube GRAY vsb">cubeB</span><span class="cube BLUE">cubeC</span>

CSS

.RED{background:red;}
.BLUE{background:blue;}
.GRAY{background:gray;}
.cube{border:solid 2px black; margin:10px; padding:10px; color:white;}
.dsp{display:none;}
.vsb{visibility:hidden;}


肝心の、要素を見えなくしているのはこの部分ですね

.dsp{display:none;}
.vsb{visibility:hidden;}

これで、セレクタで指定した要素を非表示にできます。

今回はこれでおしまいです。

sawalemounity.hatenablog.com

sawalemounity.hatenablog.com

sawalemounity.hatenablog.com