「display: inline-block」を理解しよう｜基礎から実践的な使い方まで

HTML・CSSを勉強し始めると、まずブロック要素とインライン要素の違いを理解するのに苦戦しますよね。
そしてやっと理解し始めた頃に現れる、「inline-block（インラインブロック）要素」。

混乱しそうになりますが、ブロック要素とインライン要素が分かっていれば難しいことはありません。
Webサイトを構築する上で頻繁に使うことになるので、覚えておきたいプロパティです。

「display: inline-block」とは何か、何ができるのか、実際にどうやって使うのか。
詳しく掘り下げて解説していきます。

インラインブロック要素って？

「インライン要素」と「ブロック要素」の、両方の特徴を併せ持った要素のことです。

インライン要素とブロック要素の特徴はこのようになっています。
そして、それぞれの良い特徴を併せもつインラインブロック要素の特徴は以下です。

インライン要素のように横並びに配置でき、ブロック要素のように幅や高さ・余白の指定ができます。
「幅や高さが変更できるインライン要素」とイメージするとわかりやすいと思います。

CSSの書き方

p {
	display: inline-block;
}

このように書きます。
上記は、<p>タグをインラインブロック要素にする場合の例です。

この記述をすると、インライン要素もブロック要素もすべて「インラインブロック要素」に変わります。
すべてのモダンブラウザでサポートされているので、ベンダープレフィックスは不要です。

インラインブロック要素の特性

要素の幅は中身と同じ大きさになる

インライン要素と同様に、要素の幅は中身に合わせた大きさになります。

<p>あああ</p>

例えばこのようにHTMLを記述してみます。

すると<p>タグはブロック要素なので、要素の幅はブラウザいっぱいに広がります。
※背景が表示されている部分が要素の大きさ。

p {
	display: inline-block;
}

では「display: inline-block;」を指定して、インラインブロック要素に変換すると…

このように、中身の幅に合わせた大きさになります。

要素同士が横に並ぶ

<p>あああ</p>
<p>いいい</p>

例えばこのようにHTMLを記述してみます。

ブロック要素の幅はブラウザいっぱいに広がるので、このように縦並びになりますね。

p {
	display: inline-block;
}

では「display: inline-block;」を指定して、インラインブロック要素に変換すると…

要素の幅は中身に合わせた大きさになり、要素同士は横並びになります。

幅と高さが指定できる

インライン要素ではできない、幅（width）と高さ（height）を指定できます。

p {
	display: inline-block;
	width: 200px;
	height: 80px;
}

このように記述してみます。

幅200px、高さ80pxに大きさが変わりました。
インラインブロック要素にすることで、幅と高さが変更できるようになります。

余白が指定できる

padding・marginで余白の指定もできます。
こちらもインライン要素ではできませんでした。

<p>あああ</p>

p {
	display: inline-block;
	padding: ○○px;
	margin: ○○px;
}

paddingとmarginを指定してみます。

要素の内側の余白、外側の余白が効くようになります。

「text-align」が使える

「text-align」は、左揃え・中央揃え・右揃えが指定できるプロパティです。
「display: inline-block;」を指定した親要素に記述します。

<div>
	<p>あああ</p>
</div>

p {
	display: inline-block;
}

HTML・CSSは共通のものを使用します。

左揃え

div {
	text-align: left;
}

要素が左揃えになりました。

中央揃え

div {
	text-align: center;
}

要素が中央揃えになりました。

右揃え

div {
	text-align: right;
}

要素が右揃えになりました。

「vertical-align」が使える

「vertical-align」は、上揃え・中央揃え・下揃えが指定できるプロパティです。
「display: inline-block;」を指定した親要素に記述します。

<div>
	<p>あああ</p>
</div>

p {
	display: inline-block;
}

HTML・CSSは共通のものを使用します。

上揃え

div {
	vertical-align: top;
}

要素が上揃えになりました。

中央揃え

div {
	vertical-align: middle;
}

要素が上下中央揃えになりました。

下揃え

div {
	vertical-align: bottom;
}

要素が下揃えになりました。

横並びにした要素同士に隙間ができる

「display: inline-block;」で要素を横並びにすると、要素同士に少し隙間が空きます。
バグではなく、inline-blockの仕様です。

隙間をなくすにはいくつか方法があります。

HTMLを改行しない

<p>あああ</p>
<p>いいい</p>
<p>ううう</p>

通常、このようにコンテンツごとにHTMLを改行することが多いと思います。
この改行が、ブラウザ上で隙間ができる原因です。

<p>あああ</p><p>いいい</p><p>ううう</p>

このように改行を削除して、繋げて記述することで隙間がなくなります。

親要素に「font-size: 0;」を指定

<div>
	<p>あああ</p>
	<p>いいい</p>
	<p>ううう</p>
</div>

まず、「display: inline-block;」をかけたい要素を<div>で囲います。

div {
	font-size: 0;
}
p {
	font-size: ○px;
	display: inline-block;
}

親要素である<div>タグに「font-size: 0;」を指定すると隙間がなくなります。
注意点としては、子要素にも適用されて文字が表示されなくなってしまうので、子要素に対して「font-size」を再度指定する必要があります。

「letter-spacing」を指定

<div>
	<p>あああ</p>
	<p>いいい</p>
	<p>ううう</p>
</div>

まず、「display: inline-block;」をかけたい要素を<div>で囲います。

div {
	letter-spacing: -.4em;
}
p {
	display: inline-block;
}

親要素である<div>タグに「letter-spacing: -.4em;」を指定すると隙間がなくなります。

その他の方法

他にも、ネガティブマージン（marginの値をマイナスの値にする）を指定する方法や、閉じタグをなくす方法などが有名ですが、ブラウザによってズレてしまったり、正しいマークアップではなくなってしまうという点から、上に挙げた3つの方法で対応するようにしてください。

実践的な使い方

実際のWebサイトを構築する際に、こんな場面で役立ちます。
「display: inline-block;」の特性を利用すれば色んなシーンで使えます。

ヘッダー

よくあるこんなレイアウトのヘッダー。
floatを使ってコーディングする場合が多いのではないでしょうか。
「display: inline-block;」を使えば、floatを使わずシンプルにコーディングできます。

HTML

<header>
	<a href="#" class="logo">logo</a>
	
	<ul class="nav">
		<li><a href="">PRIVACY</a></li>
		<li><a href="">SITEMAP</a></li>
	</ul>
	
	<ul class="btn">
		<li><a href="">CONTACT</a></li>
		<li><a href="">ENTRY</a></li>
	</ul>
</header>

CSS

header {
	width: 100%;
	text-align: right;
	position: relative;
}
.logo {
	position: absolute;
	top: calc(50% - 25px);
	left: 0;
}
.nav li {
	display: inline-block;
}
.btn li {
	display: inline-block;
}

デモ

解説

このレイアウトは、ロゴ以外すべて右側に寄っています。
子要素すべてに「display: inline-block;」をかけてインラインブロック要素にします。
そして親要素に「text-align: right;」をかけることで、子要素すべてが右寄せになります。

あとは、ロゴだけを「position: absolute;」で左側に配置すれば完成です。
とてもシンプルに記述できますね。

グローバルナビゲーション

オーソドックスなレイアウトのグローバルナビ。
こちらもfloatなしでレイアウトできます。

HTML

<nav>
	<ul>
		<li><a href="">nav01</a></li>
		<li><a href="">nav02</a></li>
		<li><a href="">nav03</a></li>
		<li><a href="">nav04</a></li>
		<li><a href="">nav05</a></li>
	</ul>
</nav>

CSS

nav ul {
	text-align: center;
}
nav ul li {
	display: inline-block;
}

デモ

解説

まず子要素である<li>タグを「display: inline-block;」で横並びにします。
そして親要素の<ul>タグに「text-align: center;」を指定するだけ。
とても簡単ですね。

まとめ

初心者の頃に悩みがちな「display: inline-block;」についてご紹介しました。
CSSでのレイアウトは色んな方法があり、一長一短です。
シーンごとに適した方法があり、「display: inline-block;」を使うべきシーンも多々あります。

Webサイトの構築には欠かせないプロパティなので、是非覚えておきましょう。

※現在では「display: inline-block」と同じレイアウトが可能で、より自由度の高い「display: flex」が主流となっています。
以下の記事で「display: flex」について解説しているのであわせてご覧ください。

flexbox｜flex-directionの意味と具体的な使い方を徹底解説

Flexboxのプロパティであるflex-direction（フレックスディレクション）とは、「要素の配置方向を指定する」プロパティです。プロパティの意味や使い方、実際の記述まで詳しくご紹介します。

www.ameamelog.com

2019.09.12

Flexboxで要素の高さをあえて揃えない方法。align-items:flex-startの使い方

Flexboxで要素の高さを揃えたくない場合に、align-items:flex-start;を使ってバラバラにする方法をご紹介します。

www.ameamelog.com

2019.09.06

【2023年最新】コピペで楽々！Flexboxのベンダープレフィックスまとめ

レイアウトにとても便利なCSS3のFlexbox。IEのサポートが終了した2023年に必要なベンダープレフィックスを、ワンクリックでコピーできるようにまとめましたので、是非ご活用ください。

www.ameamelog.com

2023.03.31

【CSS】Flexboxで実装する、実践的なヘッダーのレイアウト3つ

CSSのFlexboxで実装する、よくあるヘッダーのレイアウトをご紹介します。このやり方で、ご紹介しているパターン以外のレイアウトにも対応できます。

www.ameamelog.com

2019.08.15

【Flexbox実用例】flex-directionを使って画像とテキストを互い違いに配置するテクニック

Flexboxのflex-directionプロパティを使って、画像とテキストの並びを交互に入れ替える方法をご紹介します。

www.ameamelog.com

2019.08.06

プロはこうやって使ってる！制作現場でよく使われるFlexboxの実例5選

プロが実際の制作現場でよく使うレイアウトをまとめています。これだけ覚えておけばサイト構築で必要な、ほとんどのレイアウトができるようになります。

www.ameamelog.com

2019.07.26

Flexboxで高さが揃わない場合の直し方。横並び&中央揃えにする正しい記述

display: flex;を使って要素を横並びかつ上下中央に揃えたい時、要素の高さが揃わない問題の解決方法です。floatやJavascriptを使うことなく解決できます。

www.ameamelog.com

2019.07.25

使い分けできてる？CSSで要素を上下左右中央寄せにする4つの方法

CSSのみで実装できる、要素を上下左右中央に配置する方法をご紹介しています。様々なシーンで活用できると思うので、使い分けながら使用してください。

www.ameamelog.com

2019.07.18