CSS【 display 】1～要素の表示形式を指定するdisplayプロパティ

displayプロパティは、ブロックレベルやインラインなど、要素の表示形式を指定する際に使用するプロパティです。
今回は、displayプロパティの概要についてまとめたいと思います。

displayプロパティについては、以下のページもご参照下さい。
CSS【 display 】1～要素の表示形式を指定するdisplayプロパティ（本ページ）
CSS【 display 】2～list-item
CSS【 display 】3～table

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 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

▲目次へ戻る

2. 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プロパティは、全ての要素で使用できます。

▲目次へ戻る

3. 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>

▲目次へ戻る

4. 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="#toc_container">目次へ</a>
</div>

▲目次へ戻る

5. 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="#toc_container">目次</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>

▲目次へ戻る