block、inlineとはなんですか？

2025.03.22

1. block（ブロック要素）

特徴

• 幅は親要素いっぱいに広がる（widthを指定しない場合）。
• 高さは内容に応じて自動調整される。
• 改行が入るため、次の要素は次の行に表示される。
• width・height・margin・padding などのサイズ調整が自由に可能。

主なブロック要素

• <div>
• <p>
• <h1> 〜 <h6>
• <ul> / <ol> / <li>
• <header> / <footer> / <section> などのセクション要素

例

<div style="background-color: lightblue;">これはブロック要素です。</div>
<p style="background-color: lightgreen;">これもブロック要素です。</p>

結果: 各要素が親要素の幅いっぱいに広がり、別々の行に配置されます。

2. inline（インライン要素）

特徴

• 内容の幅だけを占める（widthやheightは基本的に無視される）。
• 改行されず、隣の要素と同じ行に並ぶ。
• marginやpaddingは水平方向にしか効かない（縦方向の余白は無視される）。

主なインライン要素

• <span>
• <a>
• <b> / <strong> / <i> / <em> などのテキスト装飾タグ
• <img>
• <code> / <kbd> などのインラインコード要素

例

<p>この文章の <span style="color: red;">一部だけ</span> インライン要素です。</p>

結果: 「一部だけ」が赤く表示され、他のテキストと同じ行に並びます。

3. inline-block（インラインブロック）

特徴

• インラインのように同じ行に並ぶが、widthやheightが指定できる。
• インライン要素とブロック要素の特性をあわせ持つ。

例

<span style="display: inline-block; width: 100px; height: 100px; background-color: lightcoral;">
  インラインブロック
</span>
<span style="display: inline-block; width: 100px; height: 100px; background-color: lightseagreen;">
  2つ目のボックス
</span>

結果: 2つの四角形が横に並び、それぞれに幅や高さが指定されています。

4. display プロパティの活用

CSSで display を指定することで、要素の振る舞いを変更できます。

例

<style>
  .block-example {
    display: block;
    background-color: lightblue;
    margin: 10px 0;
  }

  .inline-example {
    display: inline;
    background-color: lightgreen;
  }
</style>

<div class="block-example">ブロック要素</div>
<span class="inline-example">インライン要素</span>
<span class="inline-example">インライン要素</span>

5. まとめ

ポイント

• レイアウトを組み立てる際は、block と inline の違いを意識することで、意図したデザインを効率的に実現できます。
• 見出しやセクションなどのまとまりは block、文字の装飾やリンクなどの部分的な装飾は inline を使うのが基本です。