CSS【 display 】1 ～ 要素の表示形式を指定するdisplayプロパティ
displayプロパティは、ブロックレベルやインラインなど、要素の表示形式を指定する際に使用するプロパティです。
今回は、displayプロパティの概要についてまとめたいと思います。
displayプロパティについては、以下のページもご参照下さい。
CSS【 display 】1 ～ 要素の表示形式を指定するdisplayプロパティ（本ページ）
CSS【 display 】2 ～ list-item
CSS【 display 】3 ～ table
目次
１．displayプロパティとHTML要素
２．displayプロパティの値
３．display: inline
４．display: block
５．display: none
１．displayプロパティとHTML要素
HTML要素のスタイルには、インラインとブロックがあります。
大まかなイメージでは、横に並ぶのがインラインで、縦に並ぶのがブロックです。
インラインやブロックのようなスタイルは、displayプロパティで指定します。
ブラウザによってdisplayプロパティのデフォルト値が決まっていて、ブラウザのデフォルト値がdisplay: inlineの場合はインライン、display: blockの場合はブロック、がデフォルトスタイルとなります。
また、li要素は display: list-item、table要素は display: tableなど、特有のデフォルト値を持つ要素もあります。
displayプロパティのデフォルト値を持っている主なHTML要素は、次の通りです。
| HTML要素 |
displayプロパティのデフォルト値 |
■フレージング・コンテンツに分類される要素
a（中身がフレージング・コンテンツのとき）、span、ruby、sub、sup、strong、em、mark、b、i、small、br、u、s、ins、del、cite、q、abbr、dfn、code、kbd、samp、var、bdo、label
■エンベッディド・コンテンツに分類される要素
置換要素（文法上はインラインで表示はブロックのようになる）
img、area、audio、canvas、embed、iframe、object、video、menuなど
|
display: inline |
■インタラクティブ・コンテンツに分類される要素
input、textarea、select、button
|
display: inline-block |
■ヘディング・コンテンツに分類される要素
h1?h6
■セクショニング・コンテンツに分類される要素
section、article、aside、nav
■フロー・コンテンツで他のカテゴリに含まれない要素
header、footer、div、p、address、pre、figure、hr、blockquote、ul、ol、dl、li、table、form、fieldset
■その他
html、body |
display: block |
| li（リストアイテムでul要素やol要素の子要素） |
display: list-item |
| table（テーブル） |
display: table |
| tr（テーブルの行） |
display: table-row |
| th、td（テーブルのセル） |
display: table-cell |
| thead（tableの横列をグループ化する要素） |
display: table-header-group |
| tbody（tableの横列をグループ化する要素） |
display: table-row-group |
| tfoot（tableの横列をグループ化する要素） |
display: table-footer-group |
| colgroup（tableの縦列をグループ化する要素） |
display: table-column-group |
| col（tableの縦列をグループ化する要素） |
display: table-column |
▲目次へ戻る
２．displayプロパティの値
特定のHTML要素と紐付いているデフォルト値以外のdisplayプロパティ値として、flex、inline-flexがあります。
そちらも合わせて、displayプロパティの値と内容は次の通りです。
| none |
要素を非表示にする
領域もなくなる |
| inline |
デフォルト値
要素はインラインの性質となる
（ブラウザのデフォルトスタイルは各要素ごとに決まっているため、displayプロパティを指定しなかった場合に全てインラインとなるわけではない） |
| block |
要素はブロックレベルの性質となる |
| list-item |
要素はli要素の表示となり、リストマーカーが付けられる |
| inline-block |
要素はインラインプロックの性質となる
幅や高さはあるが、インラインのように横に並ぶ |
| table |
要素はtable要素と同じ性質となる |
| table-cell |
要素はテーブルのセル（td要素）と同じ性質になる |
| table-row |
要素はtr要素と同じ性質になる |
| table-header-group |
要素はthead要素と同じ性質になる |
| table-row-group |
要素はtbody要素と同じ性質になる |
| table-footer-group |
要素はtfoot要素と同じ性質になる |
| table-column-group |
要素はcolgroup要素と同じ性質になる |
| table-column |
要素はcol要素と同じ性質になる |
| table-caption |
要素はcaption要素と同じ性質になる |
| inline-table |
要素はtable要素と同じ性質で、インラインの並び方となる |
| flex |
要素を Flexboxコンテナにする |
| inline-flex |
要素をインラインの性質を持つ Flexboxコンテナにする |
| ruby |
要素はruby要素と同じ性質になる |
| ruby-base |
要素はrb要素と同じ性質になる |
| ruby-text |
要素はrt要素と同じ性質になる |
| ruby-base-container |
要素はrbc要素と同じ性質になる |
| ruby-text-container |
要素はrtc要素と同じ性質になる |
| run-in |
要素はランインボックスとなる
後に続く要素によって、ブロックかインラインかに変化して表示される |
displayプロパティの値は、継承されません。
また、displayプロパティは、全ての要素で使用できます。
▲目次へ戻る
３．display: inline
ブロックレベルの要素をナビゲーションとして横並びに表示させたい場合は、display: inlineを使うと便利です。
ヘッダのメニューや、パンくずリスト等でよく使います。
display:inlineを使用してli要素を横に並べると、次のようなパンくずリスト（Webサイトの階層を表示するナビゲーション）を作ることがができます。
ソースは次の通りです。
（CSS）
ol#sample li::after {
content: ' > ';
margin: 0 .6em;}
ol#sample li:last-child::after {content: ''}
ol#sample li {display: inline;}
（HTML）
<div>
<ul id="sample">
<li><a href="#0">Home</a></li>
<li><a href="#0">Group</a></li>
<li class="current"><em>Current</em></li>
</ul>
</div>
▲目次へ戻る
４．display: block
a要素はインラインなので、通常、テキスト領域のみにリンクができます。
目次へ
このようなa要素に、display:blockを指定してブロックレベルにすると、テキスト以外の領域にも範囲が広がって、ボタンのように使いやすい印象になります。
ソースは次の通りです。
（CSS）
div#sample {margin:0; padding:0;}
div#sample a {
-webkit-box-sizing: border-box;/*box-sizing*/
box-sizing: border-box;
display: block;
text-align:center;
line-height:1;
margin:0;
padding:1em;
width:80px;
background:#CFC;
border-radius:10px}
（HTML）
<div id="sample">
<a href="#section000">目次へ</a>
</div>
▲目次へ戻る
５．display: none
display:noneを指定すると、その要素の領域ごとなくなります。
また使うかもしれないから削除したくないような要素に display:none を指定すると、その要素分のスペースごと非表示となります。
ちなみに、同じく非表示にするvisibility:hiddenという指定がありますが、こちらの場合は、領域はそのまま残ります。
display:none と display:block を切り替えて、通常時はサブメニューを非表示にしておいて、マウスオーバー時にサブメニューを表示するような、プルダウンメニューも作れます。
（以下のサンプルは、:hoverを使ってサブメニューを表示させているため、スマホではサブメニューの表示確認ができません。申し訳ありません。）
ソースは次の通りです。
（CSS）
ul#sample {
position: relative;
z-index: 10;
margin:0;
padding:0}
ul#sample li {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align:center;
line-height:1em;
margin:0 5px 0 0;
padding:0;
width:110px;
background:#CFC;
border-radius:0.5em}
ul#sample li a {display:block; padding:1em}
ul#sample li ul li a {display:block; padding:0.5em 1em}
ul#sample li ul {
display:none;
position: absolute;
top:2.5em;
margin:0;
padding:0}
ul#sample li ul li {
display: block;
border:solid 2px #fdf5a0;
border-top:none;
background:#fff;
border-radius:0}
ul#sample li ul li:last-child {border-radius:0 0 0.5em 0.5em}
ul#sample li:hover > ul {display: block}
（HTML）
<ul id="sample">
<li><a href="#section000">目次</a>
<ul>
<li><a href="#section100">１</a></li>
<li><a href="#section200">２</a></li>
<li><a href="#section300">３</a></li>
<li><a href="#section400">４</a></li>
<li><a href="#section500">５</a></li>
</ul>
</li>
</ul>
▲目次へ戻る
