【2026年8月最新】CSSのdisplay:blockとは?ブロック要素とインライン要素の違いを完全ガイド
「CSSのdisplay:block;って結局何をしているの?」「ブロック要素とインライン要素の違いが感覚でしか分からない」——コーディングを学び始めた方や、Web制作を外部に発注している経営者・管理職の方から、こうした質問をよくいただきます。
displayプロパティは、CSSの中でも最も基本でありながら、最もつまずきやすい概念のひとつです。HTMLタグを並べただけではレイアウトは思い通りにならず、「なぜか横並びにならない」「なぜか幅いっぱいに広がってしまう」といった現象の多くは、このdisplayプロパティの理解不足が原因です。
この記事では、ブロック要素・インライン要素・インラインブロック要素の違いを基礎から整理したうえで、floatやFlexboxを使った実践的なレイアウト例、そしてよくある間違いまでを技術的に正確に解説します。さらに後半では、非エンジニアの経営者がCSSとどう向き合うべきか、そしてLP制作やWeb改修をAIエージェント(Claude Code)にどこまで任せられるかという、実務目線の独自解説も加えています。
この記事を最後まで読むと、次の内容が明確になります。
01 BLOCK ELEMENT ブロック要素とは何か 幅いっぱいに広がり、前後で改行される「箱」の正体
「ブロック要素」とは、CSSのdisplayプロパティがblockという値になっている要素のことです。ブラウザ上での見た目には、大きく分けて3つの特徴があります。
📚 用語解説
ブロック要素:display:blockが指定された要素の通称。HTML5の仕様上は正式な分類名ではありませんが、慣習的に「ボックスとして独立した行を占有する要素」を指す言葉として広く使われています。<div>や<p>が代表例です。
例えば<div>タグを2つ連続で書くと、何も指定しなくても縦に積み重なって表示されます。これは<div>のブラウザ標準スタイルがdisplay:blockになっているためです。段落を表す<p>タグも同様で、文章を書くたびに自動的に改行されるのは、この性質によるものです。
1-1. 標準でブロック要素になっているHTMLタグ
以下のタグは、ブラウザの標準スタイルシートによって最初からdisplay:blockが指定されています。CSSで明示的に指定しなくても、ブロック要素として振る舞います。
| 分類 | 主なタグ | 主な用途 |
|---|---|---|
| 汎用コンテナ | <div> <section> <article> | レイアウトの骨組み・意味のまとまりを作る |
| 見出し・文章 | <h1>〜<h6> <p> <blockquote> | 見出しや段落を独立した行として表示する |
| リスト(外枠) | <ul> <ol> | 箇条書き・記事一覧などの外枠 |
| サイト構造 | <header> <nav> <main> <footer> | ページ全体のアウトライン(骨格)を作る |
| フォーム・区切り | <form> <fieldset> <hr> | 入力フォームや区切り線 |
なお、リストの各項目である<li>タグは、既定のdisplay値がblockではなくlist-item(後述)です。前後で改行される点はブロック要素と共通していますが、マーカー(・や数字)を自動で付与できる点が異なります。
「このタグはブロック要素?」と迷ったときは、いったん<div>で囲んでしまい、必要に応じて意味の通るタグ(section・articleなど)に置き換えていく進め方でも実務上は問題ありません。大事なのは完璧な暗記ではなく、「改行されて幅いっぱいに広がる箱」というイメージを持てているかどうかです。
1-2. widthとheightがそのまま効くのがブロック要素の強み
ブロック要素の大きな特徴は、width(幅)とheight(高さ)を指定通りに反映できる点です。これから解説する「インライン要素」ではこの2つのプロパティが効かないため、レイアウトを組む際は「ここはサイズを固定したいからブロック要素にする」という判断が頻繁に発生します。
02 INLINE ELEMENT インライン要素・インラインブロック要素との違い 3種類のdisplay値を1つの表で正確に区別する
ブロック要素と対になる概念が「インライン要素」です。display:inlineが指定された要素は、文章の一部のように振る舞い、改行せず横方向に流し込まれます。さらに、両者の中間的な性質を持つdisplay:inline-blockもあわせて理解しておくと、実装の幅が大きく広がります。
📚 用語解説
インライン要素:display:inlineが指定された要素の通称。文章中の単語のように、前後で改行されず横に並んで表示されます。<span>や<a>、<strong>などが代表例です。
📚 用語解説
インラインブロック要素(inline-block):display:inline-blockが指定された要素の通称。「改行せず横に並ぶ」というインラインの性質と、「width・heightや上下のmargin・paddingが効く」というブロックの性質を、両方あわせ持つ表示形式です。
2-1. 3つのdisplay値の違いを一覧で比較する
| 特徴 | block(ブロック) | inline(インライン) | inline-block(インラインブロック) |
|---|---|---|---|
| 前後の改行 | 改行される | 改行されない | 改行されない |
| 幅の既定値 | 親要素いっぱい | 中身の分だけ | 中身の分だけ |
| width / height の指定 | 効く | 効かない | 効く |
| 左右のmargin / padding | 効く | 効く | 効く |
| 上下のmargin / padding | 効く | レイアウトに影響しない | 効く |
| 代表的なタグ | div, p, h1〜h6, ul, li | span, a, strong, em, img(既定はinlineだが「置換要素」のためwidth/heightは例外的に効く) | button |
<span>や<a>のようなインライン要素にwidth:200px; height:50px;と書いても、ブラウザはその指定を無視します。「サイズ指定したのに反映されない」というトラブルの大半は、対象がインライン要素のままになっていることが原因です。サイズを効かせたい場合はdisplay:inline-blockまたはdisplay:blockに変更してください。
2-2. 標準でインライン要素になっている主なタグ
<span> — 文章の一部を装飾したいときに使う汎用インライン要素<a> — リンク。既定ではインラインだが、後述の通りblockやinline-blockに変更されることも多い<strong> <em> — 太字・強調(斜体)などの意味づけ<label> <small> <br> — フォームのラベル、注釈、改行<img> — 画像。インライン扱いだが「置換要素」のため例外的にwidth/heightが効く補足として、<img>タグはインライン要素に分類されますが、実際にはwidth・heightの指定がそのまま反映されます。これは画像や動画、フォーム部品などが「置換要素(replaced element)」と呼ばれる特殊な扱いを受けるためです。細かい話ですが、「インライン要素なのにサイズが効く例外がある」と知っておくと、実装時の混乱を防げます。
03 DISPLAY VALUES displayプロパティの値一覧と既定表示の仕組み なぜタグごとに表示形式が決まっているのか
displayプロパティにはblock・inline・inline-block以外にも複数の値があります。まずは主要な値を一覧で整理します。
| 値 | 効果 | 主な用途 |
|---|---|---|
| block | 幅いっぱいに広がり、前後で改行される | セクションの区切り、段落、リスト全体 |
| inline | 改行せず文章内に流し込まれる | 文字の一部装飾、リンク文字 |
| inline-block | 改行せず、かつwidth/heightが効く | ボタン、タグ状のラベル、アイコン付きテキスト |
| flex | 子要素を横並び・縦並びに柔軟に配置する | ヘッダーのメニュー、カードの横並び |
| grid | 行と列のグリッドで子要素を配置する | 複雑な段組みレイアウト、ギャラリー |
| none | 要素をレイアウトから完全に取り除く(非表示) | タブ切り替え、モーダルの表示/非表示 |
| list-item | リストのマーカー(・や数字)付きで表示する | <li>タグの既定値 |
📚 用語解説
ユーザーエージェントスタイルシート:ブラウザがあらかじめ内蔵している「初期状態のCSS」のこと。<div>がdisplay:block、<span>がdisplay:inlineになっているのは、HTMLタグ自体に決まりがあるからではなく、このユーザーエージェントスタイルシートによってブラウザが既定値を割り当てているためです。CSSでdisplayを上書きすれば、どのタグでも自由に表示形式を変更できます。
つまり、「<div>はブロック要素だ」という言い方は正確には「<div>はブラウザの初期設定でdisplay:blockになっている」という意味です。CSSで<li>{display:inline;}と書けば、リストの項目を横並びのインライン要素に変えることもできます。ナビゲーションメニューを横並びにする実装は、実際にこの仕組みを使っています。
<div>や<span>
を記述
シート
ブラウザの
初期CSSを適用
が決定
block/inline
などが決まる
確定
画面上の
配置が決まる
ブロック要素・インライン要素という分類は「タグの絶対的な性質」ではなく「ブラウザが最初に割り当てている初期値」に過ぎません。CSSのdisplayプロパティで自由に上書きできるという前提を理解しておくと、レイアウトの自由度に対する理解が一段深まります。
04 PRACTICAL EXAMPLES 実践例:サイト構造・記事一覧・ボタン・横並びレイアウト ブロック要素の知識を実際のWebページに落とし込む
ここからは、ブロック要素・インライン要素の知識を実際のページ制作でどう使うかを、代表的な4つの場面で見ていきます。
4-1. Webサイトのアウトライン(骨格)を作る
多くのWebサイトは、<header>(ヘッダー)・<nav>(ナビゲーション)・<main>(メインコンテンツ)・<footer>(フッター)という、いずれもブロック要素のタグを縦に積み重ねる形で骨格を作ります。それぞれが「幅いっぱいに広がり、前後で改行される」性質を持つため、特別な指定をしなくても自然に上から下へ積み重なるレイアウトになります。
この構造こそが、ブロック要素が「サイトの土台」として使われる理由です。まず大枠をブロック要素で区切り、その中の文章や装飾したい部分にインライン要素・インラインブロック要素を使う、という役割分担で考えると設計しやすくなります。
4-2. ブログの記事一覧を組む
ブログの記事一覧のように、同じ形の要素を縦に繰り返し並べるレイアウトは、<ul>と<li>というブロック要素の組み合わせで実装するのが基本です。1件の記事情報(サムネイル・タイトル・日付)を1つの<li>にまとめ、それを縦に並べることで一覧が完成します。
このとき、記事カードを横方向にも複数列で並べたい場合は、親要素の<ul>にdisplay:flex;やdisplay:grid;を指定します。<li>自体は既定でlist-item(前述の通りブロックに近い性質を持つ値)ですが、親のdisplay指定によって子要素の並び方をコントロールできる点が重要です。
4-3. aタグとCSSでボタンを作る
リンクを表す<a>タグは既定ではインライン要素です。文字数分の範囲しかクリックできず、幅や高さの指定も効きません。これをボタンのように見せて、クリックできる範囲を広げたい場合、display:block;またはdisplay:inline-block;を指定します。
| 指定 | クリック範囲 | 横並びにできるか | 向いている用途 |
|---|---|---|---|
| display:block | padding分を含めた矩形全体 | 他の要素の下に改行される(そのままでは並ばない) | 幅いっぱいの大きなCTAボタン |
| display:inline-block | padding分を含めた矩形全体 | そのまま複数個を横に並べられる | ボタンを複数横並びにしたいケース |
どちらの指定でも、<a>タグにpadding・background-color・border-radiusを組み合わせれば、見た目はボタンとして仕上がります。「複数のボタンを横に並べたいかどうか」でblockとinline-blockを使い分けるのがポイントです。
4-4. 横並びレイアウトの実装:floatとFlexboxの違い
ブロック要素は既定で縦に積み重なるため、複数のブロック要素を横に並べたい場合は追加の指定が必要です。歴史的にはfloatプロパティがよく使われてきましたが、現在ではFlexbox(display:flex)やGrid(display:grid)が主流です。
📚 用語解説
float:本来は「画像の横に文章を回り込ませる」ための指定でしたが、かつてはブロック要素を横並びにするレイアウト手法としても広く使われていました。floatさせた要素は通常のレイアウトの流れから外れるため、親要素の高さが正しく認識されなくなる副作用があります。
📚 用語解説
clearfix(クリアフィックス):floatを使った際に発生する「親要素の高さが崩れる」問題を回避するための、CSSの定番テクニック。親要素にoverflow:hidden;を指定する方法や、擬似要素::afterでclear:both;を適用する方法が代表的です。
floatさせた要素は通常の高さ計算から除外されるため、親要素の背景色やボーダーが正しく表示されなくなることがあります。この「floatの落とし穴」を回避するためにclearfixというハックが広まりましたが、現在では横並びレイアウトの実装自体をFlexboxやGridに切り替えるほうが、コードがシンプルで崩れにくくなります。
📚 用語解説
Flexbox(フレックスボックス):親要素にdisplay:flex;を指定するだけで、子要素を横並び(または縦並び)に配置できるCSSのレイアウト機能。justify-contentで左右の揃え方、align-itemsで上下の揃え方、gapで要素間の余白を簡単に制御でき、floatのような高さ崩れの副作用もありません。
floatは今でも「文章の横に画像を回り込ませる」という本来の用途では使われますが、ページ全体のレイアウトを組む主目的では、現在はFlexboxまたはGridを使うのが一般的です。もし外注先やAIに「横並びにしてほしい」と依頼する場合も、floatではなくFlexbox・Gridでの実装を指定すると、後々の保守がしやすくなります。
4-5. ブロック要素の指定が向いていないレイアウト
一方で、ブロック要素をそのまま多用すると不向きなケースもあります。例えば、文章中の一部の単語だけに色をつけたい場合、その部分を<div>(ブロック要素)で囲んでしまうと、前後で強制的に改行されて文章が崩れてしまいます。文章の途中に部分的な装飾を加えたいときは、改行を挟まない<span>(インライン要素)を使うのが正解です。
05 COMMON MISTAKES よくある間違い・つまずきポイント 初学者が必ず一度は踏む3つの落とし穴
displayプロパティに関して、初学者はもちろん、実務経験のある担当者でも見落としがちなポイントを3つ紹介します。
5-1. margin相殺(マージンの重なり)を知らずに余白が合わない
縦に並んだブロック要素同士のmargin(余白)は、単純に足し算されるわけではありません。上の要素のmargin-bottomと下の要素のmargin-topが接している場合、実際に表示される余白は2つの値の合計ではなく、大きい方の値のみになります。これを「margin相殺(マージンの重なり、margin collapsing)」と呼びます。
📚 用語解説
margin相殺(マージンの重なり):通常の流れの中で縦に隣接するブロック要素同士の上下marginが、合計値ではなく大きい方の値だけに縮まる現象。例えば上の要素にmargin-bottom:20px、下の要素にmargin-top:30pxを指定しても、実際の間隔は50pxではなく30pxになります。floatさせた要素やflex/gridの子要素にはこの現象は発生しません。
CSSで指定した数値通りに余白が反映されないと感じたら、margin相殺を疑ってください。回避したい場合は、marginではなくpaddingを使う、または親要素にdisplay:flex;を指定して隣り合う要素をflexアイテム化する、といった方法があります(flex・gridアイテムにはmargin相殺は発生しません)。
5-2. インライン要素にサイズ指定を書いて反映されない
前述の通り、インライン要素にはwidthとheightが効きません。「ボタンにしたいのにサイズが変わらない」という相談の多くは、対象のタグが<a>や<span>のままdisplay指定を変えていないことが原因です。まずdisplay:inline-block;またはdisplay:block;に変更されているかを確認するだけで、多くの表示崩れが解決します。
5-3. display:noneとvisibility:hiddenを混同する
「要素を非表示にする」ための指定として、display:none;とvisibility:hidden;の2つがありますが、挙動はまったく異なります。
| プロパティ | レイアウト上の扱い | 再表示のしやすさ | 主な用途 |
|---|---|---|---|
| display:none | 要素がレイアウトから完全に消え、スペースも占有しない | JavaScriptでdisplayの値を戻す | タブ切り替え、アコーディオンの開閉 |
| visibility:hidden | 見た目は消えるが、スペースはそのまま確保される | visibilityの値を戻すだけ | レイアウトを保ったまま一時的に隠したい場合 |
例えばタブ切り替えのUIで「非表示のタブの分だけ下のコンテンツがせり上がってしまう」場合はdisplay:none;が正しい選択です。逆に「非表示にしてもレイアウトの隙間は保っておきたい」場合はvisibility:hidden;を使います。目的に応じて使い分けることが重要です。
06 FOR NON-ENGINEERS 【独自】非エンジニアの経営者はCSSをどこまで知るべきか 「書ける」ではなく「判断できる」レベルを目指す
ここまでブロック要素・インライン要素の技術的な内容を解説してきましたが、多くの経営者・管理職の方にとって重要なのは「自分でコードを書けるようになること」ではありません。外注先やAIエージェントに具体的な指示を出せて、上がってきた成果物の良し悪しを判断できることです。
これは、契約書を自分で一から作成できなくても、条項の意味を理解して交渉できる状態を目指すのに近い感覚です。CSSも同様に、構文を暗記する必要はなく、「なぜこう表示されているのか」の因果関係を掴んでおけば、実務上は十分に機能します。
6-1. 経営者が知っておくと役立つ最低限のCSS知識
CSSの構文を暗記して自分でコーディングできる必要はありません。重要なのは、上がってきたLPやサイトの不具合を見たときに「これはdisplayの指定が原因かもしれない」と当たりをつけられる診断力です。この診断力があるだけで、外注先やAIエージェントとのやり取りの精度が大きく変わります。
また、非エンジニアがゼロからCSSの体系を学ぼうとすると、学習コストと業務での実利が見合わないケースが少なくありません。「概念だけ理解して、実装はプロやAIに任せる」という役割分担のほうが、経営資源の使い方としては合理的な場面が多いというのが実感です。
CSSやHTMLを体系立てて完全に理解してからWeb改修を発注しようとすると、いつまで経っても着手できません。ブロック要素・インライン要素のような基礎概念だけを押さえたら、あとは実際に依頼と修正のやり取りを繰り返しながら理解を深めていくほうが、結果的に早くゴールに到達します。
07 DELEGATE TO AI 【独自】LP制作・Web改修をAIエージェントにどう任せるか 弊社GENAIがClaude Codeで自社LPを改修している実際のフロー
CSSの基礎概念を理解したうえで、実際のコーディング作業をどう進めるか。弊社(株式会社GENAI)では、Claude Codeのような自律型のAIエージェントにLP・Webサイトの改修作業を任せる運用を行っています。ここでは、その実務的な進め方を紹介します。
📚 用語解説
自律型エージェント:人間が一行ずつコードを指示しなくても、目的を伝えるだけで自らファイルを読み込み、修正方針を考え、コードを書き換えるまで一気通貫で実行するAI。Claude Codeはその代表例で、「このボタンを横並びのFlexboxレイアウトに直して」といった自然な日本語の指示だけでCSSの修正まで完了させられます。
弊社では、Claude Max 20xプラン(月額約30,000円)を契約し、経営・営業・広告・経理・秘書業務に加えて、LPやWebサイトの軽微な改修作業にもClaude Codeを活用しています。ブロック要素の改行位置がずれている、ボタンの横並びが崩れている、といった修正は、専門のコーディング知識がなくても「現象を言葉で説明する」だけで対応できるケースが大半です。
7-1. AIにWeb改修を依頼するときの基本フロー
現象を言葉で
説明する
(例:ボタンが
横に並ばない)
AIが該当箇所
のコードを読み
原因を特定
AIが修正案を
実装・
プレビュー提示
人間が見た目を
確認して
公開を承認
重要なのは、この4ステップの中で人間がコードを一行も書く必要がない点です。「ボタンとボタンの間隔が詰まりすぎている」「このセクションの見出しの下に不要な余白が空いている」といった、見た目ベースの言葉で伝えるだけで、AIエージェントが該当するCSSプロパティ(displayやmargin、padding)を特定して修正します。
AIエージェントへの指示は「display:inline-blockに直して」のような専門的な文言である必要はありません。「このリンクをボタンのように見せて、横に3つ並べたい」という業務目線の説明で十分に意図が伝わります。ただし、この記事で紹介したような基礎知識があると、AIからの説明を理解しやすくなり、依頼から公開までのスピードが上がります。
AIエージェントによるコーディングは高速ですが、実際にブラウザでの見た目を確認し、公開の判断を下すのは人間の役割です。特にLPは売上に直結するため、公開前にスマートフォン・パソコンの両方でレイアウト崩れがないかを目視確認するプロセスは省略しないことを推奨します。
弊社ではこの運用により、以前は外注先とのメールのやり取りに数日かかっていた軽微なレイアウト修正が、その場で完結するようになりました。「CSSを完全に理解していないと自社サイトを触れない」という前提そのものが、AIエージェントの登場によって変わりつつあるというのが実感です。
08 CONCLUSION まとめ displayプロパティは「箱の振る舞い」を決める基礎中の基礎
この記事では、CSSのdisplay:blockを軸に、ブロック要素・インライン要素・インラインブロック要素の違い、実践的なレイアウト例、よくある間違い、そして非エンジニアの経営者がどう向き合うべきかまでを解説しました。最後にポイントを振り返ります。
displayプロパティの理解は、CSS全体の理解度を大きく左右する土台の知識です。ここを正確に押さえておくことで、レイアウト崩れの原因特定が早くなり、外注先やAIエージェントへの指示も具体的になります。
LP・Webサイトの改修も、AI鬼管理と一緒に「自社で回せる体制」に
CSSやHTMLの知識がなくても、AIエージェントに現象を言葉で伝えるだけでLP改修が回るようになります。
弊社の実運用ノウハウをベースに、貴社の業務にどこまでAIエージェントを組み込めるか、個別にご相談を承ります。
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか?
よくある質問
Q. ブロック要素とインライン要素、結局どちらを使えばいいですか?
A. 「独立したまとまり・セクションとして扱いたいか」で判断します。前後で改行してよく、幅や高さを指定したい場合はブロック要素(div・p・sectionなど)を使います。逆に、文章の途中で一部だけ装飾したい、改行させたくない場合はインライン要素(span・strong・aなど)を使います。迷ったら「この部分だけ独立した行にしたいかどうか」を基準に考えると判断しやすくなります。
Q. inline-blockとdisplay:flexの違いは何ですか?
A. inline-blockは個々の要素に指定して「改行せずサイズも効く」状態を作るプロパティです。一方flexは親要素に指定するプロパティで、複数の子要素を横並び・縦並びに整列させ、間隔や配置まで柔軟にコントロールできます。ボタン1個の見た目を調整したいだけならinline-block、複数の要素をまとめて整列させたいならflexを使うのが基本的な使い分けです。
Q. floatは今でも使うべきですか?
A. 本来の用途である「画像の横に文章を回り込ませる」表現には現在も有効です。ただし、ページ全体のレイアウトを横並びに組む目的では、親要素の高さが崩れる副作用があるため、現在はFlexboxやGridを使うのが主流です。既存サイトにfloatで組まれたレイアウトが残っている場合、無理に一括で置き換える必要はありませんが、新規実装では避けたほうが保守しやすくなります。
Q. divタグばかり使うのは良くないと聞きましたが本当ですか?
A. divタグ自体に問題があるわけではありませんが、本来header・nav・section・articleなど意味を持つタグで表現できる箇所まで全てdivで組むと、コードの可読性や検索エンジンへの意味づけ(SEO)の面で不利になることがあります。見た目の調整用の入れ子にはdivを使いつつ、ページの骨格部分は意味の通るタグを使うのがバランスの良い書き方です。
Q. display:noneとvisibility:hiddenはどう使い分ければいいですか?
A. 要素を消した分のスペースも詰めたい場合はdisplay:noneを、見た目だけ消してレイアウトの隙間はそのまま保っておきたい場合はvisibility:hiddenを使います。タブ切り替えやアコーディオンのように「非表示中は完全に無かったことにしたい」場面ではdisplay:noneが、レイアウトを崩さずに一時的に隠したい場面ではvisibility:hiddenが適しています。
Q. マージン相殺(margin collapsing)を防ぐにはどうすればいいですか?
A. 縦に隣接するブロック要素同士の上下marginが合計されず大きい方の値に縮まる現象です。防ぐ方法としては、marginの代わりにpaddingを使う、親要素にdisplay:flexやoverflow:hiddenを指定して新しい描画コンテキスト(ブロック整形コンテキスト)を作る、といった方法が一般的です。意図した余白と実際の表示にズレを感じたら、まずこの現象を疑ってください。
Q. CSSの知識がなくてもLP改修をAIエージェントに任せられますか?
A. 専門用語を使わず、見た目の現象を言葉で説明するだけでも多くの修正には対応できます。ただし、この記事で紹介したブロック要素・インライン要素・displayプロパティのような基礎概念を知っておくと、AIからの説明や修正結果を正しく理解でき、依頼から公開までのやり取りがより少ない回数で完結しやすくなります。最終的な公開判断は必ず人間が行うことをおすすめします。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。




