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

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

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

display:none;

html

CSS

visibility:hidden

hello world

html

CSS

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

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

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

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

アーカイブ

CSS

Tips

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

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

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

HTML5 hidden 属性

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

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

html


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

text-indent:-9999px;

hello world

html

CSS

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

hello world

html

CSS

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

z-index:-1;

hello world

html

CSS

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

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

hello world

html

CSS

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

hello world

html

CSS

text-overflow: clip;

hello world

html

CSS

transform:scale(0,0);

hello world

html

CSS

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

opacity: 0;

hello world

html

CSS

color:transparent;

hello world

html

CSS

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

HTML

CSS


新着記事

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