displayの使い方

display

プロパティの説明

displayは、要素をブロック要素にするか、インライン要素にするかを決めるプロパティです。全ての要素に指定することができます。

指定できる値

none: 要素を存在しないものとして扱うようにします。
block: 要素をブロック要素として扱うようにします。
inline: 要素をインライン要素として扱うようにします。

サンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 .d1{display:none;}
 .d2{display:block; color:#000000; background:#cccccc;}
 .d3{display:inline; color:#000000; background:#999999;}
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <ul>
  <li>通常の状態。</li>
  <li>通常の状態。</li>
  <li class="d1">要素を存在しないものとして扱います。余白もできません。</li>
  <li>通常の状態。</li>
 </ul>
 <div>
  通常はインライン要素である<span class="d2">spanをブロック要素として</span>扱います。
  通常はブロック要素である<h2 class="d3">h2をインライン要素として</h2>扱います。
 </div>
</body>

</html>