CSSのブロックレベルとインラインの違いを完全ガイド！初心者でもわかる使い分け

新人と先輩の会話形式で理解しよう

新人

「CSSでブロックレベルとインラインって何ですか？どう使い分けるんですか？」

先輩

「CSSのブロックレベル要素とインライン要素は、ページ内での表示方法が違うんです。それぞれの特徴を理解することで、レイアウトの作成がうまくいきますよ。」

新人

「なるほど、それぞれの違いについて詳しく教えてください。」

先輩

「では、ブロックレベル要素とインライン要素の違いを具体的に見ていきましょう。」

1. ブロックレベル要素とは？

ブロックレベル要素は、通常、ページの中で独立した「ブロック」として表示される要素のことです。これらの要素は、ページ全体の幅に合わせて広がり、通常は上下に他の要素と改行を挟んで表示されます。

代表的なブロックレベル要素には、divやp、h1、ulなどがあります。これらは、親要素に対して横幅を広げるため、コンテンツが他のコンテンツを押しのけて下に配置されます。

以下のコードでは、divタグを使って、ブロックレベル要素の例を示しています：


<style>
    div {
        background-color: lightblue;
        padding: 20px;
    }
</style>

<div>この部分はブロックレベル要素です。</div>

ブラウザ表示

このコードでは、divタグを使って、背景色と余白を設定しています。divはブロックレベル要素なので、この要素は横幅いっぱいに広がり、他の要素とは上下に分かれて表示されます。

2. インライン要素とは？

インライン要素は、ページ内で横並びに表示される要素です。インライン要素は、親要素の横幅に合わせて横に並ぶため、上下にスペースがありません。

代表的なインライン要素には、spanやa、strong、emなどがあります。インライン要素はブロックレベル要素と違って、改行されることなく、他のインライン要素と横並びに表示されます。

以下のコードでは、spanタグを使って、インライン要素の例を示しています：


<style>
    span {
        background-color: lightgreen;
        padding: 5px;
    }
</style>

<p>これはテキストの一部を<span>インライン要素</span>として表示しています。</p>

ブラウザ表示

このコードでは、spanタグを使って、テキストの一部に背景色をつけています。インライン要素であるため、spanはテキストの一部として横並びで表示され、改行はされません。

3. ブロックレベル要素とインライン要素の使い分け

ブロックレベル要素とインライン要素は、使い分けることで、より整理されたレイアウトを作成できます。ブロックレベル要素はコンテンツをセクションごとに分けたいときに使い、インライン要素はテキストやリンクの一部にスタイルを適用したいときに使います。

例えば、ブログの記事でセクションごとにタイトルや本文を分けるためには、divやpなどのブロックレベル要素を使います。一方、文章中のリンクや強調したい単語に色をつける場合は、aやspanといったインライン要素を使います。

以下の例では、ブロックレベル要素とインライン要素を組み合わせて使っています：


<style>
    .section {
        background-color: lightyellow;
        padding: 20px;
        margin-bottom: 20px;
    }

    .highlight {
        color: red;
        font-weight: bold;
    }
</style>

<div class="section">
    <h2>セクションのタイトル</h2>
    <p>これは本文です。<span class="highlight">強調したい部分</span>をインライン要素で指定しています。</p>
</div>

ブラウザ表示

このコードでは、セクション全体をdiv（ブロックレベル要素）で囲み、その中に強調した部分をspan（インライン要素）で指定しています。ブロックレベル要素とインライン要素をうまく使い分けることで、ページのレイアウトを整理できます。

4. ブロックレベルとインラインの種類

ブロックレベル要素とインライン要素には、それぞれ特定のHTMLタグがあります。以下に代表的なものを紹介します。

ブロックレベル要素の代表的なタグ

<div> - 汎用的なコンテナとして使われ、他の要素をグループ化するのに使います。
<h1>～<h6> - 見出しタグで、ページのタイトルやセクションの見出しに使います。
<p> - 段落を定義するためのタグです。
<form> - フォームを作成するためのタグです。ユーザーからの入力を受け取る際に使用します。
<table> - テーブルを作成するためのタグです。行や列を使ってデータを整理します。
<ul> - 順不同リストを作成するタグです。リスト項目は<li>タグで囲みます。
<ol> - 順序付きリストを作成するタグです。リスト項目は<li>タグで囲みます。
<dl> - 定義リストを作成するタグです。項目とその定義を表示します。
<li> - リストの項目を定義するタグです。<ul>や<ol>内に使われます。
<header> - セクションやページのヘッダーを定義するタグです。
<footer> - ページのフッターを定義するためのタグです。
<article> - 自立したコンテンツを表すタグです。

インライン要素の代表的なタグ

<a> - ハイパーリンクを作成するためのタグです。リンク先を指定します。
<img> - 画像を表示するためのタグです。画像のソースURLを指定します。
<input> - ユーザーからの入力を受け取るためのフォーム要素です。
<select> - ドロップダウンリストを作成するためのタグです。
<textarea> - 複数行のテキスト入力欄を作成するためのタグです。
<strong> - 重要なテキストを太字で表示するためのタグです。
<span> - 特に意味がないが、スタイルを適用したい部分を囲むために使います。
<br> - 改行を挿入するためのタグです。
<small> - テキストを小さく表示するためのタグです。
<mark> - ハイライトされたテキストを表示するためのタグです。
<cite> - 引用元を示すタグです。

これらのタグをうまく使い分けることで、ページの構造を整理し、デザインを調整することができます。例えば、見出しや段落はブロックレベル要素で整理し、テキストの一部を強調したい場合はインライン要素を使うと良いでしょう。

5. displayプロパティで表示形式を変更する

HTMLの要素はもともとブロックレベル要素かインライン要素として定義されていますが、CSSのdisplayプロパティを使うことで表示形式を変更することができます。

例えば、ブロックレベル要素をインライン要素のように表示したり、その逆も可能です。


<style>
    div {
        display: inline;
        background-color: lightblue;
    }

    span {
        display: block;
        background-color: lightgreen;
    }
</style>

<div>本来はブロック要素</div>
<span>本来はインライン要素</span>

ブラウザ表示

このように、displayを使えばレイアウトを柔軟に調整することができ、デザインの幅が広がります。

6. inline-blockとは？中間的な表示方法

inline-blockは、インライン要素のように横並びにしつつ、ブロック要素のように幅や高さを指定できる表示形式です。

ボタンやカード型レイアウトなど、横並びにしたいがサイズ調整もしたい場合に非常に便利です。


<style>
    .box {
        display: inline-block;
        width: 150px;
        height: 100px;
        background-color: lightcoral;
        margin: 5px;
    }
</style>

<div class="box">ボックス1</div>
<div class="box">ボックス2</div>

ブラウザ表示

このように、inline-blockを使うことで、横並びとサイズ調整を同時に実現できます。