表示を非表示にして枠の領域も非表示にする場合はdisplayプロパティを利用します。詳細は「要素を非表示にする - display プロパティの利用」の記事を参照してください。
要素の領域は確保しつつ、表示内容のみを非表示にしたい場合があります。この記事ではCSSで表示内容のみを非表示にする方法を紹介します。
表示領域を確保しつつ、要素を非表示にするには、CSSのvisibility プロパティを利用します。
visibility:hidden;
visibility:hidden;
以下のHTMLファイルとCSSファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul>
<li>ワード1</li>
<li>ワード2</li>
<li>ワード3</li>
<li class="invisibleFrame">ワード4</li>
<li>ワード5</li>
<li class="invisibleFrame">ワード6</li>
<li>ワード7</li>
<li>ワード8</li>
</ul>
</body>
</html>
.invisibleFrame {
visibility:hidden;
}
.nondisplayFrame {
display:none;
}
ワード4, ワード6のliタグに invisibleFrame クラスを指定して非表示に設定しています。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ワード4, ワード6が非表示になっていることがわかります。
ただし領域は確保されているため非表示になった部分が詰まらずに空欄になっていることも確認できます。
以下のHTMLファイルとCSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="page-visibility-frame.css" />
</head>
<body>
<div class="frame1">
コンテンツ1
</div>
<div class="frame2">
コンテンツ2
</div>
<div class="frame3">
コンテンツ3
</div>
</body>
</html>
.frame1 {
border:2px solid #0094ff;
background-color:#a6daff;
height:3rem;
}
.frame2 {
border: 2px solid #ff6a00;
background-color: #fff2a9;
height: 3rem;
visibility:hidden;
}
.frame3 {
border: 2px solid #4cff00;
background-color: #daffca;
height: 3rem;
}
2番目のdivタグに frame2 クラスを指定して非表示に設定しています。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
2番目の枠が非表示になりますが、領域のエリアは確保された状態で間は詰まらないことが確認できます。
