【HTML＋CSS初心者講座06】display プロパティで inline・block・inline-block の違い

1. display とは？

display は CSS のプロパティの1つで、要素の表示形式（並び方・大きさの振る舞い）を決めるものです。p { display: block; } や span { display: inline; } のように使います。

1-1. 覚えておきたい4つの値

タグごとにブラウザが初期値として適用する display の値が決まっています。ただし CSS で自由に変更することもできます。

1-2. それぞれのイメージ

2. display: block

div・p・h1〜h6 などは初期値が block です。

2-1. 要素は縦に並ぶ

block の要素の前後には改行が入り、縦に積み重なっていきます。

<p class="block1">ブロック1</p>
<p class="block2">ブロック2</p>

.block1 { background: orange; }
.block2 { background: skyblue; }

2-2. 幅・高さを指定できる

block の要素には width と height を自由に指定できます。

.block1 {
  background: orange;
  width:  100px;
  height: 100px;
}

2-3. 上下左右の余白を自由に指定できる

padding と margin を上下左右どの方向にも自由に指定できます。

.block1 {
  background: orange;
  padding: 10px;
  margin: 10px;
}

2-4. text-align で要素自体を中央寄せにはできない

text-align: center を block の要素に直接指定すると、要素の中のテキストは中央揃えになりますが、要素自体は中央に移動しません。

.block1 {
  background: orange;
  width: 80px;
  text-align: center;
}

3. display: inline

a・span・img などは初期値が inline です。

3-1. 前後に改行が入らず横に並ぶ

inline の要素どうしの間には改行が入らず、横に並んでいきます。右端まで来ると折り返します。主に文章の一部（テキスト装飾やリンクなど）として使われます。

<p>これは
  <a href="#">aタグ</a>と
  <span>spanタグ</span>
です。</p>

a    { background: skyblue; color: white; }
span { background: orange; }

3-2. inline は基本的に block の中で使う

inline の要素は block 要素の中に入れるのが基本です。逆に inline の中に block を入れることは通常ありません。

3-3. 幅・高さを指定できない

inline の要素は CSS で width や height を指定しても大きさが変わりません。要素の幅と高さは「中身のテキストの長さ・文字サイズ」によって自動的に決まります。

.example {
  /* inlineには効かない */
  width:  200px;
  height: 200px;
  background: skyblue;
}

3-4. 上下の余白を調整できない

inline では左右の padding・margin は自由に指定できますが、上下は制限があります。

.ex1 {
  margin: 20px;
  background: skyblue;
}

.ex2 {
  padding: 20px;
  background: skyblue;
}

3-5. text-align の中央寄せは親要素に指定する

inline 要素を中央寄せにしたいときは、親要素に text-align: center を指定します。

#example {
  /* 親要素に指定する */
  text-align: center;
}
span { background: skyblue; }

3-6. inline ⇔ block は CSS で切り替えられる

CSS で display の値を書き換えることで、初期値を変更できます。

a {
  display: block;
  background: skyblue;
  color: white;
}

4. display: inline-block

inline-block は inline と block のいいとこ取りをしたような値です。
「要素の並び方は inline 的」「要素の中身の設定は block 的」な性質を持ちます。

4-1. inline-block の特徴まとめ

4-2. 使いどころ：要素を横並びにしたいとき

inline-block の最もよくある使い方は、複数の要素を横にきれいに並べたいときです。メニューバーやボタンのグループなどに使われます。

4-3. メニューバーを作ってみよう

実際に inline-block で横並びのメニューを作ってみましょう。

<div id="nav">
  <ul>
    <li>HOME</li>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</div>

#nav ul {
  list-style-type: none; /* ポッチを消す */
  text-align: center;    /* 中央寄せは親要素に */
}
#nav ul li {
  display: inline-block; /* 横に並べる */
  width: 80px;
  padding: 10px 0;
  margin: 10px 0;
  vertical-align: middle;
  background: skyblue;
  font-weight: bold;
  color: white;
}

5. display: none

display: none を指定した要素は、ブラウザ上で非表示になります。

<p>これは残します。</p>
<p class="invisible">
  これを非表示にします。
</p>
<p>これも残します。</p>

.invisible {
  display: none;
}

5-1. あくまでも「非表示」になるだけ

5-2. 使いどころ

display: none はレスポンシブデザインを作るときによく使われます。

/* スマホ（幅600px以下）のときだけ非表示 */
@media (max-width: 600px) {
  .pc-only {
    display: none;
  }
}

6. まとめ：4つの値の比較表