Web記事やレポートで、別のWebページ・書籍・発言から文章を引用することがあります。HTMLでは、引用文の長さや置かれる場所に合わせてblockquoteタグとqタグを使い分けます。
段落単位の長い引用にはblockquote、文章中の短い引用にはq、作品名や資料名にはciteを使います。この記事では、出典リンクまで含めた実用的な書き方と、CSSで読みやすく整える方法を初心者向けに解説します。
HTMLで引用を表す3つのタグ
引用タグは、見た目ではなく引用の役割をHTMLへ伝えるために使います。字下げや斜体にしたいだけの文章へ引用タグを使わず、デザインはCSSで調整してください。
blockquote：段落や複数文にわたる長い引用q：自分の文章の途中へ入れる短い引用cite：本、記事、Webページなど引用元となる作品のタイトル
引用文だけでなく、読者が「どこから引用したのか」を確認できる出典表示も大切です。タグの意味と、人が読める出典リンクの両方を用意します。
blockquoteタグで長い文章を引用する
blockquoteタグは、段落単位の長い引用を表す要素です。引用文が本文から独立したブロックになる場合に使います。
<blockquote>
<p>
小さな改善を積み重ねることで、Webサイトは使いやすくなります。
</p>
</blockquote>blockquoteの内側には、引用した文章をpタグで入れます。複数の段落を引用する場合は、段落ごとにpタグを分けてください。
多くのブラウザでは初期状態で左右に余白が付きます。ただし、引用であることは余白だけで判断せず、HTMLのblockquote要素で意味を示すことが基本です。
cite属性へ出典URLを指定する
引用元のURLは、blockquoteのcite属性へ指定できます。
<blockquote cite="https://example.com/guide/">
<p>
小さな改善を積み重ねることで、Webサイトは使いやすくなります。
</p>
</blockquote>cite属性には、引用の背景や出典を説明するページのURLを入れます。ただし、この属性のURLは通常のブラウザ画面には表示されません。
読者が出典を開けるように、画面上にもaタグでリンクを置きます。cite属性だけで出典表示を済ませないようにしましょう。
figureとfigcaptionで引用と出典をまとめる
引用文と出典表示を一つのまとまりとして扱う場合は、figureとfigcaptionを使うと構造が分かりやすくなります。
<figure class="quote-card">
<blockquote cite="https://example.com/guide/">
<p>
小さな改善を積み重ねることで、Webサイトは使いやすくなります。
</p>
</blockquote>
<figcaption>
出典：
<cite>
<a href="https://example.com/guide/">Web制作ガイド</a>
</cite>
</figcaption>
</figure>figureで引用と出典をまとめ、figcaptionへ説明を置きます。出典名をciteで示し、その内側のaタグで引用元を開けるようにしています。
HTMLの仕様上、引用元の表示はblockquoteの外側へ置きます。上の形なら、引用文と出典の関係を保ちながら正しく配置できます。
qタグで文中の短い言葉を引用する
qタグは、段落の途中へ入る短い引用に使います。会話や発言の一部など、改行を必要としない引用が対象です。
<p>
担当者は<q>スマートフォン表示も確認します</q>と説明しました。
</p>多くのブラウザでは、qで囲んだ部分の前後へ引用符が自動で表示されます。HTMLへ「」やダブルクォーテーションを重ねて書くと引用符が二重になるため、まずはタグだけで表示を確認してください。
qにもcite属性を付けられます。出典がWebページにある場合は、次のようにURLを指定します。
<p>
公式ガイドでは
<q cite="https://example.com/responsive/">
スマートフォン表示も確認します
</q>
と説明されています。
</p>
<p>
出典：<a href="https://example.com/responsive/">レスポンシブ対応ガイド</a>
</p>ここでも、cite属性とは別に画面上の出典リンクを用意しています。短い引用でも、出典を確認できる形にしてください。
citeタグは作品名や資料名を表す
citeタグは、書籍、記事、論文、映画、Webページなど、創作物や資料のタイトルを表します。引用文そのものを囲むタグではありません。
<p>
詳細は<cite>Web制作ガイド</cite>を参照してください。
</p>多くのブラウザではciteの文字が斜体になりますが、重要なのは作品名という意味です。斜体にする目的だけでciteを使わず、見た目はCSSで調整します。
著者名だけをciteで囲むのではなく、作品のタイトルを囲みます。著者名も表示する場合は、通常のテキストとしてタイトルと一緒に書きます。
CSSで引用を読みやすくデザインする
HTMLで引用と出典の構造を作った後に、CSSで余白、枠線、背景色を整えます。引用だと分かる見た目にしつつ、本文とのコントラストを確保します。
.quote-card {
margin-block: 32px;
padding: 24px;
border-inline-start: 5px solid #0f766e;
border-radius: 0 12px 12px 0;
background: #f0fdfa;
}
.quote-card blockquote {
margin: 0;
color: #134e4a;
font-size: 1.05rem;
line-height: 1.8;
}
.quote-card blockquote p {
margin: 0;
}
.quote-card figcaption {
margin-block-start: 16px;
color: #475569;
font-size: 0.9rem;
text-align: end;
}
.quote-card cite {
font-style: normal;
}
.quote-card a {
color: #0f5fb8;
text-decoration-thickness: 0.1em;
text-underline-offset: 0.18em;
}border-inline-startは、横書きでは引用ブロックの左側へ線を表示します。line-heightで行間を広げ、長い引用も読みやすくしています。
リンクは色だけで区別せず、下線も残します。背景色と文字色の組み合わせは、実際のサイト上で読みやすいか確認してください。
blockquoteとqの使い分け
- 引用だけで一つの段落になる：
blockquoteを使う - 自分の文章の途中へ短く入る：
qを使う - 作品や資料のタイトルを示す：
citeを使う - 引用元を開けるようにする：
aタグで出典リンクを表示する
文字数だけで機械的に決めるのではなく、本文から独立した引用か、文の一部かで判断します。改行を含む引用や複数段落の引用はblockquoteが適しています。
引用するときに確認すること
HTMLタグを正しく使うことと、引用してよい範囲を守ることは別の問題です。公開前に、引用元の利用条件や権利、必要な許諾を確認してください。
- 引用する必然性があるか
- 自分の文章と引用文が明確に区別されているか
- 必要以上に長い文章を転載していないか
- 内容を勝手に変更していないか
- 出典名とリンクが正しいか
- 画像や図表についても利用条件を確認したか
引用タグを付ければ、どの文章でも自由に転載できるわけではありません。判断が難しい内容や業務での利用は、公開元のガイドラインや専門家へ確認してください。
引用タグのよくある間違い
字下げのためにblockquoteを使う
blockquoteは余白を作るタグではなく、長い引用を表すタグです。通常の文章を内側へずらしたい場合は、クラスを付けてCSSのmarginやpaddingを使います。
cite属性だけで出典を示したつもりになる
cite属性のURLは、通常の画面には表示されません。読者が引用元を確認できるよう、出典名とクリックできるリンクも本文へ表示します。
qタグの外側へ引用符を重ねる
qはブラウザが引用符を付けるため、HTMLへ同じ引用符を追加すると二重表示になる場合があります。最初にタグだけで確認し、必要なデザイン変更はCSSで行います。
citeタグで引用文全体を囲む
citeは作品名や資料名を表す要素です。引用文はblockquoteまたはqで囲み、作品名だけをciteで示します。
まとめ
長い引用にはblockquote、文中の短い引用にはq、引用元の作品名にはciteを使います。cite属性へURLを指定した場合も、読者が開ける出典リンクを画面上へ表示してください。
まずはfigureの中へblockquoteとfigcaptionを置き、引用文と出典リンクを一つのまとまりとして作ってみましょう。HTMLで意味を示した後にCSSを追加すると、正しく読みやすい引用表示になります。