HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用59. ボックスの種類の指定のプロパティ(display)

      2019/04/29   hatano

displayプロパティとは

displayプロパティは要素の特徴を変更するプロパティです。種類によってwidthheightmarginpaddingなどの指定が無効になったり、要素の折り返しに影響がでます。
また、ほとんどの要素は何かしらのdisplayプロパティの値がブラウザの初期値(デフォルト値)としてセットされています。この章では今まで紹介したdisplayプロパティをまとめました。また新しい値としてdisplay: inline-block; を紹介します。

display: none;

指定した要素を非表示にする。noneで指定した要素のすべてのプロパティ(width, height, margin, paddingなど)は無効になります。

display: block;

display: inline;

※1要素内の内容で幅、高さが決定されます。例外としてimg要素iframe要素widthheightの指定が可能です。

※2 正確には、inlineが初期値ではなく、displayがデフォルトとして指定されていないが正解です。displayがデフォルトでない要素は、inlineと同じ特徴になります。

display: inline-block;

display: list-item;

display: table;

display: table-row;

display: table-cell;

※1 セルの幅、同列内の最大値に合わせられる。
※1 各行のセルの合計値は、display: table; の幅を超えないようにする。
※2 高さは、行内のセルの高さの最大値に合わせられる。
※3 セルに幅の指定がない場合、display: table;の幅をセルの数で割った数値が適用。

table, table-cellを使ったメニュー

table, table-cellを使うとfloatより柔軟なメニューを作ることができます。下記のようなメリットがあります。

  • メニューの分割数に応じて幅が自動調整される
  • 幅の指定も可能
  • 文字数に応じてメニューの幅が自動調整される
  • float解除のような面倒がない

display:tableを使ったメニュー


<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
inlineinline-block
要素の折り返し--
width、height-
widthの継承--
上下のmargin-
左右のmargin
上下のpadding
左右のpadding
margin: auto;--

table関連のdisplay

 tabletable-rowtable-cell
要素の折り返し-
width、height-
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;を使う