ブロック要素とインライン要素一覧と違いについて

2024年6月13日 11:37

HTMLの基礎を理解するためには、ブロック要素とインライン要素の違いをしっかりと理解することが重要です。

これらの要素の使い分けを正確に把握しておくことで、ページのレイアウトやデザインが思い通りに実現できます。

特に、コーディングの初心者にとっては、この基本的な概念を理解することが、スムーズなコーディングの第一歩となります。

ここでは、ブロック要素とインライン要素の違いについてわかりやすく説明します！

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

※動画では「ブロックライン要素」と言っていますが、正しくは「ブロック要素」です。

■ ブロック要素

ブロック要素は、新しい行から始まり、その行全体を使うので、縦に並びます。まるで、大きなパズルのピースが縦に並んでいるような感じです。

例え：

段落（<p>タグ）：本の中で1つの段落が終わると、次の段落は新しい行から始まります。つまり、縦に並びます。
見出し（<h1>～<h6>タグ）：章のタイトルのように、新しい行から始まって縦に並びます。

サンプルコード：

<h1>これは見出しです</h1>
<p>これは段落です。縦に並びます。</p>

■ インライン要素

インライン要素は、同じ行の中に並びます。まるで、ビーズが糸に通して横に並んでいるような感じです。

例え：

強調文字（<strong>タグ）：文の途中で特に強調したい部分を太字にします。つまり、横に並びます。
リンク（<a>タグ）：文の中に表示されるリンクも、他の文字と一緒に横に並びます。

サンプルコード：

<p>これは普通のテキストで、<strong>これは強調されたテキスト</strong>です。つまり、横に並びます。</p>
<p>この文の中には<a href="#">リンク</a>があります。これも横に並びます。</p>

まとめ

ブロック要素：新しい行から始まり、その行全体を使うので、縦に並びます。大きな段落のようなものです。
- 例：段落、見出し、リスト
インライン要素：同じ行の中にそのまま並びます。ビーズが糸に通されているようなものです。
- 例：太字、リンク

ブロック要素一覧

ブロック要素は通常、画面において新しい行から始まり、全幅を占めます。

<address> - 連絡先情報
<article> - 独立したコンテンツ
<aside> - サイドバーなどの補足内容
<blockquote> - 引用
<canvas> - 描画領域
<dd> - 定義リストの定義内容
<div> - 汎用コンテナ
<dl> - 定義リスト
<dt> - 定義リストの用語
<fieldset> - フォームのグループ化
<figcaption> - 図のキャプション
<figure> - 図やコードリスト
<footer> - フッター
<form> - フォーム
<h1> - <h6> - 見出し
<header> - ヘッダー
<hr> - 水平線
<li> - リスト項目
<main> - 主コンテンツ
<nav> - ナビゲーション
<noscript> - JavaScript無効時のコンテンツ
<ol> - 順序付きリスト
<p> - 段落
<pre> - 整形済みテキスト
<section> - セクション
<table> - 表
<tfoot> - 表のフッター
<ul> - 順序なしリスト
<video> - ビデオ

インライン要素一覧

インライン要素は通常、コンテンツ内に連続して表示されます。

<a> - ハイパーリンク
<abbr> - 略語
<b> - 太字
<bdi> - テキストの双方向の分離
<bdo> - テキストの方向
<br> - 改行
<cite> - 出典
<code> - コード
<data> - 機械可読データ
<dfn> - 定義
<em> - 強調
<i> - 斜体
<img> - 画像
<input> - 入力フィールド
<kbd> - キーボード入力
<label> - フォームラベル
<mark> - マークされたテキスト
<q> - 短い引用
<samp> - サンプル出力
<small> - 小さなテキスト
<span> - 汎用インラインコンテナ
<strong> - 重要なテキスト
<sub> - 下付き文字
<sup> - 上付き文字
<time> - 時間
<u> - 下線付きテキスト
<var> - 変数

この記事が気に入ったらサポートをしてみませんか？