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

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

      2018/10/25   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を使ったメニュー

対比表

 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の幅を継承します。

まとめ

  • displayプロパティは要素の特徴の変更ができる
  • 値によって、widthやheight、marginやpadding、要素の折り返しに影響がでる
  • ほとんどの要素は、デフォルトCSSにdisplayの初期値が設定されている
  • display: inline;の子要素にはdisplay: inline;またはdisplay: inline-block;を使う

広告

 - HTML・CSS