blockquoteタグ -引用文を表す｜HTML辞典
<blockquote>タグとは？
<blockquote>タグは、HTML文書内で「引用文」を表すためのタグです。
長い引用や段落レベルの引用を明示するために使用され、デフォルトではインデント（字下げ）が適用されます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、セクショニングルート（Sectioning Root）
ブロックレベルの要素として扱われ、独立した引用部分を表します。
閉じタグの有無
<blockquote>は開始タグ（<blockquote>）と閉じタグ（</blockquote>）の両方が必要です。
基本的な記述方法
<blockquote> を使用すると、文章がインデント（字下げ）され、引用部分であることが明確になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blockquoteタグの例</title>
</head>
<body>
<h2>有名な言葉</h2>
<blockquote>
"成功とは、失敗を重ねても熱意を失わないことである。"
</blockquote>
<p>― ウィンストン・チャーチル</p>
</body>
</html>ポイント：
<blockquote>はブロックレベルの要素であり、引用部分全体を独立した段落として扱う。- デフォルトではインデント（字下げ）が適用される。
使用できる主な属性
| 属性名 | 説明 | 例 |
|---|---|---|
cite | 引用元のURLを指定 | <blockquote cite="https://example.com">...</blockquote> |
class | CSSのクラスを適用 | <blockquote class="quote">...</blockquote> |
id | 一意の識別子を設定 | <blockquote id="famous-quote">...</blockquote> |
style | インラインスタイルを適用 | <blockquote style="color: gray;">...</blockquote> |
cite 属性を使った引用元の指定
cite 属性を使用すると、引用の出典（URL）を示すことができます。
ただし、cite 属性はユーザーには表示されないため、明示的に <cite> タグを使って出典を示すのが一般的です。
<blockquote cite="https://example.com">
"知識とは力なり。"
</blockquote>
<cite>― フランシス・ベーコン</cite>CSSを使ったデザイン変更
<blockquote> のデフォルトのスタイルを変更したい場合、CSSを活用できます。
✅ カスタムスタイルの適用
blockquote {
font-style: italic;
color: #555;
border-left: 4px solid #ccc;
padding-left: 15px;
margin: 20px 0;
}<blockquote>
"未来を予測する最良の方法は、それを発明することだ。"
</blockquote><blockquote> の適切な使用例
✅ 長い引用（段落単位の引用）
文章全体を引用する場合に使用するのが適切です。
<blockquote>
"成功の秘訣は、常に努力を続けることである。"
</blockquote>✅ 記事や研究論文の引用
他の著作物や記事を引用する場合にも使われます。
<blockquote cite="https://example.com">
"最新の研究によると、毎日の運動が健康に与える影響は非常に大きい。"
</blockquote><blockquote> の適切でない使用例（誤った使い方）
❌ 短い引用に使うのはNG
短い引用や単語単位の引用には <q> を使うのが適切です。
<!-- NG：短い引用に <blockquote> を使用 -->
<p>彼は <blockquote>最高のリーダー</blockquote> だと言われている。</p>✅ 正しい書き方（<q> を使用）
<p>彼は <q>最高のリーダー</q> だと言われている。</p>❌ デザイン目的で使うのはNG
単なるデザイン目的なら、CSSを使用するのが適切です。
<!-- NG：デザイン目的だけで <blockquote> を使う -->
<blockquote style="font-weight: bold;">重要なメッセージ</blockquote>✅ 正しい書き方（CSSを使用）
.important-message {
font-weight: bold;
color: red;
}<p class="important-message">重要なメッセージ</p><blockquote> と他のタグの違い
| タグ | 役割 | 視覚的な変化 | 意味の強調 |
|---|---|---|---|
<blockquote> | 段落単位の長い引用 | インデント（字下げ） | あり（意味的な引用） |
<q> | 短い引用（1文や単語） | 二重引用符「” “」が付く | あり（意味的な引用） |
<cite> | 出典を示す | イタリック（デフォルト） | あり |
使用上の注意点
✅ 引用元を明示する
cite属性または<cite>タグを使用して、引用元を明示することが推奨される。- 著作権のある文章を引用する場合は、必ず出典を記載する。
✅ 短い引用には <q> を使う
- 短いフレーズや単語を引用する場合は、
<blockquote>ではなく<q>を使用する。
関連タグ
まとめ
<blockquote>タグは、HTML文書内で段落レベルの引用を示すためのタグ です。
デフォルトではインデント（字下げ）が適用され、SEO的にも「引用された文章」として認識されます。
短い引用には <q> を、出典を示すには <cite> を使うのが適切です。
デザイン目的ではなく、適切な意味を持たせて使用することが推奨されます。
