HTML blockquoteタグ：ブロック引用と出典の示し方

HTMLの<blockquote>は、他のソースから引用された独立したセクションを示します。複数の段落を含めることができます。元のURLをcite属性に記録し、読者がソースを確認できるように別の目に見えるリンクを追加することが可能です。

blockquoteはいつ使用すべきですか？

引用文を独立した区画として示す場合にblockquoteを使います。段落の字下げや色の変更だけを目的に使わないでください。文中の短い引用には<q>が適しています。詳しくはHTML qタグの解説を参照してください。

ブロック引用には段落やその他のフローコンテンツを含めることができます。引用を出典と区別して保持してください：著者や出典クレジットは<blockquote>の外に配置します。元の文章を確認し、目的に必要な素材だけを使用してください。

ソースリンク付きの完全な例

次のコードをquote.htmlとして保存し、ブラウザで開いてください。サーバーや追加のライブラリは不要です。短い英語の引用はHTML標準から直接引用されています。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ブロック引用の例</title>
</head>
<body>
  <p>HTML標準では、blockquoteが表す内容を次のように説明しています。</p>
  <blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">
    <p lang="en">a section that is quoted from another source</p>
  </blockquote>
  <p>出典: <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"
    target="_blank" rel="noopener noreferrer"><cite>HTML Standard, blockquote element</cite></a></p>
</body>
</html>

ブラウザは、紹介段落、引用文、およびソースリンクをその順序で表示します。デフォルトのスタイルは異なりますが、ブラウザは一般的に引用文に余白を追加します。リンクはHTML Standardの該当セクションを開きます。引用文は元の英語の文言を保持します。

cite属性と表示する出典リンクの違い

cite属性には引用元のURLが含まれています。追加してもリンクやソースクレジットが自動的に表示されるわけではありません。読者が参照をたどる必要がある場合は、別の<a>要素と説明テキストを含めてください。

cite属性と<cite>要素は名前は同じですが、役割は異なります。属性は元のアドレスを記録し、要素は本や文書など作品のタイトルを示します。著者の名前だけでは作品のタイトルにはなりません。

引用をCSSでスタイル設定する

引用の意味をHTML上で保持し、CSSでマージンとボーダーを調整します。例のheadからスタイルシートをリンクし、次のルールをそのスタイルシートに追加します。また、ページで使用されている既存のスタイルシートにルールを追加することもできます。

blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  border-left: 0.25rem solid #477080;
}

引用には左の境界線と内部の余白が付きます。背景色や文字色を追加する場合は、読みやすいコントラストを保ってください。外観のためだけに、通常の引用されていない内容をblockquoteとしてマークしないでください。構文や使用条件については、HTML標準のblockquote定義およびMDNのblockquoteリファレンスを参照してください。