HTML

この記事では、他の資料からの長い引用を表すHTMLのblockquote要素と、出典の示し方を説明します。

Use <blockquote> to show a longer piece of text quoted from another source, and point to the source with a URL in the cite attribute plus a clear note in the text.

blockquote 要素

ほかの本や記事から持ってきた「引用のまとまり」を、ひと目で分かる形で見せるためのタグで、出典はURL（cite）と本文の注記で丁寧に示します。

• <blockquote>要素とは
  • 基本的な役割
  • <q>要素との違い
• 基本的な使い方
  • シンプルな例
  • cite属性の活用
• <blockquote>の表示とデフォルトスタイル
  • ブラウザのデフォルトレンダリング
  • カスタマイズ例
• セマンティクスとアクセシビリティ
  • セマンティクスの重要性
  • アクセシビリティに配慮するポイント
• 出典を明示する方法のいろいろ
  • cite属性の代替
  • 明確なリンクを用いるケース
• <blockquote>を使いこなすための実践的なヒント
  • マルチメディアの引用
  • 文章の途中での長めの引用
  • ネスト(入れ子)された<blockquote>
• よくある誤解や注意点
• <blockquote>における拡張的な応用
  • CSSカスタムプロパティを使う
  • Pseudo要素で装飾を追加する
  • MDNやW3Cスペックを活用したドキュメント確認
• よくある質問（FAQ）
• よくあるエラー早見表

<blockquote>要素とは

基本的な役割

<blockquote>要素は、引用文を表すためのHTML要素です。主に以下のような役割があります。

• 文章や他サイト、文献などからの抜粋を明示的に示す
• 引用元を示す際に活用し、文書構造の意味を明確化する

スクリーンリーダーなどの支援技術でも、<blockquote>要素は「引用文が始まった」ことを伝える役割を果たし、読み上げ時に発話内容として引用文であることが分かりやすくなるなどの効果があります。

<q>要素との違い

<blockquote>と似た要素に<q>要素がありますが、大きな違いは以下の通りです。

<blockquote>

ブロックレベル要素。独立して段落のように引用箇所を表示します。大きめの引用や長文に向いています。

<q>

インライン要素。文章中に組み込まれる短い引用に使用し、標準ではブラウザが自動的に引用符(“ ”など)を挿入する場合があります。

例:

• 小説や記事などから数行にわたる引用 → <blockquote>
• 文章中の短いフレーズや単語の引用 → <q>

基本的な使い方

シンプルな例

<blockquote>
	これは引用文です。元の記事や書籍などから抜粋してきた内容を示しています。
</blockquote>

最も基本的な使い方は、単純に<blockquote>タグの間に引用したい文章を入れるだけです。

cite属性の活用

cite 属性には 出典の URL を指定します。多くのブラウザでは見た目に直接は使われませんが、HTMLのメタ情報（セマンティクス）として有用です。

<blockquote cite="https://www.example.com/original-article">
	この部分は「Example.com」の記事からの引用です。
</blockquote>

HTML4時代には<blockquote cite="URL">を使用することが推奨されていましたが、HTML5ではこの属性は省略可能とされています。実際のところ多くのデベロッパーは、引用元を別途リンクテキストなどで示すことが多いです。ただし cite は表示されない属性なので、本文側にも出典リンクや注記を置くと読者に親切です。

<blockquote>の表示とデフォルトスタイル

ブラウザのデフォルトレンダリング

<blockquote>は、ほとんどのブラウザでインデント(字下げ)表示になることが多いです。多くのUA（ブラウザ）の初期スタイルが「引用文をブロック要素として扱い、左右の余白を広げる」ためですが、細かな見え方はブラウザによって異なります。

ユーザーエージェント(ブラウザ)のスタイルシート(UA CSS)で、例えば以下のように定義されることが多いとされています。

blockquote {
	display: block;
	margin: 1em 40px;
}

ただし、このスタイルはブラウザやユーザーエージェントによって多少異なる場合があります。

カスタマイズ例

もし独自のデザインやレイアウトを行う場合、CSSで次のように調整可能です。

blockquote {
	margin-left: 20px;
	margin-right: 20px;
	padding: 10px;
	border-left: 5px solid #888; /* 左側に縦線を引いて引用っぽさを強調 */
	font-style: italic;          /* 斜体で強調 */
}

注意:

独自に引用を表現するために文字色や背景色、境界線などを適用することはよくありますが、引用であることを伝える意味合いを壊さないようにしつつ、見やすさ・アクセシビリティも確保すると良いでしょう。

セマンティクスとアクセシビリティ

セマンティクスの重要性

<blockquote>要素を使用すると、HTML文書内で「これは引用箇所です」という明確な意味付けを行えます。これにより、検索エンジンやスクリーンリーダーなどのツールが文書を解釈しやすくなり、SEO(検索エンジン最適化)やアクセシビリティの観点でメリットがあります。

検索エンジン

引用元や引用文が認識されやすくなる可能性があり、文脈を正しく伝えられます。

支援技術

ユーザーが引用を辿るときに「引用文の開始/終了」がマークアップされていると把握しやすくなります。

アクセシビリティに配慮するポイント

引用の意図を明確にする

前後のテキストや<cite>要素(別要素)などを用いて、引用している内容を説明したり出典を明確にしたりする。

冗長なマークアップの回避

引用したいテキストを単なる<div>や<span>で囲ってスタイルだけで表現しないようにする。

翻訳ツールやスクリーンリーダーでの読み上げ

言語切り替えが必要な場合、lang属性を追加するなどの工夫も考えられます。

出典を明示する方法のいろいろ

cite属性の代替

<blockquote cite="...">を使用しない場合、引用元は文章中で明示したり、<cite>要素を併用して次のように書くこともあります。

<blockquote>
	<p>
		“この文章はサンプルとして引用しています。初心者向けのガイドラインより抜粋。”
	</p>
	<p>
		<cite>サンプルガイドブック 第1章</cite>
	</p>
</blockquote>

<cite> は作品タイトル向けで、人名には使いません。人名はプレーンテキストで十分です。著者名などを明示したい場合は、引用の直後に 「— 山田太郎」 のようにテキストで添えるか、<figcaption>（後述）でまとめると分かりやすくなります。

明確なリンクを用いるケース

ウェブ上の記事を引用しているのであれば、引用元記事へのリンクを設置するとユーザーにとっても分かりやすいです。以下は実例の一例です。

<blockquote>
	<p>
		“HTML5で追加された要素は多岐にわたり、構造をより意味的に示せるものが多い。”
	</p>
	<p>
		出典: <a href="https://www.example.com/articles/html5-new-elements">Example Blog HTML5解説記事</a>
	</p>
</blockquote>

アクセシビリティの観点から、リンクテキストに「詳しくはこちら」のような曖昧な表現でなく、どんな記事か分かるような文章を使うことを意識すると、より親切です。

<blockquote>を使いこなすための実践的なヒント

マルチメディアの引用

テキスト以外にも、動画や音声の説明文を引用として用いるケースも考えられます。文脈によりますが、著作権や利用規約に注意しながら、引用が許される範囲内で<blockquote>を使いましょう。

<blockquote cite="https://www.example.com/video-orig">
	この部分で、動画の概要や引用した内容を簡潔にまとめる...
</blockquote>

文章の途中での長めの引用

文章が途中であっても、長めの引用箇所には<blockquote>を使用します。読者がその区切りで引用箇所と分かるようにすることで、文脈が明確化します。

<p>以下の引用はとても参考になるので紹介します。</p>

<blockquote>
	<p>…ここに引用したい長めの文章…</p>
	<p>…さらに続く引用…</p>
</blockquote>

<p>以上が引用でした。続きとしては…</p>

ネスト(入れ子)された<blockquote>

引用中にさらに別の引用が含まれることも考えられます。HTML上ではネスト(入れ子)して使うことも可能です。ただし、読み手にとって分かりづらくならないように気を付ける必要があります。

<blockquote>
	メインの引用文です。
	<blockquote>
		さらに引用の中で別のソースを引用している場合
	</blockquote>
</blockquote>

このように二重、三重に引用が重なると可読性が大きく下がる場合があるため、実際には極力避けるのが一般的です。

よくある誤解や注意点

引用と転載の混同

<blockquote>で表現しているからといって、許可されていない文章を無断でコピーして良いわけではありません。著作権法の引用要件やライセンス、利用規約などをクリアする必要があります。

<q>要素との取り違え

<blockquote>と<q>は目的や表示形式が異なります。中級以上の方でもしばしば混同しがちですが、短いフレーズは<q>、段落レベルの引用は<blockquote>と使い分けるのが基本です。

スタイリングだけで見た目を引用風に

単に<div>などにインデントを付与したり枠線を付けたりして「引用風」に見せるケースがありますが、これではセマンティクスが失われます。本当に引用を意味する場合は<blockquote>を使いましょう。

<blockquote>内の文章構造

<blockquote>内では、段落や見出しなどのブロックレベル要素を自由に配置できます。引用元の文書構造をある程度再現する必要がある場合は、<p>や<h2>などを適切に使ってマークアップします。

<blockquote>における拡張的な応用

CSSカスタムプロパティを使う

見た目をより豊かに表現する際、CSSカスタムプロパティ(変数) を活用することもできます。

:root {
	--blockquote-border: 3px solid #ccc;
}

blockquote {
	border-left: var(--blockquote-border);
	padding-left: 1em;
	margin-left: 2em;
}

これにより、プロジェクト全体で引用デザインを統一しやすくなります。

Pseudo要素で装飾を追加する

::beforeや::afterの疑似要素を使い、“”や引用符など装飾文字を入れることもあります。例として以下のようにCSSを記述することで、視覚的に引用らしさを強調できます。

blockquote::before {
	content: "“";
	font-size: 2em;
	position: relative;
	left: -0.5em;
}

blockquote::after {
	content: "”";
	font-size: 2em;
	position: relative;
	right: -0.5em;
}

<q> は多くのブラウザが引用符を自動付与しますが、<blockquote> は通常自動付与されません。疑似要素で装飾を足す場合、<q> の自動引用符の見え方を変えてしまうことがあるので、デザインとアクセシビリティの両面で注意しましょう。

MDNやW3Cスペックを活用したドキュメント確認

中級者以上であれば、MDN(Mozilla Developer Network) や W3CのHTML仕様(WHATWG仕様)を直接確認してみるのもおすすめです。仕様変更の背景や互換性について詳しく記載されているため、より深い理解につながります。