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

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

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

1. displayプロパティとHTML要素

HTML要素のスタイルには、インラインとブロックがあります。
大まかなイメージでは、横に並ぶのがインラインで、縦に並ぶのがブロックです。

インラインやブロックのようなスタイルは、displayプロパティで指定します。
ブラウザによってdisplayプロパティのデフォルト値が決まっていて、ブラウザのデフォルト値がdisplay: inlineの場合はインライン、display: blockの場合はブロック、がデフォルトスタイルとなります。

また、li要素は display: list-item、table要素は display: tableなど、特有のデフォルト値を持つ要素もあります。

displayプロパティのデフォルト値を持っている主なHTML要素は、次の通りです。

▲目次へ戻る

2. displayプロパティの値

特定のHTML要素と紐付いているデフォルト値以外のdisplayプロパティ値として、flex、inline-flexがあります。
そちらも合わせて、displayプロパティの値と内容は次の通りです。

　
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>

▲目次へ戻る