CSSのdisplayの使い方や特徴を理解しよう

CSSでは、HTML文書内の全ての要素が生成するボックス（四角形の領域）という概念があり、各ボックスには4つの領域があると「ボックスモデル」で学びました。

その章では、4つの領域の大きさを「width・height・padding・border・margin」といった対応するプロパティで指定できることも学びましたね。

次に、4つの領域の表示形式を指定できるdisplayプロパティについて学びます。

displayプロパティとは

リンクをコピーしました

displayプロパティとは「content・padding・border・margin」の4つの領域に対して、「どのように表示するか」を決めることができるプロパティです。

表示形式は、指定するプロパティ値によって異なります。例えば、要素のdisplayプロパティの値をnoneにした場合、ボックスが生成されず全ての領域が非表示になります。

次の例では、hiddenクラスを持つp要素が非表示になります。

1
2
<p>この段落は、「表示」にします。</p>
<p class='hidden'>この段落は、「非表示」にします。</p>

1
2
3
.hidden {
  display: none; /* 要素を非表示にする */
}

上記の表示結果は、以下の通りです。

See the Pen display:none by miyajima yuya (@pikawaka) on CodePen.

代表的なdisplayプロパティの値

リンクをコピーしました

代表的なdisplayの値には、block・inline・inline-blockがあります。

各値の大きな特徴として、要素（ボックス）の並びが挙げられます。

displyプロパティは、ボックスモデルの各領域の表示形式も設定します。そのため、「並び」以外にも「余白」や「幅・高さ」などの動作は、各値によって異なります。

displayのデフォルト値（何も指定しない場合そのまま使われる値）は、WebブラウザによってHTML要素の種類ごとに決められています。

各要素のデフォルト値は、blockかinlineのどちらかの値が設定されます。

block

リンクをコピーしました

要素のdisplayプロパティの値をblockにした場合、次のように動作します。

• 要素（ボックス）は、上から下へと縦に並ぶ･･･(❶)
• 要素（ボックス）の前後に改行が生成される･･･(❷)
• 幅・高さの指定ができる（width・heightプロパティが適用される）･･･(❸)
• 余白が指定できる（padding・marginプロパティが適用される）･･･(❹)

displayのデフォルト値がblockのHTML要素

リンクをコピーしました

displayのデフォルト値は、WebブラウザによってHTML要素の種類ごとに決められていると説明しましたね。

デフォルト値がblockである主な要素は、以下の通りです。

• div要素
• p要素
• h1〜h6要素
• ul要素
• ol要素
• li要素
• form要素

上記の要素は、displayプロパティ値に何も指定しない場合に「block」が設定されます。blockの動作をさせたい場合、デフォルト値がblockの要素にはdisplay: blockの指定が要りません。

次のdiv要素は、CSSでdisplay: blockを指定しなくてもblockの動作をします。

1
2
3
<div></div>
<div></div>
<div></div>

1
2
3
4
5
6
7
8
div {
  background: palegreen;
  border: 3px solid;
  height: 20px; /*高さを指定できる(❸) */
  margin: 20px; /* 要素の外側の余白が指定できる(❹) */
  padding: 10px; /* 要素の外側の内側の余白が指定できる(❹) */
  width: 200px; /* 幅を指定できる(❸) */
}

上記のコードの表示結果は、以下の通りです。

See the Pen display: block by miyajima yuya (@pikawaka) on CodePen.

div要素のように、displayのデフォルト値がblockの要素は❶~❹の動作をします。

• 要素（ボックス）は、上から下へと縦に並ぶ･･･(❶)
• 要素（ボックス）の前後に改行が生成される･･･(❷)
• 幅・高さの指定ができる（width・heightプロパティが適用される）･･･(❸)
• 余白が指定できる（padding・marginプロパティが適用される）･･･(❹)

少しわかりづらいので、ディベロッパーツールで調査すると、次のように幅や高さ、余白も指定したサイズで表示されていますね。

親要素の幅全体に広がる

リンクをコピーしました

要素のdisplayプロパティの値がblockで幅を指定していない場合は、親要素の幅全体に広がります。

次の例では、子要素であるp要素は親要素で指定するwidth: 800px;まで広がります。

1
2
3
<div class='parent'>
  <p class='child'>sample text</p>
</div>

1
2
3
4
5
6
7
8
9
.parent {
  background-color: yellow;
  height: 500px;
  width: 800px;
}

.child {
  background-color: green;
}

上記のコードの表示結果は、以下の通りです。

See the Pen display: block2 by miyajima yuya (@pikawaka) on CodePen.

div要素とp要素のdisplayのデフォルト値がblockです。
p要素の方には幅が指定されていないので、親要素であるdivの幅まで広がります。

inline

リンクをコピーしました

要素のdisplayプロパティの値をinlineにした場合、次のように動作します。

• 要素（ボックス）は、横に並ぶ（空間があれば同じ行になる）･･･(❶)
• 要素（ボックス）の前後に改行が生成されない･･･(❷)
• 幅・高さの指定ができない（width・heightプロパティが適用されない）･･･(❸)
• 余白が一部指定できない（上下のmargin領域のサイズ指定ができない）･･･(❹)

blockの場合は「余白」と「幅・高さ」を指定できましたが、inlineの場合は「margin領域の上下の余白」と「幅・高さ」を指定できないので注意しましょう。

displayのデフォルト値がinlineのHTML要素

リンクをコピーしました

デフォルト値がinlineの主な要素は、以下の通りです。
一般に、文中の一部として使われる要素がinlineに設定されています。

• a要素
• span要素
• img要素
• em要素

上記の要素は、displayプロパティ値に何も指定しない場合「inline」に設定されます。inlineの動作をさせたい場合、デフォルト値がinlineの要素にはdisplay: inlineの指定が要りません。

次のspan要素は、display: inlineを指定しなくてもinlineの動作をします。

1
2
3
<p>displyプロパティは、<span>「並び」</span>以外にも<span>「余白」</span>や<span>「幅・高さ」</span>の指定がプロパティ値ごとに異なります。</p>

<p>p要素のdisplayデフォルト値はblock、span要素のdisplayデフォルト値はinlineです。</p>

1
2
3
span {
  background-color: #fff093;
}

上記のコードの表示結果は、以下の通りです。

See the Pen display: inline by miyajima yuya (@pikawaka) on CodePen.

少しわかりづらいので広い画面で確認すると、次のようにデフォルト値がblockの要素とinlineの要素の並びが違うことがわかりますね。

試しにデフォルト値がinlineのspan要素に対して、幅・高さをそれぞれ500pxに指定してみます。

1
2
3
4
5
span {
  background-color: #fff093;
  height: 500px;
  width: 500px;
}

次の表示結果のようにwidth・heightプロパティが適用されず、幅・高さに変化はありません。

See the Pen display: inline3 by miyajima yuya (@pikawaka) on CodePen.

幅に関しては、content領域（要素の内容）のサイズになります。上記では、span要素の内容（テキスト）が増えれば、その分幅が広がります。

試しにデフォルト値がinlineの最初のspan要素だけにoutsideクラスをつけて、要素の外側の余白を30pxに指定してみます。

1
<p>displyプロパティは、<span class='outside'>「並び」</span>以外にも<span>「余白」</span>や<span>「幅・高さ」</span>の指定がプロパティ値ごとに異なります。</p>

1
2
3
4
5
6
7
span {
  background-color: #fff093;
}

.outside {
  margin: 30px; /* 要素の外側の余白を30pxにする */
}

次の表示結果のように「左右のmargin」は適用されますが、「上下のmargin」は適用されません。

See the Pen display: inline4 by miyajima yuya (@pikawaka) on CodePen.

試しにデフォルト値がinlineの最初のspan要素だけにinsideクラスをつけて、要素の内側の余白を30pxに指定してみます。

1
<p>displyプロパティは、<span class='inside'>「並び」</span>以外にも<span>「余白」</span>や<span>「幅・高さ」</span>の指定がプロパティ値ごとに異なります。</p>

1
2
3
4
5
6
7
span {
  background-color: #fff093;
}

.inside {
  padding: 30px; /* 要素の内側の余白を30pxにする */
}

次の表示結果のようにデザインは崩れますが、4辺全てにpaddingが適用されます。

See the Pen display: inline5 by miyajima yuya (@pikawaka) on CodePen.

デフォルト値がinlineの要素にblockを指定する

リンクをコピーしました

デフォルト値がinlineの要素にdisplay: block;を指定することで、その要素はblockの動作をします。

試しにデフォルト値がinlineの最初のspan要素だけにblockクラスをつけてみます。

1
<p>displyプロパティは、<span class='block'>「並び」</span>以外にも<span>「余白」</span>や<span>「幅・高さ」</span>の指定がプロパティ値ごとに異なります。</p>

1
2
3
4
5
6
7
span {
  background-color: #fff093
}

.block {
  display: block;
}

次の表示結果のようにblockクラスを指定した最初のspan要素は、要素の前後に改行が生成されて縦に並ぶというblockの動作をします。

See the Pen display: inline2 by miyajima yuya (@pikawaka) on CodePen.

inline-block

リンクをコピーしました

要素のdisplayプロパティの値をinline-blockにした場合、次のように動作します。

• 要素（ボックス）は、横に並ぶ（空間があれば同じ行になる）･･･(❶)
• 要素（ボックス）の前後に改行が生成されない･･･(❷)
• 幅・高さの指定ができる（width・heightプロパティが適用される）･･･(❸)
• 余白が指定できる（padding・marginプロパティが適用される）･･･(❹)

inline-blockは、inlineのように改行を生成することなく横に並び、blockのように余白や幅・高さを自由に指定することができます。

inline-blockの用途

リンクをコピーしました

inline-blockは、要素を「横並び」に配置して「幅・高さ」「余白」を自由に指定したいときに使われます。

例えば、Pikawakaサイトのトップページにあるカテゴリのメニューバーが挙げられます。

簡易的なグローバルナビゲーション作成

リンクをコピーしました

簡易的なグローバルナビゲーションを作成して、inline-blockの使い方を確認します。

グローバルナビゲーションとは、全てのページに共通して表示するWebサイト内の案内メニューです。ナビゲーションであることを意味するnav要素で作成します。

1
2
3
4
5
6
7
<nav class='global-nav'>
  <ul>
    <li class='item'>HOME</li>
    <li class='item'>NEWS</li>
    <li class='item'>TOPICS</li>
  </ul>
</nav>

グローバルナビゲーションの中身は「リンクのリスト」になるので、nav要素内には順序なしリストを意味するul要素を配置します。今回は、シンプルな構造になるようにあえてリストを意味するa要素を外します。

横並びにするli要素には、itemクラスを付けます。

1
2
3
4
5
6
7
<nav class='global-nav'>
  <ul>
    <li class='item'>HOME</li>
    <li class='item'>NEWS</li>
    <li class='item'>TOPICS</li>
  </ul>
</nav>

CSSでは.global-nav .itemのように、子孫セレクタで絞り込み指定されているので、global-navクラス内のitemクラスにだけスタイルが適用されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
.global-nav {
  text-align: center; /* 子のul要素に引き継がれて、中の.itemを中央寄せにする */
}

 /* global-navクラス内のitemクラスにだけスタイルを適用 */
.global-nav .item {
  display: inline-block;
  width: 80px; /* 幅 */
  padding: 10px; /* 要素の内側の余白 */
  margin: 10px 0; /* 要素の外側の余白 */
  background: #C7C0F4;
  color: white;
}

displayプロパティ値はinline-blockなので、幅や余白が指定できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
.global-nav {
  text-align: center; /* 子のul要素に引き継がれて、中の.itemを中央寄せにする */
}

 /* global-navクラス内のitemクラスにだけスタイルを適用 */
.global-nav .item {
  display: inline-block;
  width: 80px; /* 幅 */
  padding: 10px; /* 要素の内側の余白 */
  margin: 10px 0; /* 要素の外側の余白 */
  background: #C7C0F4;
  color: white;
}

表示結果は、以下の通りです。
inline-blockは簡単に要素を横に並べて、幅や余白も適用することができますね。

See the Pen inline-blockの用途 by miyajima yuya (@pikawaka) on CodePen.

この章のまとめ

リンクをコピーしました