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

colmun_main4914

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

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

目次

1.displayプロパティとHTML要素
2.displayプロパティの値
3.display: inline
4.display: block
5.display: none

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="#section000">目次へ</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="#section000">目次</a>
        <ul>
            <li><a href="#section100">1</a></li>
            <li><a href="#section200">2</a></li>
            <li><a href="#section300">3</a></li>
            <li><a href="#section400">4</a></li>
            <li><a href="#section500">5</a></li>
        </ul>
    </li>
</ul>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です