The <blockquote> element in HTML is a block-level quoting element used to clearly display excerpts from a text or external sources while providing semantic structure and enhancing readability.
<blockquote>要素とは
<blockquote>の表示とデフォルトスタイル
<blockquote>を使いこなすための実践的なヒント
<blockquote>における拡張的な応用
<blockquote>要素とは<blockquote>要素は、引用文を表すためのHTML要素です。主に以下のような役割があります。
スクリーンリーダーなどの支援技術でも、<blockquote>要素は「引用文が始まった」ことを伝える役割を果たし、読み上げ時に発話内容として引用文であることが分かりやすくなるなどの効果があります。
<q>要素との違い<blockquote>と似た要素に<q>要素がありますが、大きな違いは以下の通りです。
<blockquote><q>例:
<blockquote><q>HTML
<blockquote>
これは引用文です。元の記事や書籍などから抜粋してきた内容を示しています。
</blockquote>これは引用文です。元の記事や書籍などから抜粋してきた内容を示しています。
最も基本的な使い方は、単純に<blockquote>タグの間に引用したい文章を入れるだけです。
cite属性の活用引用要素には**cite属性を指定できます。これは「引用の元ネタ(出典)を示すためのURLやテキスト」を指定するための属性です。ただし、ブラウザによってはcite属性を見た目としては特に利用しないことが多く、HTML上のメタ情報(セマンティック情報)**として機能します。
HTML
<blockquote cite="https://www.example.com/original-article">
この部分は「Example.com」の記事からの引用です。
</blockquote>この部分は「Example.com」の記事からの引用です。
HTML4時代には<blockquote cite="URL">を使用することが推奨されていましたが、HTML5ではこの属性は省略可能とされています。実際のところ多くのデベロッパーは、引用元を別途リンクテキストなどで示すことが多いです。しかし、セマンティクスを向上させたい場合や、検索エンジンに引用元を示したい場合には、使用を検討すると良いでしょう。
<blockquote>の表示とデフォルトスタイル<blockquote>は、ほとんどのブラウザでインデント(字下げ)された表示になります。これは「引用文をブロック要素として扱い、左右に余白を空ける」という共通の規定があるためです。
ユーザーエージェント(ブラウザ)のスタイルシート(UA CSS)で、例えば以下のように定義されることが多いとされています。
CSS
blockquote {
display: block;
margin: 1em 40px;
}ただし、このスタイルはブラウザやユーザーエージェントによって多少異なる場合があります。
もし独自のデザインやレイアウトを行う場合、CSSで次のように調整可能です。
これは引用文です。元の記事や書籍などから抜粋してきた内容を示しています。
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>要素を併用して次のように書くこともあります。
HTML
<blockquote>
<p>
“この文章はサンプルとして引用しています。初心者向けのガイドラインより抜粋。”
</p>
<p>
<cite>サンプルガイドブック 第1章</cite>
</p>
</blockquote>“この文章はサンプルとして引用しています。初心者向けのガイドラインより抜粋。”
サンプルガイドブック 第1章
ただしHTML5の仕様では、<cite>要素は作品・本・論文等のタイトルを示すことを推奨しており、人物名を示す目的には本来想定されていません。人物名を示す場合は、文脈によっては<address>要素を利用したり、もしくは単にプレーンテキストとして氏名を記述することが推奨されます。
ウェブ上の記事を引用しているのであれば、引用元記事へのリンクを設置するとユーザーにとっても分かりやすいです。以下は実例の一例です。
HTML
<blockquote>
<p>
“HTML5で追加された要素は多岐にわたり、構造をより意味的に示せるものが多い。”
</p>
<p>
出典: <a href="https://www.example.com/articles/html5-new-elements">Example Blog HTML5解説記事</a>
</p>
</blockquote>アクセシビリティの観点から、リンクテキストに「詳しくはこちら」のような曖昧な表現でなく、どんな記事か分かるような文章を使うことを意識すると、より親切です。
<blockquote>を使いこなすための実践的なヒントテキスト以外にも、動画や音声の説明文を引用として用いるケースも考えられます。文脈によりますが、著作権や利用規約に注意しながら、引用が許される範囲内で<blockquote>を使いましょう。
HTML
<blockquote cite="https://www.example.com/video-orig">
この部分で、動画の概要や引用した内容を簡潔にまとめる...
</blockquote>文章が途中であっても、長めの引用箇所には<blockquote>を使用します。読者がその区切りで引用箇所と分かるようにすることで、文脈が明確化します。
HTML
<p>以下の引用はとても参考になるので紹介します。</p>
<blockquote>
<p>…ここに引用したい長めの文章…</p>
<p>…さらに続く引用…</p>
</blockquote>
<p>以上が引用でした。続きとしては…</p><blockquote>引用中にさらに別の引用が含まれることも考えられます。HTML上ではネスト(入れ子)して使うことも可能です。ただし、読み手にとって分かりづらくならないように気を付ける必要があります。
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;
}これにより、プロジェクト全体で引用デザインを統一しやすくなります。
::beforeや::afterの疑似要素を使い、“”や引用符など装飾文字を入れることもあります。例として以下のようにCSSを記述することで、視覚的に引用らしさを強調できます。
CSS
blockquote::before {
content: "“";
font-size: 2em;
position: relative;
left: -0.5em;
}
blockquote::after {
content: "”";
font-size: 2em;
position: relative;
right: -0.5em;
}これは引用文です。元の記事や書籍などから抜粋してきた内容を示しています。
ただし、ブラウザによって自動的に引用符を付加するデフォルトの挙動を上書きする場合があるため、デザインとアクセシビリティの両面で注意が必要です。
中級者以上であれば、MDN(Mozilla Developer Network) や W3CのHTML仕様(WHATWG仕様)を直接確認してみるのもおすすめです。仕様変更の背景や互換性について詳しく記載されているため、より深い理解につながります。
<blockquote>要素は、単に見た目のための枠ではなく、「ここが引用部分である」ことを伝える重要なセマンティクスを持った要素です。文中で引用を行う際には、著作権に配慮しながら、適切な出典表示とともに<blockquote>を使うことで、ユーザーにとっても分かりやすく、検索エンジンや支援技術にとっても解析しやすい文書構造になります。
<blockquote>を使い、不要な装飾を付けすぎないことをまず意識しましょう。cite属性の活用や<cite>要素との使い分け、CSS疑似要素・アクセシビリティ上の配慮などを考慮することで、より洗練された引用表現が可能になります。今後、Webページにおける引用表現を行う際には、ぜひ<blockquote>要素を正しく活用してみてください。ブラウザのデフォルトスタイルや必要に応じたカスタマイズを理解することで、読みやすく意味の通った引用セクションを作り上げることができます。