CSSのdisplayプロパティ徹底解説：inline・block・inline-blockの違いと使い分け

CSSのdisplayプロパティは、Webページのレイアウトにおいて最も重要なプロパティの一つです。displayプロパティは、ある要素が周囲の要素とどのような関係で配置されるかを決定します。このCSSプロパティには複数の値が用意されていますが、特によく使われるのがinline（インライン）、block（ブロック）、inline-block（インラインブロック）の3つです。本記事では、これら3つのdisplay値の実装方法と、それぞれの違いについて詳しく解説します。

displayプロパティの基本構文

displayプロパティの値を指定する際の基本構文は以下の通りです。

display: 値;

本記事で扱う3つの値を指定する場合は、次のように記述します。

display: inline;
display: block;
display: inline-block;

inline・block・inline-blockの違い

まずはインライン要素とブロック要素の基本的な挙動を確認した上で、inline-blockがどのように両者の中間的な役割を果たすのかを見ていきましょう。

inline（インライン）

インラインレベル要素は行内に表示されます。つまり、親要素や直前の要素との間に改行や区切りが入らず、テキストの流れの中に自然に組み込まれます。要素は必要な幅だけを占有し、カスタムのwidth（幅）やheight（高さ）プロパティを指定しても、それらは無視されます。

デフォルトでインライン表示される主なHTML要素には、以下のようなものがあります。
<a>、<abbr>、<b>、<br>、<button>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<q>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<time>、<var> など

block（ブロック）

ブロックレベル要素は常に新しい行から表示され、widthプロパティを明示的に指定しない限り、利用可能な幅をすべて占有します。インライン要素とは異なり、カスタムのwidthやheightプロパティを指定すると、それらは正しく反映されます。

デフォルトでブロック表示される主なHTML要素には、以下のようなものがあります。
<address>、<article>、<aside>、<blockquote>、<canvas>、<div>、<dl>、<dt>、<fieldset>、<figure>、<figcaption>、<footer>、<form>、<h1>〜<h6>、<header>、<hr>、<li>、<main>、<nav>、<ol>、<p>、<pre>、<section>、<table>、<tfoot>、<ul>、<video> など

inline-block（インラインブロック）

以上を踏まえると、inline-block要素はインライン要素とブロック要素の両方の長所を兼ね備えていることがわかります。inline-blockは行内に表示されながら、カスタムのwidthやheightプロパティを指定することも可能です。そのため、要素を横並びに配置しつつ、サイズを細かくコントロールしたい場合に最適な値といえます。ナビゲーションメニューやカード型レイアウトなどでも活躍します。

まとめ

本記事では、CSSのdisplayプロパティにおける「inline」「block」「inline-block」の3つの値の実装方法と、それぞれの特徴やメリット・デメリットについて解説しました。ポイントを整理すると、以下の通りです。

• inline： 改行されず行内に配置され、幅・高さの指定は無効
• block： 新しい行から表示され、幅・高さの指定が有効
• inline-block： 行内に配置されつつ、幅・高さの指定も有効

3つの値の違いを理解して使い分けられるようになると、より柔軟で洗練されたレイアウトを実現できるようになります。ぜひ実際のコーディングで試してみてください。