【HTML】インライン要素とブロック要素の違いと使い方

HTMLには、さまざまな要素（タグ）があり、それぞれの要素には「インライン要素」と「ブロック要素」という2つの基本的な種類があります。
この記事では、この2つの要素の違いと、インライン要素とブロック要素をどのように使い分けるかについて解説します。

インライン要素とは？

インライン要素は、他の要素と同じ行に並んで表示される要素です。
通常、インライン要素はテキストの一部として使用され、ブロック要素のように新しい行から始まりません。
具体的には、以下のような要素がインライン要素に該当します。

• <a>: ハイパーリンクを作成します。
• <span>: テキストの一部にスタイルを適用するために使用します。
• <img>: 画像を表示します（ただし、画像自体はインライン要素として表示されますが、画像の内容はブロック要素のように扱われることもあります）。

ブロック要素とは？

ブロック要素は、常に新しい行から始まる要素です。
ブロック要素は他のブロック要素と縦方向に積み重なり、幅は通常、親要素の幅いっぱいに広がります。
具体的には、以下のような要素がブロック要素に該当します。

• <div>: 汎用のコンテナとして使用されます。
• <p>: 段落を作成します。
• <h1> - <h6>: 見出しを作成します。
• <ul>: 順序のないリストを作成します。
• <ol>: 順序のあるリストを作成します。
• <li>: リストアイテムを作成します。

インライン要素をブロック要素に変換する方法

インライン要素をブロック要素のように表示させたい場合、CSSでdisplayプロパティをblockに設定します。

<span style="display: block;">このテキストはブロック要素として表示されます。</span>

ブロック要素をインライン要素に変換する方法

ブロック要素をインライン要素のように表示させたい場合、CSSでdisplayプロパティをinlineに設定します。

<div style="display: inline;">このテキストはインライン要素として表示されます。</div>

インライン要素とブロック要素を併せ持つインラインブロック要素とは？

インラインブロック要素は、インライン要素とブロック要素の両方の特性を持つ要素です。
インライン要素のように横に並びながら、ブロック要素のように幅や高さを設定できます。

例えば、以下のコードはインラインブロック要素を使用しています。

<div style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">
  ボックス1
</div>
<div style="display: inline-block; width: 150px; height: 50px; background-color: lightcoral;">
  ボックス2
</div>

これにより、2つのブロック要素が横に並び、それぞれ異なるサイズと背景色を持つようになります。

インラインブロック要素を使うことで、より柔軟なレイアウトを作成することができ、テキストや画像、ボタンを整然と配置することが容易になります。