◀ 4.

HTML q要素（インライン引用 / blockquote との違い / cite属性の使い方）

▶
編集
この記事の要点
  • はインライン（短い）引用を表す意味タグ。文章の途中に差し込む形で使う
  • ブラウザが自動で引用符（日本語環境は「」、英語環境は ""）を付けてくれる
  • 長文・段落単位の引用は
    、短いインライン引用は という棲み分け
  • cite 属性に出典 URL を書ける（画面には出ないが、機械可読なメタデータになる）
  • 見た目だけ引用符が欲しいなら直接「」を書く方がシンプル。意味付けが必要なら

q 要素とは

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

基本構文

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

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

cite 属性 — 出典 URL

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

仕様書では 
  The q element represents some phrasing content quoted from another source.
 と定義されている。

blockquote との違い

引用を表す要素は と

の 2 つで、長さ・位置で使い分けます。

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

CSS で引用符をカスタマイズ

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

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

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

使うべきでないケース

  • 強調したい単語を囲みたいだけ — 引用ではないので や を使う。
  • 専門用語の初出 — が適切。
  • UI のラベル風に括弧で囲みたい — 引用ではないので素直に「」を書く方が読みやすい。

よくある質問

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

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

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

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-11 05:44:46 guest 193

人気ページ

最近更新/作成されたページ