トップページの中の プロパティの中の Dのプロパティ一覧の中の display

display

  • 最終更新:2010年1月15日 02:17

displayプロパティは、要素の表示方法(生成するボックスの種類)を指定します。
これにより、特定の要素を非表示にしたり、インライン要素をブロックボックスにしたりと言った事が可能です。他にも、色々活用範囲が広いプロパティです。

対応ブラウザ
  • IE6一部対応
  • IE7一部対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

inline|block|list-item|run-in|inline-block|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|none|inherit
初期値
inline
適用される要素
全ての要素
継承
しません
パーセント値
N/A
メディア
all

値の解説

block
対象の要素をブロックボックスとして生成します(ブロックレベル要素と似たような感じ)。
inline-block
対象になる要素の内容はブロックボックスとして配置されますが、その要素自身は置換要素に似た感じで配置されます。この値は、CSS2.1で追加されました。
inline
対象の要素を1つまたは複数のインラインボックスとして生成します(インライン要素と似たような感じ)。
list-item
対象の要素はli要素のようにブロックボックスとリスト項目のインラインボックスとして生成します。
none
対象の要素は無かったかのようになりボックスは一切生成されません(レイアウトに影響しない)。この値が指定されている場合、子孫要素に別のdispalyプロパティの値を指定してもボックスは生成されません。
なお、要素を見えない状態(レイアウトには影響する)にするにはvisibilityプロパティの値をhiddenにする事で可能です。
run-in
その要素の前後関係に応じてブロックボックスもしくはインラインボックスを生成します。
なお、IE6, 7は対応していません。
table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption
対象の要素をテーブル関係の要素と同じようにして生成します。
通常、(X)HTML文書において使う事は無く、使うとしたらXMLとかになります。また、これら表要素に関して詳しく調べたい方は「17. 表について」や「テーブル - CSS2リファレンス」などが参考になります。

値がnoneとblockのサンプル

<p class="noneSample">
<img src="/img/item/ponta.jpg" alt="ぬいぐるみ" />
</p>

<p class="blockSample">
<a href="./">プロパティ</a>
</p>
p {
  margin: 20px;
  padding: 15px;
  border: 1px solid #ccc;
}

.noneSample {
  display: none;
}

.blockSample a {
  display: block;
  padding: 5px 10px;
  background: #eef;
  text-decoration: none;
}

.blockSample a:hover {
  background: #fee;
}

値がnoneのサンプルは当然全く見えなくなり、blockのサンプルは、インライン要素であるa要素をブロックボックスにする事で、薄い青背景部分全てがクリックできるようになっています。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

ぬいぐるみ

プロパティ

値がinline-blockのサンプル

<ul class="inline-blockSample">
<li><a href="">長めのテキスト</a></li>
<li><a href="">長めのテキスト</a></li>
<li><a href="">短めのテキスト</a></li>
</ul>
ul.inline-blockSample {
  margin: 20px 100px 30px 50px;
}

ul.inline-blockSample li {
  margin-bottom: 10px;
  background: #ccc;
}

ul.inline-blockSample li a {
  display: inline-block;
  background: #5c9cf2;
  color: #fff;
}

a要素にinline-blockを指定した場合のサンプルで、1行の時は特に変化が無く、2行以上になるとブロックレベル要素のようになるのでクリックエリアが広がります。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

背景色が付いているので分かりやすいかと思いますが、IE6, 7と他のブラウザで複数行になった時の表示が若干違っています。

値がinlineのサンプル

<ul class="inlineSample">
<li><a href="/basic/">CSSの基本</a></li>
<li><a href="/property/">プロパティ</a></li>
<li><a href="/selectors/">セレクタ</a></li>
<li><a href="/bug/">ブラウザバグ</a></li>
<li><a href="/layout/">レイアウト講座</a></li>
</ul>
ul.inlineSample {
  list-style: none;
  margin: 20px;
  padding: 10px;
  background: #e3e8fe;
  text-align: center;
}

ul.inlineSample li {
  display: inline;
  margin: 0 10px;
}

フッターのメニューなんかで使うリストの横並びです。display: inline;を使ったテクニックとしては使用頻度が高いと思われます。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

このページの上部へ