表示を非表示にして枠の領域も非表示にする場合はdisplayプロパティを利用します。詳細は「要素を非表示にする - display プロパティの利用」の記事を参照してください。
visibility:hidden;
visibility:hidden;
<!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;
}
liタグに invisibleFrame クラスを指定して非表示に設定しています。
<!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;
}
divタグに frame2 クラスを指定して非表示に設定しています。
