HTMLのブロックレベル要素とインライン要素
この記事ではHTMLのブロックレベル要素とインライン要素について説明します。
ブロックレベル要素とインライン要素の違いや、主なブロックレベル要素とインライン要素について説明しています。
YouTube Video
ブロックレベル要素とインライン要素
HTMLには、要素が画面上にどのように表示されるかを決定する「ブロックレベル要素」と「インライン要素」という2つの主要なカテゴリーがあります。これらの要素は、ページレイアウトにおいて重要な役割を果たし、どのように配置されるかに直接影響を与えます。ここでは、それぞれの要素の特徴と使い方について詳しく説明します。
ブロックレベル要素とは？
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>ブロックレベル要素は、通常、ページの幅全体を占め、他の要素とは別の行に表示される要素のことを指します。これらの要素は、その内部に他のブロックレベル要素やインライン要素を含めることができ、文書の大きな構造を定義します。
特徴:
- 要素は新しい行から開始し、幅は可能な限り広がります（通常は親要素の幅全体を占めます）。
- 他のブロック要素とは垂直方向に区切られ、要素間にマージンが適用されます。
- 内部に他のブロック要素やインライン要素を含むことができます。
ここでは、次のブロックレベル要素が利用されています。
<div>タグは、通常、レイアウトを構築するために使用されます。<p>は、段落を定義するために使用されます。<h1>から<h6>は、見出しを定義する要素です。h1が最も大きく、h6が最も小さな見出しになります。<ul>は、順序のないリストを作成します。<ol>は、順序のあるリストを作成します。<section>は、文書内のセクションを定義します。
インライン要素とは？
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>インライン要素は、他の要素と同じ行に配置され、通常その内容だけの幅を持ちます。これらの要素はテキストの一部として扱われ、ブロックレベル要素とは異なり、行全体を占有することはありません。
特徴:
- 要素は同じ行に表示され、他のインライン要素と横に並んで配置されます。
- 幅は要素の内容（テキストや画像）に基づいて決まります。
- ブロックレベル要素の内部に含めることができますが、逆はできません。
ここでは、次のインライン要素が利用されています。
<span>は、テキストの一部を特定のスタイルで強調するために使用されます。<a>は、ハイパーリンクを定義します。<img>は、画像を埋め込むための要素です。<strong>は、重要なテキストを強調表示します（通常、太字で表示されます）。<em>は、強調されたテキストを示します（通常、斜体で表示されます）。
ブロックレベル要素とインライン要素の違い
- 表示方法: ブロックレベル要素は新しい行に表示され、ページ全体の幅を占めますが、インライン要素は同じ行に他の要素と一緒に表示され、内容に応じて幅が決まります。
- 内部要素の扱い: ブロックレベル要素の中には他のブロックレベル要素やインライン要素を含めることができますが、インライン要素の中にブロックレベル要素を含めることはできません。
- レイアウトの役割: ブロックレベル要素は主にページのレイアウト構造を作成するために使用され、インライン要素はテキストやリンクなどの小さな要素を定義します。
使い分けのポイント
レイアウトの構築: 大きなセクションやコンテンツブロックを定義する際には、<div>, <section>, <article>などのブロックレベル要素を使用します。
テキストの装飾やリンク: テキストの一部を装飾したり、リンクを追加する際には、<span>, <a>, <strong>, <em>などのインライン要素を使用します。
ブロックレベル要素とインライン要素の混在
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- ブロックレベル要素として
<main>,<header>,<section>などが使用され、これらは通常新しい行にレンダリングされ、親要素の幅全体を占有します。 - インライン要素として
<a>,<strong>,<span>,<img>などが使用され、これらは行内に配置され、ブロックレベル要素内で幅を占有しません。
ブロックレベル要素の中にインライン要素を含めることは、よくあるパターンです。例えば、段落(<p>)の中にリンク(<a>)や強調表示(<strong>)を含めることが一般的です。ただし、インライン要素の中にブロックレベル要素を入れることはできないため、適切な使い分けが重要です。
まとめ
ブロックレベル要素とインライン要素は、HTMLの基本的な要素の2つであり、それぞれ異なる役割を持っています。ブロックレベル要素はページレイアウトの基礎を形成し、インライン要素はその中で細かいコンテンツを装飾・操作するために使用されます。この2つの要素を正しく理解し使い分けることで、効率的なHTMLコーディングが可能になります。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。