CSSのdisplayプロパティ完全ガイド！初心者でもわかるblock・inline・inline-blockの使い方

1. displayプロパティの基本とは？

1. displayプロパティの基本とは？

displayプロパティは、HTML要素の「表示形式」を決定する、CSSにおいて最も重要かつ頻繁に使用されるプロパティの一つです。Webサイトのレイアウトが崩れてしまう原因の多くは、このdisplayプロパティの理解不足によるものです。特に初心者が最初にマスターすべき値として、block（ブロック）、inline（インライン）、inline-block（インラインブロック）の3種類が挙げられます。

これらを直感的に理解するために、身の回りのものに例えてみましょう。

• block：「積み木」や「段ボール箱」のイメージ。一つ置くと、その横には何も置けず、次のものは下に積み重なります。
• inline：「文章の中の文字」のイメージ。横にさらさらと流れるように並び、必要な分だけの幅しか取りません。
• inline-block：「文字のように並ぶ小さな箱」のイメージ。横に並ぶ柔軟性を持ちつつ、箱としての大きさもしっかり持っています。

まずは、以下のサンプルコードで、それぞれの値がどのように画面上での振る舞いを変えるのか、実際の表示を確認してみましょう。プログラミング未経験の方でも、この3つの違いを知るだけで、デザインの自由度が劇的に広がります。

<style>
	/* ブロック要素：横幅いっぱいに広がり、縦に並ぶ */
	.sample-block {
		display: block;
		background-color: #d1ecf1;
		border: 1px solid #0c5460;
		padding: 10px;
		margin-bottom: 5px;
	}
	/* インライン要素：中身の分だけ幅を取り、横に並ぶ */
	.sample-inline {
		display: inline;
		background-color: #fff3cd;
		border: 1px solid #856404;
		padding: 5px;
	}
</style>

<div class="sample-block">これはblock（ブロック）です。横幅を占有します。</div>
<div class="sample-block">次の要素は強制的に改行されます。</div>

<div class="mt-3">
	<span class="sample-inline">inline（インライン）1</span>
	<span class="sample-inline">inline（インライン）2</span>
	<p class="mt-2 small text-muted">※インラインは横に並び、文章の一部のように扱われます。</p>
</div>

このように、displayプロパティを書き換えるだけで、同じHTMLタグでも見た目や配置ルールを自由自在に操ることができます。この基礎を固めることが、レスポンシブデザインやモダンなレイアウト構築への近道となります。

2. blockの特徴と使い方

2. blockの特徴と使い方

block（ブロック）は、Webサイトの構造を作る「骨組み」のような役割を持つ表示形式です。最大の特徴は、何も指定しなくても横幅がいっぱいまで広がり、新しい要素を置くと自動的に改行される点にあります。これにより、見出しや段落といった「ひとかたまりの要素」として認識されやすくなります。

検索エンジン（Googleなど）にとっても、どこからどこまでが一つのコンテンツ（章や段落）なのかを正しく伝えるために、適切なブロック要素の使用は欠かせません。代表的なHTMLタグには、汎用的な箱である<div>、文章の段落を作る<p>、ページの主題を示す<h1>～<h6>などがあります。

また、ブロック要素は「高さ（height）」や「横幅（width）」を自由に変更できるほか、上下左右の余白（marginやpadding）を確実に適用できるため、レイアウトの微調整に非常に適しています。

<style>
	/* ブロック要素のスタイル設定 */
	.standard-block {
		display: block; /* ブロック要素として表示 */
		width: 100%;    /* 横幅を親要素いっぱいに広げる */
		height: 60px;   /* 高さを指定 */
		background-color: #e7f3ff;
		border-left: 5px solid #007bff;
		margin-bottom: 15px;
		padding: 10px;
		line-height: 40px;
	}
</style>

<div class="standard-block"><i class="bi bi-box-seam"></i> ブロック要素：1つ目の箱</div>
<div class="standard-block"><i class="bi bi-box-seam"></i> ブロック要素：2つ目の箱（自動で改行されます）</div>

上記のサンプルを見ると、2つのdiv要素が横に並ばず、縦に積み重なっているのがわかりますね。これがブロック要素の基本的な挙動です。初心者のうちは、「Webサイトはブロックを縦に積み上げていくもの」とイメージすると理解がスムーズになります。マージンなどの余白も思い通りに効くため、デザインの基盤を作る際に最も多用する設定です。

3. inlineの特徴と使い方

3. inlineの特徴と使い方

inline（インライン）は、主に文章の一部として扱われる要素に適用される表示形式です。最大の特徴は、改行されずに横に並んでいく点にあります。テキストの一部に色をつけたり、リンクを貼ったりする場合によく使われます。

検索エンジン最適化（SEO）の観点でも、文章の文脈を壊さずに特定のキーワードを強調できる<strong>や<em>、あるいは内部リンクを示す<a>タグなどはすべてこのインライン要素としての性質を持っています。ただし、ブロック要素とは異なり、width（幅）やheight（高さ）を数値で指定しても反映されないという注意点があります。また、上下のマージン（外側の余白）も正しく適用されないため、レイアウトを組む際にはその特性を理解しておくことが重要です。

代表的なタグには、汎用的なインライン要素である<span>、リンクを作る<a>、強調を表す<strong>などがあります。これらを使いこなすことで、読者にとって読みやすく、かつ構造化された高品質なコンテンツを作成できます。

<style>
	/* インライン要素のスタイル設定 */
	.text-highlight {
		display: inline;
		color: #ffffff;
		background-color: #dc3545;
		padding: 2px 8px;
		border-radius: 4px;
		font-weight: bold;
	}
	.sample-link {
		display: inline;
		color: #007bff;
		text-decoration: underline;
	}
</style>

<p>
	CSSの学習において、<span class="text-highlight">inline要素</span>の理解は非常に大切です。
	文章の中に自然に溶け込み、<a href="#" class="sample-link">このようなリンク</a>も同じ行に並びます。
</p>
<p>
	<i class="bi bi-info-circle"></i> 
	インライン要素は、箱を作るのではなく「文字の流れ」の一部として機能します。
</p>

上記のサンプルで確認できる通り、spanタグで囲った部分だけが背景色で強調されていますが、前後の文章と地続きで表示されています。このように、コンテンツの特定の部分だけを装飾したい場合にインライン要素は非常に強力なツールとなります。レイアウト全体を動かすのではなく、細かなディテールを調整するために活用しましょう。

4. inline-blockの特徴と使い方

4. inline-blockの特徴と使い方

inline-block（インラインブロック）は、いわば「block」と「inline」のいいとこ取りをした非常に便利な表示形式です。2026年現在のモダンなWeb制作においても、ボタンデザインやナビゲーションメニューの構築など、多岐にわたるシーンで活用されています。

最大の特徴は、inlineのように横に並びながら、blockのように幅（width）や高さ（height）、上下の余白（margin/padding）を自由に指定できる点にあります。本来、文字のように並ぶ要素にはサイズ指定が効きませんが、inline-blockを使うことで「サイズ調整が可能なパーツを横に並べる」という高度なレイアウトが簡単に実現できます。

検索エンジンにとっても、構造が整理されたナビゲーション要素やボタンはユーザーの利便性（UX）を高める重要な要素として評価されます。特にスマホ対応（レスポンシブ）を考える際、小さなカード形式のパーツを並べるのに非常に重宝するテクニックです。

<style>
	/* インラインブロック要素：横に並びつつサイズ指定を可能にする */
	.menu-item {
		display: inline-block;
		width: 120px;
		height: 45px;
		background-color: #d4edda;
		border: 2px solid #28a745;
		margin-right: 8px;
		text-align: center;
		line-height: 40px;
		border-radius: 5px;
		vertical-align: top;
	}
</style>

<div class="menu-item"><i class="bi bi-house-door"></i> ホーム</div>
<div class="menu-item"><i class="bi bi-search"></i> 検索</div>
<div class="menu-item"><i class="bi bi-envelope"></i> 連絡</div>

<p class="mt-3 small text-muted">
	<i class="bi bi-lightbulb"></i> 
	通常、divは縦に並びますが、inline-blockにすることで横並びのメニューになります。
</p>

上記のサンプルでは、3つのdiv要素が改行されずに横に並んでいます。さらに、それぞれの要素に「幅120px」「高さ45px」という指定がしっかりと反映されているのがわかるはずです。これがinline要素（spanなど）との決定的な違いです。プログラミング未経験の方は、まず「横並びのボタンを作りたい時はinline-block」と覚えておくだけでも、サイト制作の幅がぐっと広がります。

5. displayプロパティを使い分けるポイント

5. displayプロパティを使い分けるポイント

• block：段落、見出し、divなど、独立して表示したい要素に使用。
• inline：文字やリンク、文中で装飾だけ加えたい要素に使用。
• inline-block：横並びにしたいけどサイズも調整したいボックスやボタンに使用。
• displayを理解すると、フレックスボックスやグリッドレイアウトと組み合わせたレイアウトも作りやすくなります。

初心者はまずblock、inline、inline-blockの3つの表示方法を覚え、文章とボックスの表示方法の違いを理解することがCSS学習の第一歩です。

まとめ

まとめ

今回は、CSSのdisplayプロパティの基本から、block、inline、inline-blockの違いと使い方について詳しく学びました。displayプロパティは、HTML要素の見え方や配置を決める非常に重要なCSSの基礎知識であり、Webデザインやレイアウト構築において欠かせない存在です。 block要素は横幅いっぱいに広がり、必ず改行される特徴を持つため、段落やセクション、コンテナなどページ構造を作る際に活躍します。一方でinline要素は文章の一部として扱われ、文字のように横並びで表示されるため、テキストの装飾やリンクの設定などに適しています。そしてinline-blockはその両方の性質を兼ね備えており、横並びを維持しながらサイズ指定もできる便利な表示形式として、ボタンやカードレイアウトなどで頻繁に利用されます。 これらの違いを理解することで、思い通りのレイアウトを実現できるようになり、CSSの理解が一気に深まります。特に初心者のうちは、なぜ改行されるのか、なぜ横に並ぶのかといった挙動を意識しながらコードを書くことが重要です。displayプロパティを正しく使い分けることで、シンプルなHTMLでも見た目を大きく変えることができます。 また、displayはflexやgridといった高度なレイアウト技術の基礎にもなっています。まずはblock、inline、inline-blockをしっかり理解し、それぞれの特性を把握することで、より複雑なデザインにも対応できる力が身につきます。 下記のサンプルでは、3つのdisplayの違いを一度に確認できるようにまとめています。実際にブラウザで動かして、見た目の違いを体験することで理解がより深まります。

<style>
    .sample-block {
        display: block;
        background-color: #add8e6;
        margin-bottom: 10px;
        padding: 10px;
    }

    .sample-inline {
        display: inline;
        color: red;
        font-weight: bold;
    }

    .sample-inline-block {
        display: inline-block;
        width: 120px;
        height: 50px;
        background-color: #90ee90;
        text-align: center;
        line-height: 50px;
        margin-right: 10px;
    }
</style>

<div class="sample-block">block要素の例</div>
<div class="sample-block">もう一つのblock</div>

<p>これは<span class="sample-inline">inline要素</span>の例です。</p>

<div class="sample-inline-block">ボックス1</div>
<div class="sample-inline-block">ボックス2</div>
<div class="sample-inline-block">ボックス3</div>

このように、displayプロパティを使い分けることで、同じHTMLでもまったく異なる見た目や配置を実現することができます。Web制作においては、見た目と構造の両方を意識することが大切です。displayの理解はその第一歩となるため、繰り返し練習しながら感覚を身につけていきましょう。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

CSSのdisplayプロパティとは何ですか？初心者でもわかるように教えてください

CSSのdisplayプロパティとは、HTML要素の表示方法を指定するための基本的なCSSプロパティです。block、inline、inline-blockなどの値を使うことで、要素が縦に並ぶか横に並ぶか、または文章の中に表示されるかをコントロールできます。レイアウト作成の基礎となる重要な知識です。