CSSリファレンス インデックス
スポンサーリンク
CSSリファレンス
LAYOUT配置TOPCSSPropertiesLayout
- display生成するブロック要素の種類
- position要素の配置方法
- floatフロート（浮動）の指定
- clearフロート（浮動）の解除
- visibility要素の表示／非表示
- top上辺からの距離
- right右辺からの距離
- bottom下辺からの距離
- left左辺からの距離
- z-indexスタックレベル（重なり順序）の指定
- overflow表示領域をはみ出したテキストの表示方法
- clip切り抜き表示（クリッピング）
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 |
| 対象要素 | 全要素 |
| 継承 | しない |
| % | 無効 |
| メディア | all |
| W3C Ref. | CSS2.1CSS3 |
プロパティの書式と機能
displayプロパティは、指定した要素にブロックあるいはインライン要素としての機能を与えます。一般的な用途としては、汎用的なグループ化要素である<div>や<span>などに対して用いることが多く、具体的には、ブロックのグループ化要素である<div>をインライン要素にしたり、インラインのグループ化要素である<span>をブロックにしたりするような用途で使われます。
MEMO
ブロック要素とインライン要素の違い
ブロック要素は幅(width)と高さ(height)で構成される領域を持ち、初期状態では幅は横一杯に広がり、高さはコンテンツの量に応じて変化します。表示順序は基本的に上から下へ、縦方向へ並べられます。対してインライン要素は行内要素であるため、行の流れ（通常は横方向）へ並べられていきます。行内要素にはブロックが持つボックス領域という概念が無く、widthやheightを指定することができません。
要素に別の要素の機能を与える
用途が限定された要素にテーブルやリスト要素などがありますが、displayプロパティでtableやlist-itemといった値を指定することにより、<table>や<li>要素と同じ機能を持たせることができます。また、<table>要素は通常はブロック扱いですが、inline-tableを指定することにより、行内に置くことが可能となります。
プロパティの値
display: block
指定した要素をブロックレベル要素として扱います。
display: inline
指定した要素をインラインレベル要素として扱います。
display: inline-block
通常はブロックレベル要素を行内（インライン）に配置することができませんが、inline-blockを指定することにより、行内配置が可能なインラインブロック要素として扱うことが可能です。行内にありながらボックス領域を維持できるため、widthやheightによるサイズの指定も可能です。
display: inline-table
ブロックレベル要素であるテーブルを行内配置可能なインラインブロックとして扱います。
display: list-item
リストアイテム要素である<li>要素と同等の機能を与えます。
display: run-in
run-inを指定した要素は後続要素の種類によって配置方法が切り替わります。後続要素がpositionやfloatが指定されていないブロックであれば、インラインブロックとして後続ブロックの先頭に組み込まれます。それ以外の場合は通常のブロックと同じように扱われます。
display: none
指定した要素を配置しません。ボックス領域は確保されず、要素内のコンテンツも非表示となります。似たような非表示プロパティにvisibility:hiddenがありますが、両者の違いは指定した要素のボックス領域を確保するかしないかです。主にJavascriptを利用した折り畳みメニュー等で使用されることが多いプロパティの値です。
display: table 及び、テーブル関連子要素
指定した値によって、テーブル及びその関連子要素と同等の機能を与えます。例えば、<div>要素にtable-cellを指定することにより、テーブルセル（<th>や<td>）と同様の配置をすることが可能となります。