【CSS】displayを理解しよう

今回は、displayプロパティについて解説します。

displayの仕様は頭に入れておかないと上手くレイアウトができないので、しっかりと覚えておきましょう。

display: block

displayにblockを指定すると、要素は横幅いっぱいに広がるボックス(ブロック要素)を形成します。

index.htmlを以下のように書き換えてください。

index.html
<!-- 省略 -->
<body>
    <div class="content">
        <p>テキストテキストテキストテキスト</p>
    </div>
    <div class="content">
        <p>テキストテキストテキストテキスト</p>
    </div>
</body>
<!-- 省略 -->

そして、style.cssを以下のように書き換えてください。

style.css
.content {
    background-color: #eee;
}

div要素は、displayの初期値がblockのため、横幅いっぱいに広がります。

次に、横幅を指定してみます。

style.css
.content {
    background-color: #eee;
    width: 200px;
}

ブラウザを確認してみると、要素の右にスペースがあるにも関わらず、下の要素が右側に回り込みません。

このように、display:blockを指定した要素の前後に改行が生成されているのが分かります。

display: inline

display: inlineは、改行を生成しないボックス(インライン要素)を形成します。

テキストの中などで使用する要素に使うことがほとんどです。

index.htmlを以下のように書き換えてください。

index.html
<!-- 省略 -->
<body>
    <div class="content">
        <p><span class="text-red">テキスト</span>テキストテキストテキスト</p>
    </div>
</body>
<!-- 省略 -->

span要素は汎用的な要素で、タグ自体に意味を持ちません。spanは文中で一部のテキストを装飾する時などに使用します。

次に、style.cssを以下のように書き換えてみてください。

style.css
.text-red {
    color: #ff0000;
}

spanで囲まれた部分だけが赤くなりました。

span要素はdisplayの初期値がinlineなので、改行は生成されず、一行に収まります。

では、span要素にdisplay:blockを当てるとどうなるでしょうか。

style.css
.text-red {
    color: #ff0000;
    display: block;
}

改行が生成され、1行に収まらなくなりました。

span以外にもリンクを指定するa要素や、太字にして重要な要素を表すstrong要素など、文中で使うような要素はデフォルトがinlineになっています。

インライン要素に効かないプロパティ

インライン要素には効かないプロパティがいくつかあります。

index.htmlを以下のように書き換えてください。

index.html
<!-- 省略 -->
<body>
    <div class="content">
        <p><span class="background-gray">テキスト</span>テキストテキストテキスト</p>
    </div>
</body>
<!-- 省略 -->

次に、style.cssを以下のように書き換えてください。

style.css
.background-gray {
    background-color: #ddd;
    width: 100px;
    height: 100px;
}

widthとheightを指定しましたが、サイズに変化がありません。display: inlineを指定した要素(デフォルトがdisplay: inlineの要素)には、widthとheightが効きません。

次に、index.htmlを以下のように書き換えてください。

index.html
<!-- 省略 -->
<body>
    <div class="content">
        <p>テキストテキストテキストテキスト</p>
        <p><span class="background-gray">テキスト</span>テキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
    </div>
</body>
<!-- 省略 -->

次に、以下のようにstyle.cssを記述してください。

style.css
.background-gray {
    background-color: #ddd;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 100px;
    margin-bottom: 100px;
}

marginは要素と要素の距離を指定するプロパティです(marginの詳しい解説は別のレッスンで行います)。

ブラウザで表示を確認すると、background-grayクラスの左右に広い余白ができましたが、上下の余白に変化はありません。

このように、インライン要素にmargin-top(上の余白)とmargin-bottom(上の余白)は効きません。

次に、index.htmlを以下のように書き換えてください。

index.html
<!-- 省略 -->
<body>
    <div class="content">
        <p>
            <span class="text-center">テキストテキストテキストテキスト</span>
        </p>
    </div>
</body>
<!-- 省略 -->

そして、style.cssを以下のように書き換えてください。

style.css
.text-center {
    text-align: center;
}

text-align: centerを指定しても、テキストは中央揃えになりません。

index.htmlを以下のように書き換えてみるとどうでしょう。

index.html
<!-- 省略 -->
<body>
    <div class="content">
        <p class="text-center">
            <span>テキストテキストテキストテキスト</span>
        </p>
    </div>
</body>
<!-- 省略 -->

text-centerクラスをspanではなく親要素のp要素につけました。

こうすると、テキストは中央揃えになりました。

text-alignは、インライン要素ではなく親のブロック要素に指定します。

display:inline-block

inline-blockは、inlineとblock両方の特徴を合わせたような挙動をします。

index.htmlを以下のように書き換えてください。

index.html
<!-- 省略 -->
<body>
    <div class="content">
        <p class="text-center">
            テキスト<span class="background-gray">テキスト</span>テキストテキスト
        </p>
    </div>
</body>
<!-- 省略 -->

次に、style.cssを以下のように書き換えてください。

style.css
.background-gray {
    background-color: #ddd;
    display: inline-block;
}

表示を確認すると、inlineと同様に前後に改行は生成されません。

次に、widthとheightを指定してみます。

style.css
.background-gray {
    background-color: #ddd;
    display: inline-block;
    width: 100px;
    height: 60px;
}

inlineの場合はwidthやheightは効きませんが、inline-blockでは反映されています。

ブロックを形成するが、前後に改行が生成されないのがinline-blockです。

style.css
.background-gray {
    background-color: #ddd;
    display: inline-block;
    width: 100px;
    height: 60px;
    text-align: center;
}

widthを指定して要素内の左右に余白があれば、text-align: centerも効きます。

inline-blockは、一行に収めたいけど、サイズの指定をしたい時などに使います。

display: none

noneを指定すると要素が存在しなくなります。

style.cssを以下のように書き換えてください。

style.css
.content {
    display: none;
}

ブラウザを確認するとcontentクラスの要素がまるまる消えてなくなりました。

display:noneは以下のような時に使います。

  • 端末のサイズによって要素を非表示にしたい時
  • 一時的に要素を非表示にしたい時
  • ボタンのクリックなどで要素を表示・非表示を切り替えられるようにしたい時

他にもnoneを使うパターンはありますが、大体が上記のような時に使います。

display:flex

flexを指定すると、自由度の高いレイアウトが可能になります。

ただ、説明が長くなるので別のレッスンで詳しく解説します。

display: contents

noneは子要素ごと非表示になりましたが、contentsを指定した要素は存在しないように振る舞いますが、その子要素は表示されたままになります。

style.cssを以下のように書き換えてください。

style.css
.content {
    background-color: #ddd;
}

ブラウザを確認すると、contentクラス要素に背景色がついています。

次に、style.cssにdisplay:contentsを指定します。

style.css
.content {
    background-color: #ddd;
    display: contents;
}

display: contentsを指定した要素だけが存在しないようになり、その子要素は消えていません。

ただし、継承は行われます。

style.css
.content {
    background-color: #ddd;
    display: contents;
    color: #ff0000;
}

子要素のテキストカラーが赤くなります。

contentsはレスポンシブ対応する時に便利なので、覚えておきましょう。


displayの値は他にもありますが、今回はよく使われるのを紹介しました。