cite属性の使い方）

▶

この記事の要点

q 要素とは

<q> は HTML のインライン引用 (inline quotation) を表す意味タグです。文章の途中で「誰かの発言や別の文献から短く引用する」場面に使います。ブラウザは中身を引用符で自動的に囲んで表示します。

<p>アインシュタインは <q>God does not play dice.</q> と語ったとされる。</p>

表示はブラウザの言語設定に応じて、英語環境なら "God does not play dice."、日本語環境なら 「God does not play dice.」 のように引用符が自動付与されます。

cite 属性で引用元の URL を指定できます。画面には表示されませんが、検索エンジンや支援技術がメタデータとして読み取れます。

<p>仕様書では <q cite="https://html.spec.whatwg.org/">
  The q element represents some phrasing content quoted from another source.
</q> と定義されている。</p>

引用を表す要素は <q> と <blockquote> の 2 つで、長さ・位置で使い分けます。

要素	長さ	カテゴリ	引用符	典型用途
`<q>`	短い（1 文程度）	インライン	ブラウザが自動付与	本文中に挟む発言・フレーズ
`<blockquote>`	長い（段落以上）	ブロック	自動付与なし（CSS や手動で）	段落丸ごとの引用、長い文章の抜粋

ブラウザのデフォルト引用符を変えたい場合は quotes プロパティでスタイル指定します。

q {
  quotes: "\201C" "\201D" "\2018" "\2019";  /* “ ” ‘ ’ */
}
q::before { content: open-quote;  }
q::after  { content: close-quote; }

ネストした引用（引用の中の引用）も quotes プロパティの 2 組目以降で制御できます。

Q: q を使うと自動で「」が付くのが二重になる
A: 「」を手書きせず、<q> の中身だけ書くのが正しい使い方です。引用符付与は <q> の役割なので二重になりません。

Q: cite 属性は SEO に効くの？
A: 直接的なランキング要素ではありませんが、Google などの検索エンジンが「この文章は他サイトからの正当な引用」と認識する手がかりになります。コピーコンテンツ判定を避ける意味で書いておくと安心。

Q: 日本語の引用に q は使える？
A: 使えます。ただし日本語の場合は本文中に直接「」を書く方が読みやすいケースも多いので、機械可読性が要らないなら無理に使う必要はありません。

子ページ

子ページはありません

同階層のページ

2026-06-11 07:29:05 guest 201