CSSの「display」は、要素の表示形式を決める重要なプロパティです。なかでもinline, block, inline-blockは、レイアウトの基本となる値としてよく使われます。
しかしそれぞれの違いは少し複雑です。たとえばinlineとblockの性質を合わせ持つinline-blockの使いどころに悩んだ経験はありませんか？
本記事では、displayの基本であるinline,block,inline-blockの違いを図解とコード付きでわかりやすく解説しつつ、特に混乱しやすいinline-blockの使い方についても整理します。
昔は「inline要素」や「block要素」と呼んでいたのですが、今はその言い方はせず、「表示形式がinline」や「表示形式がblock」と言います！
最後までお読みいただけると、Webサイトをコーディングする技術が確実にレベルアップするので、参考にしてみてくださいね。
- displayプロパティの使い方
- inline・block・inline-blockの特徴
- inline・block・inline-blockの使い分け方
無料で30日間、Web制作が学べる『ZeroPlus Gate』
プログラミングに関する質問をエンジニアへ「し放題」のサービス！
- Web制作に特化したカリキュラム
- 自分のペースで50本以上の動画教材で学べる
- あなた専属のメンターと作る、あなただけの学習ロードマップ
- 30日間、回数無制限でエンジニアに質問可
目次
HTMLの要素
HTMLの要素とはタグの初めから終わりまでをひとまとまりにしたものです。たとえば以下のようなコードがあるとします。
<p>テキスト</p><p>タグで囲まれた「テキスト」という文字列が一つの要素です。Webページは、このような要素がいくつも積み重なってできています。
displayで要素の表示形式を変更する
要素の表示形式を変更したい場合は、CSSのdisplayプロパティを使用します。値がblockなら表示形式をblockへと変更できます。
div {
display: block;
}このようにdisplayを指定することで、要素の並び方やレイアウト上の振る舞いをコントロールできます。
displayの初期値
HTMLの要素には、displayの初期値が設定されています。たとえば<div>タグや<p>タグの表示形式はblock、<a>タグや<span>タグの表示形式はinlineです。以下の表では、主要なHTMLタグがそれぞれどのdisplayに該当するかを示しています。
displayの「初期値」とは、 「CSSでdisplayの値を特に指定していなくても、表示形式がblockのものにはdisplay: block;、inlineのものにはdisplay: inline;が自動で当たるよ」
ということです！
表示形式block,inline,inline-blockの特徴
block,inline,inline-blockは、それぞれ役割が大きく異なる表示形式です。ここでは、3つの表示形式の「性格の違い」を整理します。
blockの特徴
blockは要素が縦方向に並ぶ表示形式です。1つの要素が1行分の幅を使うため、次の要素は必ず下の行に配置されます。
幅や高さを指定でき、marginやpaddingによる余白調整も自由に行えます。そのため、見出し・段落・セクションなど、ページ構成の土台となる要素に使われます。
inlineの特徴
inlineは、要素が横方向に並ぶ表示形式です。テキストと同じ行の流れの中に配置されるため、文章の途中でも自然に表示されます。
ただし幅や高さは指定できず、上下方向のmarginも基本的に使えません。paddingは指定できますが、上下方向に指定するとレイアウトが崩れる原因になるため注意が必要です。
主に、リンクや文字装飾など、テキストの一部を装飾・操作したい場面で使われます。
inline-blockの特徴
inline-blockは、blockとinlineの両方の性質をあわせ持つ表示形式です。要素はinlineと同じく横方向に並びますが、block と同じくwidth（幅）,height（高さ）,margin,padding を指定できます。
inline-blockの使い所
inlineのように自然に横並びにでき、かつblockのようにサイズや余白を細かく制御できるなどの性質を生かし、以下のような場面で使われます。
- メニュー・タグ・バッジなど、同じ役割の要素を横一列に並べたいとき
- 横並びにしたうえで、要素ごとの大きさや余白を揃えたいとき
- テキストと一緒に配置する、シンプルな UI 部品を作りたいとき
inlineではサイズや余白を十分に調整できず、blockは縦に並んでしまいます。「横並び」と「サイズ・余白の制御」を両立したい場合に、inline-blockを選ぶとよいでしょう。
ただしinline-block は、あくまで小さな UI 部品向けの表示形式です。ページ全体のレイアウトや、複雑な配置・中央揃えが必要な場合には、flexやgridのほうが適しています。
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.
blockは縦並び、inlineとinline-blockは横並びが基本です。しかし上の例ではinline-blockは、縦に並んでいるように見えるのではないでしょうか？
要素が画面の端に到達したとき、inlineとinline-blockの改行のされ方は異なります。
inline：テキストが画面の端に達すると、要素の途中でも改行される。
inline-block：要素の途中ではなく、要素全体が次の行に送られる。
そのため親要素の幅が不足すると、inline-blockが改行されて縦に並んでいるように見えます。試しにCodePenの「0.5×」のボタンをクリックしてみましょう。画面幅が広がるとinline-blockは 横並びに表示されます。
枠線（border）がついていると要素の大きさがわかりやすくなりますね！
実際のコードでも要素の大きさを確認するのに便利なのでぜひ試してみてください！
60種類の動画で、HTML/CSSを学べる無料のスクール
費用は一切かからないサービスです
横幅・高さを指定するときの違い
横幅と高さを指定するときの違いについては以下の図をご覧ください。
次に実際のコードで事例を紹介します。3つの要素にwidthとheightを100pxずつ指定してみましょう。
See the Pen display 幅と高さ by ZeroPlus (@zeroplus-programming) on CodePen.
blockとinline-blockには、指定通りにwidthとheightが反映されますが、inlineにはwidthとheightの指定が反映されていません。inlineの幅と高さは、その中に含まれるテキストやリンクのサイズに応じて自動的に決まります。
inlineには幅や高さ（widthやheight）の指定ができません！実際に自分でコードを書いてみるとわかりやすいと思います！
余白を指定するときの違い
marginやpaddingを指定するときの違いについて解説します。
3つの要素に上下左右のmargin（要素の外側の余白）とpadding（要素の内側の余白）を20pxずつ指定してみましょう。
See the Pen display 余白 by ZeroPlus (@zeroplus-programming) on CodePen.
blockとinline-blockには、上下左右にpaddingもmarginも付いています。
inlineの左右にはpaddingとmarginのいずれも付いていますが、上下のmarginは付きません。paddingはinlineの上下に付きますが、改行された要素が前の行の要素にかぶさり、デザインが崩れています。デザイン崩れを防ぐため、inlineの上下には、paddingを付けないのが無難です。
参考記事【CSS】marginとpaddingの違いを初心者向けに丁寧に解説 | ZeroPlus Media
3種の表示形式の使い分けはWeb制作に欠かせない知識
この記事ではblockとinline、そしてinline-blockの違いについて解説しました。それぞれの表示形式によって特徴に違いがあります。簡単におさらいしてみましょう。
block | inline | inline-block | |
並び方 | 縦並びになる | 横並びになる | 横並びになる |
余白 | 上下左右に指定できる | 左右にのみ指定できる | 上下左右に指定できる |
幅・高さ | 幅と高さを指定できる | 要素の幅・高さによって変化する | 幅と高さを指定できる |
これらの表示形式の使い分けは、Webサイトを制作するための基本的な知識で、大変重要なポイントです。正しく理解すれば想定通りにCSSが実装できるようになります。
最初は難しく感じるかもしれませんが、それぞれの違いを意識しながらコーディングしていきましょう。諦めずに練習することがコーディングスキルの向上につながります。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
