ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】inline・block・inline-blockの違いとは？使い分け方を初心者向けに解説

【CSS】inline・block・inline-blockの違いとは？使い分け方を初心者向けに解説

2022/02/12

2024/11/13

HTMLの要素の表示形式にはいくつかの種類があります。中でもよく使われるのは以下の3つです。

ブロックレベル要素（block）
インライン要素（inline）
インラインブロック要素(inline-block)

それぞれの表示形式の特徴を理解しておかないとうまくレイアウトが組めなかったり、デザインが崩れてしまったりします。そこで本記事ではinline, block, inline-blockの特徴と使い分け方を事例を交えて詳しく解説しています。

最後までお読みいただけると、Webサイトをコーディングする技術が確実にレベルアップするので、参考にしてみてくださいね。

この記事で身につく内容

displayプロパティの使い方
inline・block・inline-blockの特徴
inline・block・inline-blockの使い分け方

無料で30日間、Web制作が学べる『ZeroPlus Gate』
プログラミングに関する質問をエンジニアへ「し放題」のサービス！

正しいコードの書き方が身につく
50本以上の動画教材でサイト制作を学べる
30日間に4回の学習サポート面談がある
わからないことはSlackでエンジニアに質問し放題

公式サイトを見る

ZeroPlus Gate（ゼロプラスゲート）は怪しい？評判・口コミを運営がエゴサしてみた

HTMLの要素
- displayで要素の表示形式を変更する
- displayの初期値
block、inline、inline-blockの特徴
block,inline,inline-blockの違い
まとめ：三種の表示形式の使い分けはWeb制作に欠かせない知識

HTMLの要素

HTMLの要素とはタグの初めから終わりまでをひとまとまりにしたものです。たとえば以下のようなコードがあるとします。

<p>テキスト</p>

<p>タグで囲まれた「テキスト」という文字列が一つの要素です。

displayで要素の表示形式を変更する

要素の表示形式を変更したい場合は、CSSのdisplayプロパティを使用します。値がblockならブロックレベル要素、inlineならインライン要素、inline-blockならインラインブロック要素へと変更できます。

以下が記述例です。

div {
　　　display: block;
}

通常<div>タグは初期値（何も指定していない状態）ではブロックレベル要素ですが、display: inline-block;と指定すればインラインブロック要素に変更できます。

displayの初期値

HTMLの要素には、displayの初期値が設定されています。<div>タグや<p>タグはブロックレベル要素、<a>タグや<span>タグはインライン要素です。以下の表では、主要なHTMLタグがそれぞれ、どのdisplayに該当するかを示しています。

なおdisplayの初期値がinline-blockであるHTMLタグは存在しません。

60種類の動画で、HTML/CSSを学べる無料のスクール

ZeroPlus Gate詳しいサービス内容を見る

費用は一切かからないサービスです

block、inline、inline-blockの特徴

block、inline、inline-blockはそれぞれ異なる特徴を持つため違いを解説します。

block（ブロックレベル要素）の特徴

ブロックレベル要素とはコンテンツをまとめるための要素であり、以下のような特徴を持ちます。

要素が縦に並ぶ
幅と高さを指定できる
marginとpaddingを使って余白を自由に調整できる

inline（インライン要素）の特徴

インライン要素はブロックレベル要素の内容として用いられる要素で、以下のような特徴を持ちます。

要素が横に並ぶ
幅と高さは指定できない
上下の余白をmarginで調整できない
上下にpaddingは指定できるが、デザイン崩れの原因になるため使用は避ける

inline-block（インラインブロック要素）の特徴

インラインブロック要素は、ブロックレベル要素とインライン要素の中間の要素です。「要素は横並びにしたいけど、横幅や高さ、余白を調整したい」といった場面で使用します。インラインブロック要素の特徴は以下のとおりです。

横に要素が並ぶ
幅と高さを指定できる
marginとpaddingを使って余白を指定できる

block,inline,inline-blockの特徴まとめ

ここまでに解説してきた、3つの要素の特徴を以下の表にまとめます。

	block	inline	inline-block
並び方	縦並び	横並び	横並び
幅・高さの指定	○	×	○
paddingの指定	○	△ ※左右へは指定できるが、上下へ指定するとデザイン崩れの原因になる	○
marginの指定	○	△ ※左右へは指定できるが、上下へは指定できない	○

block,inline,inline-blockの違い

本章ではblock,inline,inline-blockの違いを、実際のコードと図を使ってなるべく分かりやすく解説します。

並び方、改行のされ方の違い

並び方や改行のされ方の違いについて解説します。

次に実際のコードを使って解説します。

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

ブロックレベル要素は縦並び、インライン要素とインラインブロック要素は横並びが基本です。しかし上の例ではインラインブロック要素は、縦に並んでいるように見えるのではないでしょうか？

これは画面の端に到達したときの、インライン要素とインラインブロック要素の改行のされ方の違いによるものです。インライン要素はテキストが画面の端に達すると、要素の途中でも改行されます。一方、インラインブロック要素は全体がひとまとまりとして扱われるため、要素の途中ではなく、要素全体が次の行に送られます。

そのため親要素の幅が不足すると、インラインブロック要素が改行されて縦に並んでいるように見えるのです。試しにCodePenの「0.5×」のボタンをクリックしてみましょう。画面幅が広がるとインラインブロック要素が縦並びになるのを確認できます。

60種類の動画で、HTML/CSSを学べる無料のスクール

ZeroPlus Gate詳しいサービス内容を見る

費用は一切かからないサービスです

横幅・高さを指定するときの違い

横幅と高さを指定したときの違いについて解説します。

次に実際のコードで事例を紹介します。3つの要素にwidthとheightを100pxずつ指定してみましょう。

See the Pen display 幅と高さ by ZeroPlus (@zeroplus-programming) on CodePen.

ブロックレベル要素とインラインブロック要素には、指定通りにwidthとheightが反映されますが、インライン要素にはwidthとheightの指定が反映されていません。インライン要素の要素の幅と高さは、その中に含まれるテキストやリンクのサイズに応じて自動的に決まるのです。

余白を指定するときの違い

余白を指定するときの違いについて解説します。

次に実際のコードで解説します。3つの要素に上下左右のmargin（要素の外側の余白）とpadding（要素の内側の余白）を20pxずつ指定してみましょう。

See the Pen display 余白 by ZeroPlus (@zeroplus-programming) on CodePen.

ブロックレベル要素とインラインブロック要素には、上下左右にpaddingもmarginも付いています。

インライン要素の左右にはpaddingとmarginのいずれも付いていますが、上下のmarginは付いていません。paddingは上下に付いていますが、それが原因となり改行された要素が前の行の要素にかぶさって、デザインが崩れてしまっています。このデザイン崩れを防ぐため、インライン要素の上下には、paddingを付けない方が無難なのです。

参考記事【CSS】marginとpaddingの違いを初心者向けに丁寧に解説 | ZeroPlus Media