【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

CSSのdisplayをマスターしよう（block・inline・none・inline-blockの意味と違い）

記事内に商品プロモーションが含まれる場合があります

今回はCSSのdisplayプロパティをマスターしましょう。少し分かりづらい内容ではありますが、Webサイトを作るためには必ず理解しておく必要があります。

1. displayとは？

1-1. CSSのプロパティの1つ

CSSの基本文法はセレクタ・プロパティ・値の3つから書かれるんでしたね。

「display」というのはプロパティの1つで、ざっくりというと要素の表示形式を決めるものです。たとえばp {display: block}や、span {display: inline}のように使われます。

1-2. 取ることのできる値

displayに対する値として、まず次の4つを覚えましょう。

覚えておきたい4つの値

block p、div、ul、h1〜h6などのタグの初期値はコレ
inline a、span、imgなどのタグの初期値はコレ
inline-block
none

displayにはほかにも多くの値があります。ここでは4つの基本例を押さえましょう。pやaなどに最初から設定される表示方法は、通常ブラウザの標準スタイルで決まります。

1-3.それぞれの値のイメージ

displayプロパティにより要素の表示のされ方や高さ・幅の設定が変わってきます。下図にざっくりとそれぞれの値の表示のされ方をまとめました。

まずはイメージで理解しましょう。

block⇒要素が横までいっぱいに広がり、縦に並んでいく
inline⇒要素が平ぺったく横に並んでいく
inline-block⇒blockとinlineの中間
none⇒非表示になる

一般的なのはblockとinline

ここでは基本となるblockとinlineを中心に説明します。実際のレイアウトではflexやgridもよく使います。

1-4. 今から解説すること

これから説明する内容の結論をまとめた図をはじめに紹介しておきます。

CSSのdisplayの考え方

ぱっと見ても何のことだか分からないと思いますが、ひとつひとつ例を出しながら解説していくのでご安心ください。

2. display: blockとは？

div、p、h1〜h6などは、ブラウザの標準スタイルで通常display: blockになります。CSSの表示方法とHTMLの要素の分類は別の話です。

2-1. 要素は縦に並ぶ

ウェブページを大まかにみるとdisplay:blockの要素が上から下へと並ぶことで構成されています。blockの要素の前後には改行が入り、縦に並んでいきます。

試しに、初期値がblockであるpタグを２つ並べてみましょう。分かりやすくするために背景には色をつけることにします。

HTMLコード

<p class="block1">これはブロック1です</p>
<p class="block2">これはブロック2です</p>

CSSコード

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

ブラウザ表示

このように要素の前後には改行が入り、縦に並んでいきます。

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

blockの要素には幅（width）と高さ（height）の指定ができます。つまり初期値がblockのdivタグやpタグは幅・高さが指定できるわけですね。

実際に試してみましょう。pタグの幅・高さをそれぞれ100pxずつ設定してみます。

HTMLコード

<p class="block1">これはブロック</p>

CSSコード

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

ブラウザ表示

指定したwidthとheightがちゃんと反映されていますね。

2-3. 余白も上下左右に指定できる

blockの要素では、余白も自由に決めることができます。言い換えると、上下左右にpadding（要素の内側の余白）とmargin（要素の外側の余白）の値を自由に指定できます。

実際に試してみましょう。pタグにpaddingとmarginをそれぞれ10pxずつ設定してみます。

HTMLコード

<p class="block1">これはブロック</p>

CSSコード

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

ブラウザ表示

きちんと余白が作られているのが分かりますね。

2-4. text-alignで揃うのは中身

text-align: centerはブロック内の文字や画像など、インラインの中身を揃えます。ブロック自身の位置は変わりません。通常のブロックにvertical-align: middleを指定しても、そのブロックを縦方向の中央へ移すことはできません。

実際に見てみるのが早いですね。初期値がblockのpタグを幅80pxにして、それをtext-alignで中央配置しようとしてみます。

HTMLコード

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

CSSコード

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

ブラウザ表示

オレンジのブロック自体は左に残り、中の「ブロック」という文字だけが中央に揃います。ブロック自体を横方向の中央へ置く方法は、次の補足を見てください。

3. display: inlineとは？

spanやaは、ブラウザの標準スタイルで通常display: inlineになります。imgも通常はインラインとして配置されますが、画像は置換要素なので幅と高さを指定できます。

3-1. 主に文章の一部として用いられる

inlineはおもに文中の一部として使われます。たとえば、テキストの装飾やリンクなどの要素に用いられるわけですね。

3-2. 要素の間には改行が入らず横に並ぶ

inlineの要素どうしの間には改行が入らず、横に並んでいきます。テキストと同じように右端までたどり着くと改行されます。

試しに、初期値がinlineであるaタグとspanタグを並べてみましょう。分かりやすくするために背景には色をつけることにします。

HTMLコード

<p>これは<a href="https://saruwakakun.com/">aタグ</a>と<span>spanタグ</span>です。</p>

CSSコード

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

ブラウザ表示

このようにinlineの要素の前後には、改行が入らず横に並んでいきます。

3-3. 基本的にはblockの中で用いられる

inlineの要素は、基本的にはblockの要素の中に入ります。

文字の途中に置くspanなどには、文章の一部を入れるのが基本です。ただし、どのHTML要素を中に置けるかは各タグの内容モデルで決まり、CSSのdisplay値だけでは決まりません。

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

spanなどの通常のインライン要素には、widthとheightを指定しても寸法は変わりません。幅は中の文字に応じて決まります。ただしimgなどの置換要素は例外で、幅と高さを指定できます。

試しに、初期値がinlineであるspanタグの幅と高さを調整しようとしてみます。

HTMLコード

<p>これは<span class="example">spanタグ</span>です。</p>

CSSコード

.example {
  width: 200px; 
  height: 200px; 
  background: skyblue;
}

ブラウザ表示

このようにinlineの要素に対してCSSで幅と高さを指定しても、要素の大きさはピクリとも変わりません。

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

inlineでは左右の余白（padding・margin）は自由に指定することができます。

しかし、上下のmarginを指定することはできません。また、上下のpaddingは指定できるものの、paddingを大きくすると、改行されたときに前後の行とかぶってしまい、デザインが崩れてしまいます。

通常のインライン要素では左右のmarginとpaddingが配置に効きます。上下のmarginを指定しても行の高さは変わりません。上下のpaddingは見た目には反映されますが、行間を広げず、隣の行と重なることがあります。次の見本で確かめましょう。

HTMLコード

<p>これから書くのは<span class="example">margin20pxのspanタグ</span>の例文です。</p>
<p>これから書くのは<span class="example2">padding20pxのspanタグ</span>の例文です。</p>

CSSコード

.example {
  margin: 20px; 
  background: skyblue;
}
.example2 {
  padding: 20px; 
  background: skyblue;
}

ブラウザ表示

左右の余白は反映されます。上下のmarginは行の高さを広げず、上下のpaddingは描画されても周囲の行を押し広げません。行が重なるときは、行間や要素の表示方法を見直しましょう。

3-6. インライン要素の位置を揃える

インライン要素を中央へ揃えるには、その要素を含むブロック側にtext-align: centerを指定します。vertical-alignは文字・画像などのインライン要素や表のセルの縦位置を揃えるための指定で、text-alignの縦方向版ではありません。

divタグの中にあるspanタグに対して、text-alignで中央寄せしたいとき div {text-align: center}と書く

試しに、inlineの要素を中央寄せにしてみましょう。

HTMLコード

<div id="example">
  <span>inline</span>
</div>

CSSコード

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

ブラウザ表示

vertical-alignは、インライン要素ならその要素自身へ指定します。親ブロック全体を縦方向に中央へ置く指定ではありません。

3-7. inline⇔blockはCSSで指定すれば変えられる

たとえば、初期値がblockのpタグをCSSでdisplay: inlineに指定して変えることができます。逆に、初期値がinlineのaタグをdisplay: blockに変えることもできます。

例として、aタグをblockに変えてみましょう

HTMLコード

<p>これは<a href="https://saruwakakun.com/">aタグ</a>の例文です。</p>

CSSコード

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

ブラウザ表示

aタグがblockになりました。これで横幅や高さを自由に指定できるようになるわけですね。

4. display: inline-blockとは？

では、display: inline-blockというのはどんなものでしょうか。これはinlineとblockの間を取ったようなものです。ざっくりと言えば、要素の並び方はinline的で、要素の中身はblock的な性質を持ちます。

4-1. 改行が入らず横に並ぶ

display:inline-block

inline-blockの並びはinlineと同じようになります。改行が入らず、横に並んでいくわけですね。

4-2. 幅・高さの指定ができる

幅と高さの指定

一方で、幅・高さについてはblockと同じように自由に指定することができます。

4-3. 上下左右の余白の指定もできる

ilnine-blockの余白の指定

また、余白についてもblockと同じで、marginとpaddingの値を自由に指定することができます。

4-4. 中の文字と要素の縦位置を揃える

diplay inline-blockの指定

inline-blockは、要素自身にはvertical-alignを指定でき、内部の文字はtext-alignで揃えられます。横並びの項目全体を揃えたいときは親要素のtext-alignを使います。

4-5. 使いどころは？

横に並べながら各項目の幅や余白を調整したいとき、inline-blockを使えます。複雑なナビゲーションや均等配置にはflexやgridも選択肢です。

基本的にモノを横に並べたいときに使える！

基本的には要素を横にずらっと並べたいときに使うと便利です。

たとえば、ソーシャルシェアボタンを横並びに配置するときだったり…

メニューバー（ナビゲーションバー）でボタンを横に並べたいときなどですね。

通常のブロックは縦に並び、通常のインライン要素では幅を指定できません。inline-blockなら横に並べつつ幅を付けられます。この例は表示方法の比較用です。実際のサイトでは項目の折り返しや操作しやすさも確かめましょう。

メニューバーを作ってみよう

実際にinline-blockで横並びのメニューバーらしきものをサクッと作ってみましょう。ここでは初期値がblockであるul・liを使ってみましょう。

HTMLコード

<nav class="sample-nav" aria-label="サンプルメニュー">
  <ul>
    <li><a href="/">HOME</a></li>
    <li><a href="/html-css/basic/html">HTML</a></li>
    <li><a href="/html-css/basic/css">CSS</a></li>
  </ul>
</nav>

CSSコード

.sample-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.sample-nav li {
  display: inline-block;
  margin: 6px 2px;
  vertical-align: middle;
}
.sample-nav a {
  display: block;
  inline-size: 80px;
  padding: 10px 0;
  background: skyblue;
  color: white;
  font-weight: bold;
  text-decoration: none;
}

ブラウザ表示

コードの右側（スマートフォンでは下）に、実際の表示結果を載せています。

ものすごく簡単ですね。このようにinline-blockを使うことで簡単に要素を横に並べることができるのです。

5. noneとは？

最後はdisplay: noneです。この値を指定された要素は、ブラウザ上で非表示になります。これについては実際に例を見てみるのがいちばん分かりやすいですね。

HTMLコード

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

CSSコード

.invisible {
  display: none;
}

ブラウザ表示

このようにCSSでdisplay: noneを指定したものは、画像でも文字でも何でも非表示になります。

非表示と読み込みは別の話

display: noneは要素をレイアウトとアクセシビリティツリーから外します。ただし、非表示にしただけで画像などの通信が必ず省かれるわけではありません。読み込みの有無はリソースの種類や指定方法にもよるため、速度改善の手段として決めつけないようにしましょう。

使いどころは？

画面幅に応じて補助的な要素を表示・非表示にする用途があります。たとえば小さな画面だけで装飾を隠せます。ただし、読者に必要な文章や操作をスマートフォンから消してしまわないようにしましょう。

6. まとめ

ここまでdisplayの4つの値を見てきました。とくに理解しておきたいのはblock、inline、inline-blockですね。改めて以下の画像を見て、それぞれの値を理解しておきましょう。