CSSを使って、要素の表示コントロールは、レスポンシブデザインや、アクセシビリティに不可欠といっても過言ではないように思います。
非表示の方法について、胡散臭いやつから、よく使われるものまで、思いついたものを並べてみました。
display:none;
hello world
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> (11) </li> <li> <a href="https://example.com/wp/2017/10/">2017年10月</a> (9) </li> <li> <a href="https://example.com/wp/2017/09/">2017年9月</a> (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時に表示したコンテンツに、リンクなどが含まれている場合リンクをクリックすることが出来ませんが、これらのプロパティを組み合わせることでクリックできるようになります。
HTML5 hidden 属性
hidden 属性は、「（現在は）関連性がない要素」に使用する属性ですが、見た目は非表示になります。
属性なので、CSSから属性を変更する事は出来ません。
hello world
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);
}