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

応用59. 要素の種類の指定のプロパティ(display)

      2017/07/11

displayプロパティとは

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

display: none;

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

display: block;

display: inline;

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

display: inline-block;

display: list-item;

display: table;

display: table-row;

display: table-cell;

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

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

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

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

display:tableを使ったメニュー

対比表

 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;--

入れ子の注意点

display: inline; を指定した要素の子要素にはdisplay: inline;または display: inline-block;を指定しましょう。子要素が display: block;の場合、親要素をさかのぼり幅指定がある親要素の幅を継承します。
下記は親要素 .wrapに幅の指定。子要素の .innerには、display: inline; を指定しました。inner内のp要素の初期値はdisplay: blodk;です。結果、p要素の幅は .wrapの幅を継承します。

まとめ

  • displayプロパティは要素の種類の変更や指定が行える
  • 種類によってwidthやheight、marginやpadding要素の折り返しなどが影響を受ける
  • ほとんどの要素はブラウザによってdisplayの初期値が設定されている
  • display: inline;の子要素にはdisplay: inline;またはdisplay: inline-block;を使う

 - HTML・CSS