インライン要素とブロック要素の違いは？それぞれの特徴と違いをわかりやすく解説

この記事で解決できるお悩み

はじめに
「インライン要素」「ブロック要素」という名前は知っているけど、何が違うのかあまり覚えていない方もいるのではないでしょうか？
また、CSSを記述したのに何も変わらないといった時に、この「インライン要素」と「ブロック要素」が関係している場合があります。
それぞれ違った特徴と役割があるので、覚えておくとよいでしょう。
これらを覚えておくことでコーディングをスムーズに進めていけるようになります。

インライン要素とは

まず、インライン要素とは、主にブロック要素の中で用いられる要素です。
主に装飾を目的として利用されるものがこれに該当します。
ブラウザでは前後に改行が入らず、文章の一部として表示されます。

インライン要素の特徴

次にインライン要素には以下のような特徴があります。

• 改行が入らない
• 幅と高さを変えられない
• 余白を指定できない

改行が入らない

インライン要素は、テキストの一部として扱われるため、インライン要素が連続していても自動的に改行されることはありません。
例えば、インライン要素である<span>タグや<a>タグを文章の中で使用しても改行されることなく表示されます。

幅と高さを変えられない

インライン要素は、そのコンテンツに合わせて幅と高さが自動的に設定されるため、幅や高さを指定しても効果が反映されません。
他のテキストと一緒に並べて表示されるため、幅を指定することによるテキストの崩れを防ぐためにブラウザはインライン要素への指定を無視するようです。

縦のmarginを指定できない

前述の幅や高さを指定できない原理と一緒で、縦のmarginは無効になります。
ただし、paddingやmarginの左右の指定は可能です。

よく使用されるインライン要素一覧

<a>	ページやWebサイトへのリンクを設定する際に使用
<span>	スタイルを適用するための汎用的なインライン要素。 特定の部分にスタイルを適用する場合に使用する。
<strong>	強調を表す要素。テキストを太字にする。
<em>	斜体でテキストを強調する。
<u>	下線を引くことでテキストを強調する。
<mark>	背景色を付けることでテキストを強調する。
<del>	削除されたテキストを表す。テキストに取り消し線が引かれる。

ブロック要素とは

ブロック要素は、見出し・段落・表など、ページのレイアウトや構造を構築するために使用される要素です。
横幅いっぱいの領域を持つので、要素の前後には自動的に改行が入ります。
また、インライン要素とは違い、ブロック要素の中に他のブロック要素やインライン要素を入れることができます。

ブロック要素の特徴

ブロック要素の特徴はこちら

• 余白を指定できる
• 要素を横に並べられない
• 幅と高さが指定できる
• ブロック内に他の要素を入れられる

自動で改行される

ブロック要素は、インライン要素とは逆にデフォルトでは、他の要素をその隣に配置することができません。
新しいブロック要素が追加されると自動的に改行され、次の行に配置されます。

余白を指定できる

ブロック要素は、上下左右のすべての方向にmarginやpaddingを指定することができます。
これにより、ブロック要素同士の間隔を調整したり、要素の内側のスペースを確保したりすることが可能です。

横幅と高さが指定できる

ブロック要素には、widthやheightを自由に指定することができます。
これにより、要素のサイズを細かく設定することが可能です。
ブロック要素はデフォルトでは親要素の幅に適応しますが、特定の幅や高さを設定することができます。

要素内に他の要素を入れられる

ブロック要素は、他のブロック要素やインライン要素を内部に含むことができます。
これにより、複雑なレイアウトを作ることも可能です。

よく使用されるブロック要素一覧

<div>	汎用的なブロック要素で、スタイルやグループ分けのために使用されます。
<p>	段落を表す要素で、文章の一つのまとまりを示します。
<h1>~<h6>	見出しを表す要素です。
<header>	ページやセクションのヘッダーを表す要素です。
<footer>	ページやセクションのフッターを表す要素です。
<nav>	ナビゲーションリンクを表す要素で、ウェブサイト内の主要なリンクを示します。
<ul>	点（マーカー）付きリストを表す要素で、<li>タグと組み合わせて使用します。
<ol>	番号付きリストを表す要素で、<li>タグと組み合わせて使用します。
<table>	テーブルを表す要素で、<tr>、<td>などの要素と組み合わせて使用します。
<form>	入力フォームを表す要素で、<input>や<select>などのフォーム部品と組み合わせて使用します。
<section>	セクションを表す要素で、ページ内の論理的な区分を示します。
<article>	記事やブログ投稿などの独立したコンテンツを表す要素です。
<aside>	付随情報を表す要素で、主要なコンテンツとは関連性が低い情報を示します。

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

ブロック要素はページの構造やレイアウトを構築するために使用され、通常は他の要素とは独立して配置されます。
一方、インライン要素は文章の中で利用され、一部に対してスタイルやリンクなどの機能を適用する目的で使用されます。
文字データや他のインライン要素を配置することができますが、インライン要素の中にブロック要素を配置することはできません。

両方の特徴を持ったインラインブロック要素とは

インライン要素とブロック要素の特徴をいいとこ取りをした、インラインブロック要素というものが存在します。
「要素は横並びにしたいけど、横幅・高さや余白を調整したい」などの場面で使用することができてとても便利です。
CSSで「display: inline-block;」と指定することでインラインブロック要素として扱うことができます。

インラインブロック要素の特徴

• 改行が入らない
• 余白を指定できる
• 横幅と高さが指定できる
• 要素内に他の要素を入れられる

このようにインラインブロック要素は、インライン要素とブロック要素の特徴を掛け合わせたような機能を持っています。

まとめ

今回はインライン要素とブロック要素の違いがよくわからないという方に向けてわかりやすくまとめてみました。
改めておさらいしてみましょう。
インライン要素の特徴

• 改行が入らない
• 幅と高さを変えられない
• 余白を指定できない

ブロック要素の特徴

• 余白を指定できる
• 要素を横に並べられない
• 幅と高さが指定できる
• 要素内に他の要素を入れられる

インラインブロック要素の特徴

• 改行が入らない
• 幅と高さが指定できる
• 余白を指定できる
• 要素内に他の要素を入れられる

それぞれ違った特徴と役割があるので、覚えておくとよいでしょう。
これらを覚えておくことでコーディングをスムーズに進めていけるようになります。