CSSのブロック要素とインライン要素の違いを初心者向けに解説！使い分け完全ガイド

ブロック要素とインライン要素の違いと使い分け

先生と生徒の会話形式で理解しよう

生徒

「先生、CSSでブロック要素とインライン要素って何が違うんですか？」

先生

「簡単に言うと、ブロック要素は新しい行から表示される大きな箱のような要素で、インライン要素は文字のように横に並ぶ小さな要素です。」

生徒

「それだと、どんなタグがブロック要素で、どんなタグがインライン要素なんですか？」

先生

「例えば段落の

タグや見出しの

〜

タグはブロック要素です。リンクのタグや文字装飾のタグはインライン要素です。」

1. ブロック要素とは？

ブロック要素はページの横幅いっぱいに広がり、必ず新しい行から表示されます。段落や見出し、リストなどが代表的です。ブロック要素は幅（width）や高さ（height）、マージンやパディングを自由に指定できるため、レイアウト調整に便利です。


<style>
    .block-example {
        display: block;
        width: 300px;
        height: 50px;
        background-color: lightblue;
        margin-bottom: 10px;
        padding: 5px;
    }
</style>

<div class="block-example">ブロック要素1</div>
<div class="block-example">ブロック要素2</div>

ブラウザ表示

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

インライン要素は文字と同じように横に並びます。高さや幅は基本的に指定できません。文字装飾やリンク、強調表示などの目的で使われます。


<style>
    .inline-example {
        display: inline;
        background-color: lightgreen;
        margin-right: 5px;
        padding: 3px;
    }
</style>

<span class="inline-example">インライン1</span>
<span class="inline-example">インライン2</span>
<span class="inline-example">インライン3</span>

ブラウザ表示