iPentec.com / Doc / CSS

要素を非表示にする - display プロパティの利用 - CSS

CSSで要素を非表示にする場合のコードを紹介します。

概要

CSSを用いて要素を非表示にする場合は、display プロパティを利用します。display プロパティの値を none に設定します。

メモ

要素の領域を確保したまま、内容のみを非表示にする場合は、visibility プロパティを利用します。詳しくは「要素の領域は確保しつつ非表示にする - visibility プロパティの利用」の記事を参照してください。

書式

display:none;

記述例

.disable{
  display:none;
}

例

コード

page-display.html

<!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>
  <div>ワード1</div>
  <div>ワード2</div>
  <div>ワード3</div>
  <div class="nondisplayFrame">ワード4</div>
  <div>ワード5</div>
  <div class="nondisplayFrame">ワード6</div>
  <div>ワード7</div>
  <div>ワード8</div>
</body>
</html>

style.css