CSSで要素を消す方法（display: none; と visibility: hidden; の違い）

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;

要素全体をなきものにする。
他の要素が詰まってくる。

<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;

要素を見えなくする。
存在はしてるけど見えない状態。
他の要素は詰めてこない。

<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>

両方指定

両方指定すると。

<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は選んでね。
他の要素とか状況とかもあると思うんで。

見せ方はそれぞれだよね。