In 'n' Out

配置の前に知っておくべき表示形式

CSSで要素を配置しようとすると、幅が効かなかったり、縦に並んだり横に並んだりと、思った通りに動かない場面に出会います。
その挙動を決めているのがdisplayです。
displayは、要素がどのような箱として扱われるかを定義し、配置やサイズ指定の前提になります。

表示形式としての要素の種類

HTMLの要素は、画面上での振る舞い方によっていくつかの表示形式に分けられます。
この表示形式によって、要素が縦に並ぶのか横に並ぶのか、幅や高さを指定できるのかといった挙動が決まります。
CSSで配置やサイズを調整する前に、まずこの違いを整理しておくことが重要です。
タグの紹介時にブロック要素・インライン要素・インラインブロック要素を明記していたのはこのためでもあります。

ブロック要素として扱われる要素

ブロック要素として扱われる要素は、基本的に縦方向に並びます。
ひとつの要素が横幅いっぱいに広がり、次の要素は必ず次の行に配置されます。
幅や高さを指定でき、上下左右すべての余白も見た目に反映されます。

コード例

<h4>h4タグはブロック要素です。</h4>
<p>pタグはブロック要素です。</p>

出力例

CSSは使用していませんが、段落や見出しが自然に縦に積み重なるのは、この振る舞いによるものです。

インライン要素として扱われる要素

インライン要素として扱われる要素は、文章の流れの中に配置されます。
前後の文字と同じ行に並び、必要な分だけの幅を持ちます。
そのため、幅や高さを指定しても見た目には反映されません。
上下方向の余白も、表示上は影響しないという特徴があります。

コード例

<span>spanタグはインライン要素です。</span>
<a href="#">aタグはインライン要素です。</a>

出力例

CSSは使用していませんが、要素が文章の流れの中に配置され、横に並ぶのは、この振る舞いによるものです。

インラインブロック要素として扱われる要素

インラインブロック要素として扱われる要素は、横に並びながらも、幅や高さを指定できます。
文章の流れの中に配置されますが、ひとつひとつが独立した箱として扱われます。
そのため、余白やサイズを調整しながら横並びにしたい場合に適しています。

コード例

<button>buttonタグはインラインブロック要素です。</button>
<button>buttonタグはインラインブロック要素です。</button>

出力例

ボタンやアイコンなどがこの振る舞いになる理由も、ここにあります。

これまでCSSでは主にブロック要素を対象にスタイルを指定してきました。
一方で、インライン要素やインラインブロック要素については、
widthやheightがどのように扱われるかまでは触れていませんでした。
そのため、本当にインライン要素にwidthやheightが効かないのか、インラインブロック要素にwidthやheightが効くのか、実際にCSSが効くか確認してみます。

コード例

<p class="sample-css">ブロック要素は幅と高さが指定できます。</p>
<span class="sample-css">インライン要素には幅と高さを指定してもCSSが効きません。</span>
<button class="sample-css">インラインブロック要素は幅と高さが指定できます。</button>

.sample-css{
    width:200px;
    height:60px;
    background-color:#cfe8ff;
}

出力例

ご覧の通りブロック要素とインラインブロック要素にはwidthとheightが適用されますが、インライン要素にはwidthとheightが適用されません。
また、インライン要素とインラインブロック要素は横並びになる性質を持っているのでこのように表示されます。
しかし、インライン要素やインラインブロック要素を縦に並べたい、インライン要素に幅や高さを持たせたい、ブロック要素を横に並べたいと感じる場面は少なくありません。
このように、同じCSSを指定しても、要素の表示形式によって結果は大きく変わります。
この表示形式を切り替えるために使うのが、displayプロパティです。

displayとは

displayは、要素がどのような表示形式として扱われるかを決めるプロパティです。
要素が縦に並ぶのか横に並ぶのか、幅や高さが指定できるかどうかといった挙動は、すべてdisplayによって決まります。

構文

セレクタ{
    display:値;
}

displayプロパティの値には様々存在しますが、ここではCSSでよく使用する4種類を紹介します。

block

blockを指定すると、要素はブロック要素として扱われます。
要素は縦方向に並び、横幅いっぱいに広がります。

コード例

<p>ここはブロック要素のままですが、<span class="change-block">インライン要素をブロック要素に変更すると</span>縦に並びます。</p>

.change-block{
    display: block;
    width:200px;
    height:60px;
    padding: 20px;
    background-color:#cfe8ff;
}

出力例

このようにブロック要素に変えると、widthやheightによるサイズ指定が可能で、上下左右すべての余白も見た目に反映されます。
レイアウトの土台として使われることが多い表示形式です。

inline

inlineを指定すると、要素はインライン要素として扱われます。
文章の流れの中に配置され、前後の要素と同じ行に並びます。

コード例

<p class="change-inline">インライン要素に変更しました。</p>
<p class="change-inline">インライン要素になったため横に並びます。</p>

.change-inline{
    display: inline;
    width:200px;
    height:60px;
    padding: 20px;
    background-color:#cfe8ff;
}

出力例

このようにブロック要素に変えると、幅や高さを指定しても見た目には反映されず、大きさは内容に依存します。
主に文字と同じ扱いで表示したい場合に使われます。

inline-block

inline-blockを指定すると、要素は横に並びながら、ブロック要素のようにサイズを指定できます。

コード例

<a href="#" class="change-inline-block">リンク1</a>
<a href="#" class="change-inline-block">リンク2</a>
<a href="#" class="change-inline-block">リンク3</a>

.change-inline-block{
    display: inline-block;
    width:200px;
    height:60px;
    padding: 20px;
    background-color:#cfe8ff;
}

出力例

このようにインラインブロック要素に変えると、文章の流れの中に配置されますが、ひとつひとつが独立した箱として扱われます。
widthやheight、余白を調整しながら横並びにしたい場合に適した表示形式です。

none

displayにnoneを指定すると、要素は画面に表示されなくなります。

コード例

<p class="change-none">非表示になります。</p>
<p>非表示になっていますが、上にはコンテンツが存在します。</p>

.change-none{
    display: none;
    width:200px;
    height:60px;
    padding: 20px;
    background-color:#cfe8ff;
}

出力例

この要素はレイアウト上も存在しないものとして扱われ、周囲の配置にも影響しなくなります。

displayの重要性

これまで見てきたように、同じCSSを指定しても、要素の種類によって結果が変わる場面は少なくありません。
これはCSSの指定が間違っているのではなく、要素がどのような表示形式として扱われているかがあらかじめ決まっているためです。

displayは、要素をどう配置するかを直接操作するためのものではなく、要素がどのような箱として振る舞うかを定義するためのプロパティです。
widthやheightが効くかどうか、横に並ぶか縦に並ぶかといった挙動は、すべてこの前提の上で決まっています。

そのため、レイアウトを考える前にdisplayを理解しておくことで、なぜ意図通りに表示されないのかを冷静に判断できるようになります。
次の章では、このdisplayの性質を踏まえた上で、要素を意図通りに配置する方法を見ていきます。