display
- 最終更新：2010年1月15日 02:17
displayプロパティは、要素の表示方法（生成するボックスの種類）を指定します。
これにより、特定の要素を非表示にしたり、インライン要素をブロックボックスにしたりと言った事が可能です。他にも、色々活用範囲が広いプロパティです。
- 対応ブラウザ
-
プロパティの解説
- 値
- 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;を使ったテクニックとしては使用頻度が高いと思われます。
このサンプルを今見ているブラウザで表示すると以下のようになります。
