目次
displayプロパティとは
displayプロパティは要素の特徴を変更するプロパティです。種類によってwidthやheight、marginやpaddingなどの指定が無効になったり、要素の折り返しに影響がでます。
また、ほとんどの要素は何かしらのdisplayプロパティの値がブラウザの初期値（デフォルト値）としてセットされています。この章では今まで紹介したdisplayプロパティをまとめました。また新しい値としてdisplay: inline-block; を紹介します。
display: none;
指定した要素を非表示にする。noneで指定した要素のすべてのプロパティ（width, height, margin, paddingなど）は無効になります。
display: block;
- 次の要素が折り返す。
- width, heightの指定ができる。
- widthの値は親から継承する。
- margin, paddingの指定ができる。
- magin-left: auto;と margin-right: auto;が使用できる。
- h1〜h6, p, div, ul, ol, dl, dt, dd要素などの初期値
display: inline;
- 次の要素が横に並ぶ
- width, heightの指定ができない。※1
- widthの値は親から継承しない。
- 上下のmarginの指定ができない。（左右は可能）
- 上下のpaddingが指定した位置からずれる。（左右は問題なし）
- 親要素のtext-alignプロパティの影響を受ける。
- vertical-alignプロパティで、行のベースラインの縦方向の位置を変更できる。
- a, img, span要素などの初期値 ※2
※1要素内の内容で幅、高さが決定されます。例外としてimg要素、iframe要素はwidthとheightの指定が可能です。
※2 正確には、inlineが初期値ではなく、displayがデフォルトとして指定されていないが正解です。displayがデフォルトでない要素は、inlineと同じ特徴になります。
display: inline-block;
- display: inline; に display: block; の特徴が加わったもの。
- 次の要素が横に並ぶ
- width, heightの指定ができる。指定がない場合、要素の内容で幅、高さが決定される。
- widthの値は親から継承しない。
- margin, paddingの指定ができる。
- 親要素のtext-alignプロパティの影響を受ける。
- vertical-alignプロパティで、行のベースラインの縦方向の位置を変更できる。
- input, button, textarea要素の初期値
display: list-item;
display: table;
- 次の要素が折り返す。
- width, heightの指定ができる。
- widthの値は、親から継承しない。
- marginの指定ができる。
- paddingの指定ができる。
※table要素では不可。 - magin-left: auto; margin-right: auto; が使用できる。
- table要素の初期値。
display: table-row;
display: table-cell;
- 親がdisplay: table; または display: table-row; の場合にセルを構成する。
- widthの指定ができる。※1
- heightの指定ができる。※2
- widthの値は親から継承する。※3
- marginの指定ができない。
- paddingの指定ができる。
- text-alignプロパティで、セル内の左右の位置の指定ができる。
- vertical-alignプロパティで、セル内の上下の位置の指定ができる。
- th, td要素の初期値。
※1 セルの幅、同列内の最大値に合わせられる。
※1 各行のセルの合計値は、display: table; の幅を超えないようにする。
※2 高さは、行内のセルの高さの最大値に合わせられる。
※3 セルに幅の指定がない場合、display: table;の幅をセルの数で割った数値が適用。
table, table-cellを使ったメニュー
table, table-cellを使うとfloatより柔軟なメニューを作ることができます。下記のようなメリットがあります。
- メニューの分割数に応じて幅が自動調整される
- 幅の指定も可能
- 文字数に応じてメニューの幅が自動調整される
- float解除のような面倒がない
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
ul{
display: table;
width: 800px;
margin-left: auto;
margin-right: auto;
}
li{
display: table-cell;
}
li a{
display: block;
height: 60px;
line-height: 60px;
border-right: 1px solid #fff;
background-color: #333;
text-decoration: none;
text-align: center;
color: #fff;
}
li a:hover{
opacity: 0.8;
}
対比表
| block list-item | inline | inline-block | |
|---|---|---|---|
| 要素の折り返し | ○ | – | – |
| width、height | ○ | – | ○ |
| widthの継承 | ○ | – | – |
| 上下のmargin | ○ | – | ○ |
| 左右のmargin | ○ | ○ | ○ |
| 上下のpadding | ○ | △ | ○ |
| 左右のpadding | ○ | ○ | ○ |
| margin: auto; | ○ | – | – |
table関連のdisplay
| table | table-row | table-cell | |
|---|---|---|---|
| 要素の折り返し | ○ | ○ | – |
| width、height | ○ | △（heigtのみ可能） | ○ |
| widthの継承 | – | ○ | ○ |
| margin | ○ | – | – |
| padding | ○ | – | ○ |
| margin: auto; | ○ | – | – |
入れ子の注意点
親要素がinline、inline-blockの場合、子要素はinlineまたはinline-blockにする必要があります。子要素がblockの場合、親要素をさかのぼり、幅指定がある親要素の幅を継承します。そのため、親要素からはみ出してしまう場合があります。
下記は、親要素 .wrapに幅の指定。子要素の .innerには、display: inline; を指定しました。inner内のp要素の初期値はdisplay: blodk;です。結果、p要素の幅は .wrapの幅を継承します。
<div class="wrap">
<div class="inner">
<p>段落</p>
</div>
</div>
.wrap{
width: 400px;
height: 300px;
background-color: #ddd;
}
.inner{
display: inline;
background-color: #f00;
}
p{
/* ブラウザの初期値は、display: block; */
background-color: #333;
color: #fff;
}
まとめ
- displayプロパティは要素の特徴の変更ができる
- 値によって、widthやheight、marginやpadding、要素の折り返しに影響がでる
- ほとんどの要素は、デフォルトCSSにdisplayの初期値が設定されている
- display: inline;の子要素にはdisplay: inline;またはdisplay: inline-block;を使う