はじめに
こんにちは、エンジニア2年目の嶋田です。
まずは、この記事を開いていただきありがとうございます！
今回はインライン要素とブロック要素の違いやそれぞれのできること、できないことについて解説していきたいと思います。
是非、最後までお付き合いください！
2023.0915 更新済み(コメントで教えていただきありがとうございます！)
目次
インライン要素とブロック要素
HTMLやCSSでは、要素の表示方法を大きく分けて「インライン要素」と「ブロック要素」の2種類に分けることができます。
現在、「インライン要素」「ブロック要素」の定義は廃止されていました…。
CSSの視覚整形モデルの用語として、「インラインレベルコンテンツ（インラインレベル要素）」および「ブロックレベルコンテンツ（ブロックレベル要素）」というものがあり以下の内容はこれらに該当しています。🙇♂️
インライン要素は、テキストの一部として表示される要素です。通常、テキスト内で他の要素と共存でき、水平に配置されます。
一方、ブロック要素は、ページの構造を形成し、独立したブロックとして表示される要素です。通常、新しい行から始まり、垂直に積み重ねられます。
インライン要素の例
| タグ | 説明 |
|---|---|
<a> |
リンクを表す要素 |
<span> |
スタイルを適用するための汎用的なインライン要素、特定の部分にスタイルを適用する場合に使う |
<strong> |
太字でテキストを強調する要素 |
<em> |
斜体でテキストを強調する要素 |
<u> |
下線を引くことでテキストを強調する要素 |
<mark> |
ハイライト（背景色を付けること）でテキストを強調する要素 |
<del> |
削除されたテキストを表す要素、テキストに取り消し線が引かれる |
<ins> |
追加されたテキストを表す要素、テキストに下線が引かれる |
<abbr> |
略語や頭字語を表す要素、マウスオーバー時に元の語を表示することができる |
<q> |
インラインの引用を表す要素、通常、引用符で囲まれて表示される |
<code> |
インラインのコードを表す要素、通常、等幅フォントで表示される |
ブロック要素の例
| タグ | 説明 |
|---|---|
<div> |
汎用的なブロック要素、スタイルやグループ分けのために使う |
<p> |
段落を表す要素、文章の一つのまとまりを示す |
<h1>〜<h6>
|
見出しを表す要素、<h1>が最も重要で大きく、<h6>が最も小さい見出し |
<ul> |
点（マーカー）付きリストを表す要素、<li>タグと組み合わせて使う |
<ol> |
番号付きリストを表す要素、<li>タグと組み合わせて使う |
<pre> |
整形済みテキストを表す要素、主にコードや等幅フォントで表示されるテキストを扱う |
<table> |
テーブルを表す要素、<tr>（行）、<td>（セル）などの要素と組み合わせて使う |
<form> |
入力フォームを表す要素、<input>や<select>などのフォーム部品と組み合わせて使う |
<nav> |
ナビゲーションリンクを表す要素、ウェブサイト内の主要なリンクを示す |
<section> |
セクションを表す要素、ページ内の論理的な区分を示す |
<article> |
記事やブログ投稿などの独立したコンテンツを表す要素 |
<header> |
ページやセクションのヘッダーを表す要素 |
<footer> |
ページやセクションのフッターを表す要素 |
インライン要素とは?
このセクションでは、ウェブページのHTMLやXML文書で使用される「インライン要素」について説明します。
インライン要素は、テキストの一部として表示される要素であり、一般的にはテキスト内で使用されます。
-
インライン要素の定義: インライン要素はHTMLやXML文書内でテキストの一部として使用され、通常、テキストの中に挿入されます。例として、
<span>や<a>などが挙げられます。 -
インライン要素の特性: インライン要素は通常、親要素内に配置され、親要素に従属します。テキスト内で他の要素と共存でき、一般的には水平に配置されます。
-
インライン要素の使用例: テキスト内でのリンク作成（
<a>）、強調表示（<em>）、テキストの一部を強調表示する際などにインライン要素が使用されます。 -
インライン要素の制限事項: インライン要素は通常、ブロック要素内に直接配置できないことがあり、その特性に制約があります。このセクションではその制限事項についても詳しく解説します。
インライン要素のできることとできないこと
- インライン要素の機能: インライン要素は主にテキストに対する構造やスタイルの適用に使用されます。例えば、リンクの追加、強調表示、テキストの色やフォントサイズの変更などが挙げられます。
- インライン要素の制限: インライン要素は通常、ブロック要素内に直接配置できないため、ページの構造を変更することが難しい場合があります。そのため、ページの主要な構造を定義するためにはブロック要素が必要です。
ブロック要素とは？
このセクションでは、ウェブページのHTMLやXML文書で使用される「ブロック要素」について説明します。
ブロック要素は、ページの構造を形成し、通常は独立したブロックとして表示されます。
-
ブロック要素の定義: ブロック要素はHTMLやXML文書内で独立したブロックとして使用され、通常、新しい行で表示されます。例として、
<div>や<p>が挙げられます。 -
ブロック要素の特性: ブロック要素は通常、親要素内で自身のブロックを形成し、独自のスタイルや構造を持ちます。通常、垂直に積み重なります。
-
ブロック要素の使用例: ページの段落作成（
<p>）、コンテンツのグループ化（<div>）、見出しの表示（<h1>から<h6>）、リストの作成（<ul>や<ol>）、セクションの定義などにブロック要素が使用されます。 -
ブロック要素の制限事項: ブロック要素は通常、インライン要素内に直接配置できません。また、ブロック要素の間には通常、新しい行が挿入され、独自のスペースを持ちます。
ブロック要素のできることとできないこと
- ブロック要素の機能: ブロック要素はページの構造を形成し、セクションを区切る役割を果たします。例えば、段落の作成、セクションの分割、リストの作成などが挙げられます。
- ブロック要素の制限: ブロック要素は通常、インライン要素内に直接配置できないため、テキスト内での使用には適していません。そのため、ページの主要な構造を定義するためにはブロック要素が必要です。
インライン要素とブロック要素の違い
| 項目 | インライン要素 | ブロック要素 |
|---|---|---|
| 配置 | テキスト内に挿入 | 独立したブロック |
| 表示 | 水平に配置 | 新しい行から始まり、垂直に積み重ねられる |
| 構造 | テキストの一部として構造に影響を与える | ページの構造を形成し、セクションを区切る役割を果たす |
| スタイル | テキストのスタイリングや強調表示に使用される | セクションのスタイリングや配置に使用される |
- インライン要素は、テキスト内で他の要素と共存できます。例えば、
<a>タグでリンクを作成した後、<span>タグでリンクの色を変更することができます。 - ブロック要素は、通常、新しい行から始まります。そのため、ブロック要素を連続して使用すると、ページのレイアウトが乱れる場合があります。
インライン要素は、通常、他のインライン要素内にネストできます。例えば、<a>タグでリンクを作成した後、<em>タグでリンクのテキストを強調表示することができます。ブロック要素は、通常、他のブロック要素内にネストできます。例えば、<div>タグでコンテンツをグループ化した後、<p>タグでグループ内の段落を作成することができます。
最後に
記事を読んでくださり、ありがとうございます！少しでもお役に立てていたら嬉しいです。
インライン要素とブロック要素を制覇することでHTMLやCSSはグッと扱いやすくなる気がしています。
私自身もまだまだ学びの途中なので、もし何か誤った情報がありましたら、コメントでご指摘いただければ幸いです！