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でエンジニアに質問し放題
目次
HTMLの要素
HTMLの要素とはタグの初めから終わりまでをひとまとまりにしたものです。たとえば以下のようなコードがあるとします。
<p>テキスト</p><p>タグで囲まれた「テキスト」という文字列が一つの要素です。
displayで要素の表示形式を変更する
要素の表示形式を変更したい場合は、CSSのdisplayプロパティを使用します。値がblockなら表示形式をブロックへと変更できます。
以下が記述例です。
div {
display: block;
}通常<div>タグは初期値（何も指定していない状態）では表示形式はブロックですが、display: inline-block;と指定すればインラインブロックに変更できます。
displayの初期値
HTMLの要素には、displayの初期値が設定されています。<div>タグや<p>タグの表示形式はブロック、<a>タグや<span>タグの表示形式はインラインです。以下の表では、主要なHTMLタグがそれぞれ、どのdisplayに該当するかを示しています。
なおdisplayの初期値がinline-blockであるHTMLタグは存在しません。
HTMLのタグは表示形式がインラインのものか、ブロックのものしかありません！ また、displayの初期値というのは、 「CSSでdisplayの値を特に指定していなくても、表示形式がブロックのものには というふうに置き換えるとわかりやすいと思います！display: block;、インラインのものにはdisplay: inline;が自動で当たるよ。」
表示形式ブロック・インライン・インラインブロックの特徴
ブラック・インライン・インラインブロックはそれぞれ異なる特徴を持つため違いを解説します。
ブロックの特徴
ブロックは以下のような特徴を持つ表示形式です。
- 要素が縦に並ぶ
- 幅と高さを指定できる
- marginとpaddingを使って余白を自由に調整できる
インラインの特徴
インラインは以下のような特徴を持つ表示形式です。
- 要素が横に並ぶ
- 幅と高さは指定できない
- 上下の余白をmarginで調整できない
- 上下にpaddingは指定できるが、デザイン崩れの原因になるため使用は避ける
インラインブロックの特徴
インラインブロックは、ブロックとインラインの中間の性質を持つ表示形式で「要素は横並びにしたいけど、横幅や高さ、余白を調整したい」といった場面で使用します。インラインブロックの特徴は以下のとおりです。
- 横に要素が並ぶ
- 幅と高さを指定できる
- 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×」のボタンをクリックしてみましょう。画面幅が広がるとインラインブロックが縦並びになるのを確認できます。
枠線（border）がついていると要素の大きさがわかりやすくなりますね！
実際のコードでもそうして要素の大きさを確認するのはとても便利なのでぜひやってみてください！
60種類の動画で、HTML/CSSを学べる無料のスクール
費用は一切かからないサービスです
横幅・高さを指定するときの違い
横幅と高さを指定したときの違いについて解説します。
次に実際のコードで事例を紹介します。3つの要素にwidthとheightを100pxずつ指定してみましょう。
See the Pen display 幅と高さ by ZeroPlus (@zeroplus-programming) on CodePen.
ブロックとインラインブロックには、指定通りにwidthとheightが反映されますが、インラインには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
text-alignを指定したときの配置の違い
text-alignを指定したときの配置のされ方も、表示形式によって違いがあります。text-alignとはテキストや画像の水平方向のそろえかたを指定できるCSSプロパティです。 ここでは中央揃えの指定、text-align: center;を指定してみます。
See the Pen display 要素の配置 by ZeroPlus (@zeroplus-programming) on CodePen.
※こちらも表示結果を「0.5×」にすると分かりやすくなります。
ブロックレベルには、内側にあるテキストのみに中央揃えが反映されます。要素そのものが中央に揃うわけではありません。
一方、インラインやインラインブロックは、要素ごと中央に揃って配置されています。ポイントは中央揃えしたい要素の親要素にtext-align: center;を指定する点です。子要素にtext-alignを指定しても中央揃えは反映されません。
なお、ブロックを中央に配置させるためにはflexboxなどの技術やmargin: 0 auto;など、別の指定方法を使わなければなりません。詳しくは以下の参考記事を併せてご覧ください。
参考記事【初心者でも簡単】CSSで要素を中央寄せする4つの方法を解説 | ZeroPlus Media
まとめ：三種の表示形式の使い分けはWeb制作に欠かせない知識
この記事ではブロックとインライン、そしてインラインブロックの違いについて解説しました。それぞれの表示形式によって特徴に違いがあります。簡単におさらいしてみましょう。
並び方
並び方はブロックが縦並びになるのに対し、インラインとインラインブロックは横並びになります。
幅と高さ
ブロックとインラインブロックはCSSを使って幅と高さを指定できますが、インラインは幅と高さを指定できません。
余白
同じくブロックとインラインブロックはCSSを使って自由に余白を指定できます。しかし、インラインは左右にのみしか余白を作れません。
これらの表示形式の使い分けは、Webサイトを制作するための基本的な知識でありつつも、大変重要なポイントです。正しく理解すれば想定通りにCSSが実装できるようになります。
最初は難しく感じるかもしれませんが、それぞれの違いを意識しながらコーディングしていきましょう。諦めずに練習することがコーディングスキルの向上につながります。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
