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

SunShine!
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;で消します
  • これを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>
表示
  • ここは普通に表示
  • これをdisplay: none;で消します
  • これを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;で消します
  • これをvisibility: hidden;で消します
  • ここは何も指定しない(普通に表示)

指定なし

<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>
表示
  • ここは普通に表示
  • これをdisplay: none;で消します
  • これをvisibility: hidden;で消します
  • ここは何も指定しない(普通に表示)

指定なし

<ul>
	<li>ここは普通に表示</li>
	<li>これを<code>display: none;</code>で消します</li>
	<li>これを<code>visibility: hidden;</code>で消します</li>
	<li>ここは何も指定しない(普通に表示)</li>
</ul>
表示
  • ここは普通に表示
  • これをdisplay: none;で消します
  • これをvisibility: hidden;で消します
  • ここは何も指定しない(普通に表示)

どう消すかは適材適所で

CSS

どんなふうに消したいか次第で、使うCSSは選んでね。
他の要素とか状況とかもあると思うんで。

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

ご意見やご感想などお聞かせください! コメント機能です。

タイトルとURLをコピーしました