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

  1. ホーム
  2. HTML・CSS
  3. 応用59. ボックスの種類の指定のプロパティ(display)

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

  1. 公開日:2016年12月23日
  2. 最終更新日:2022年08月10日

HTML・CSS

この記事をシェアする:

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△(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;を使う