CSSで要素を非表示にする12の方法

CSSを使って、要素の表示コントロールは、レスポンシブデザインや、アクセシビリティに不可欠といっても過言ではないように思います。

非表示の方法について、胡散臭いやつから、よく使われるものまで、思いついたものを並べてみました。

display:none;

html

<p class="display-none">hello world</p>

CSS

.display-none{
 display:none;
}

visibility:hidden

hello world

html

<p class="visibiliry-hidden">hello world</p>

CSS

.visibility-hidden{
 visibility:hidden;
}

visibility:hiddenは、要素を非表示にしますが、その要素が持っている位置や幅、高さなどの構造は維持されます。display:noneと異なり、兄弟要素や子要素でvisibility:visibleを指定してやると、指定した部分を表示することが出来ます。

WordPressのアーカイブウィジェットや、カテゴリーウィジェットには 件数を表示する機能がありますが、例えばhoverした時だけ件数を表示するといった場合に便利です。

Twenty Seventeenのアーカイブのhtml構造は、以下のようになっています

<section id="archives-96" class="widget widget_archive">
	<h2 class="widget-title">アーカイブ</h2>
	<ul>
		<li>
			<a href="https://example.com/wp/2017/11/">2017年11月</a>&nbsp;(11)
		</li>
		<li>
			<a href="https://example.com/wp/2017/10/">2017年10月</a>&nbsp;(9)
		</li>
		<li>
			<a href="https://example.com/wp/2017/09/">2017年9月</a>&nbsp;(4)
		</li>
	</ul>
</section>

以下のhtmlは、visibilityプロパティを使って hoverした時だけ、件数を表示する例です。

アーカイブ

CSS

.widget_archive li{
 visibility:hidden;
}
.widget_archive li a{
 visibility:visible;
}
.widget_archive li:hover{
 visibility:visible;
}

Tips

visibility プロパティと transitionプロパティを組み合わせると、特殊な遅延表示も可能です。
hover時に表示したコンテンツに、リンクなどが含まれている場合リンクをクリックすることが出来ませんが、これらのプロパティを組み合わせることでクリックできるようになります。

マウスホバーやクリック時にサブブロックを表示する CSS Dropdown Menu - CSS note

hoverした後にn秒間表示をし続ける CSS - CSS note

HTML5 hidden 属性

hidden 属性は、「(現在は)関連性がない要素」に使用する属性ですが、見た目は非表示になります。

属性なので、CSSから属性を変更する事は出来ません。

html

<p hidden>hello world</p>

テキストやブロックをを、ブラウザの可視範囲外に移動させることで、非表示に見せかける方法

text-indent:-9999px;

hello world

html

<p class="text-indent">hello world</p>

CSS

.text-indent{
 text-indent:-9999px;
}

position: absolute;top: -9999px; left: -9999px;

hello world

html

<p class="absolute-9999">hello world</p>

CSS

.absolute-9999{
 position: absolute;
 top: -9999px; 
 left: -9999px;
}

要素の重なり順を変更して非表示に見せかける方法

z-index:-1;

hello world

html

<div class="negative-z-index-wrapper">
 <p class="negative-z-index">hello world</p>
</div>

CSS

.negative-z-index-wrapper{
 background:#fff;
 z-index:1;
}
.negative-z-index{
 /* position:static 以外でないと、z-indexは動作しません */
 position:relative;
 z-index:-1;
}

要素の表示範囲を切り取って非表示にする方法

clip:rect(1px,1px,1px,1px);

hello world

html

<div class="clip-wrapper">
 <p class="clip">hello world</p>
</div>

CSS

.clip-wrapper{
 position:relative;
}
.clip{
 position:absolute;
 /* clipは、position:absolute or fixed が必要 */ 
 clip: rect(1px, 1px, 1px, 1px);
 overflow:hidden;
}

clip-path: polygon(1px 1px,1px 1px,1px 1px,1px 1px);

hello world

html

<p class="clip-path">hello world</p>

CSS

.clip-path{
 clip-path: polygon(1px 1px, 1px 1px, 1px 1px ,1px 1px);
}

text-overflow: clip;

hello world

html

<p class="text-overflow">hello world</p>

CSS

.text-overflow{
 text-overflow:clip;
 overflow: hidden;
 white-space: nowrap;
 width:1px;
}

transform:scale(0,0);

hello world

html

<p class="transform-scale-0">hello world</p>

CSS

.transform-scale-0{
 transform: translate(200px, 100px) scale(0,0);
}

テキストの色や不透明度を調整して見えなくする方法

opacity: 0;

hello world

html

<p class="opacity-0">hello world</p>

CSS

.opacity-0{
 opacity:0;
}

color:transparent;

hello world

html

<p class="transparent-color" >hello world</p>

CSS

.transparent-color{
 color:transparent;
}

これ以外にも、colorをrgba(0,0,0,0)なんてするとか、hsla(120,100%,50%,0)とか、いろいろな非表示っぽい指定はできそうですが、、、

HTML

<a href="https://tenman.info/labo/css/files/baloon.jpg" class="conditional"><img src="https://tenman.info/labo/css/files/baloon.jpg" alt="" width="1600" height="1186" class="alignnone size-full wp-image-8224" /></a>

CSS

:root{
 --conditionaly-display:visible;
}
@media screen and ( max-width : 720px ) {
 :root{
 --conditionaly-display:hidden;
 }
}
.conditional{
 visibility:var(--conditionaly-display);
}

新着記事

コメントは受け付けていません。