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は文字のように他の要素と同じ行に並ぶ表示方法です。横幅や高さを直接指定しても反映されません。代表的なHTMLタグは<span>や<a>です。文章中に色や装飾を加えるときに便利です。

<style>
    .inline-text {
        display: inline;
        color: red;
        font-weight: bold;
    }
</style>

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

文章中にspanを置くことで、文字だけ赤く太くなり、行の中に自然に溶け込みます。ボックスのような独立表示は必要ない場合に便利です。

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

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

inline-blockはinlineのように横並びできるけれど、blockのように幅や高さを指定できる便利な表示方法です。ボタンや小さなカードレイアウトなどに活用できます。

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

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

この例では3つのボックスが横に並び、幅や高さも自由に指定できます。文章中に配置できるので、ボタンやメニューを作るときに非常に便利です。

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の理解はその第一歩となるため、繰り返し練習しながら感覚を身につけていきましょう。