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（インライン要素）で指定しています。ブロックレベル要素とインライン要素をうまく使い分けることで、ページのレイアウトを整理できます。