← カテゴリ一覧に戻る

引用

blockquote, q, cite

外部ソースからの引用を意味的にマークアップする要素。blockquote はブロックレベルの長い引用、q はインラインの短い引用、cite は作品のタイトルや出典を示す。

blockquote — ブロック引用

blockquote は段落やリストなど複数の要素を含む長い引用に使う。cite 属性に引用元URLを指定できる（スクリーンリーダーや検索エンジン向け）。

通常テキストの後に引用が続く例：

The blockquote element represents a section that is quoted from another source. Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

— W3C HTML Specification

「シンプルさは究極の洗練である。」

— レオナルド・ダ・ヴィンチ
<blockquote cite="https://example.com/source">
  <p>引用テキストをここに記述します。複数の段落も含められます。</p>
  <footer>— <cite>出典名</cite></footer>
</blockquote>

/* CSS でスタイリング */
blockquote {
  border-left: 4px solid #6366f1;
  padding-left: 1rem;
  font-style: italic;
  color: #374151;
}

q — インライン引用

q 要素は文中に埋め込む短い引用に使う。ブラウザが自動的に引用符（日本語環境では「」など）を付与する。ネストすると内側の引用符が変わる。

スティーブ・ジョブズは Stay hungry, stay foolish. と述べた。

彼女は彼が明日また来ると言っていたと報告した。（ネストした引用）

※ ブラウザのデフォルトで引用符が自動付与される

<p>
  彼は <q cite="https://example.com">元気です</q> と答えた。
</p>

/* ネスト: 内側の引用符は自動で変わる */
<q>彼が<q>明日来る</q>と言った</q>

/* CSS でカスタム引用符 */
q { quotes: "「" "」" "『" "』"; }
q::before { content: open-quote; }
q::after  { content: close-quote; }

cite 要素 — 作品タイトル

<cite> 要素は書籍・映画・楽曲・ウェブサイトなど「作品のタイトル」をマークアップする。デフォルトでイタリック体で表示される。人名には使わない。

吾輩は猫である は夏目漱石の代表作の一つです。

映画 君の名は。 は2016年に公開された新海誠監督の作品です。

詳細は MDN Web Docs を参照してください。

<p><cite>吾輩は猫である</cite> は夏目漱石の代表作です。</p>
<p>映画 <cite>君の名は。</cite> は2016年公開です。</p>

/* cite はデフォルトで italic */
cite { font-style: italic; }

比較表: blockquote / q / cite 要素

要素種別用途属性デフォルト表示
blockquoteブロック長い引用（複数段落可）cite（URL）インデント付き
qインライン短いインライン引用cite（URL）自動引用符付与
citeインライン作品タイトル・出典名なしイタリック体

Tips: cite 属性 vs cite 要素

  • cite 属性（blockquote cite="URL"、q cite="URL"）：引用元の URL をメタデータとして指定。ブラウザには表示されないが、検索エンジンやスクリーンリーダーが利用できる。
  • cite 要素（<cite>タイトル</cite>）：作品のタイトルをビジュアルにマークアップする。blockquote の footer 内で出典を表示するためによく使われる。
  • cite 要素に人名を使うのは仕様上誤り。人名は <span> などを使うこと。
  • blockquote の左ボーダースタイルはブラウザデフォルトにはないため、CSS で明示的に指定するのが一般的。

🤖 AIプロンプトテンプレート

以下の要件を満たす、`<blockquote>` と `<cite>` を使った引用文のHTML・CSSサンプルを作成してください。

- `<blockquote cite="URL">` で出典URLを属性として記述すること
- `<footer>` と `<cite>` を組み合わせて出典情報を表示すること
- `cite` 要素には人名ではなく作品タイトルを使うこと（仕様に準拠）
- CSS で左ボーダーを使った引用スタイルを実装すること
- インライン引用 `<q>` との使い分けも示すこと

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo