qタグ -短い引用を示す｜HTML辞典

<q>タグとは？

<q> タグは、短い引用を示すためのタグです。
ブラウザは <q> で囲まれたテキストの前後に自動で引用符（”” や「」）を追加します。

コンテンツモデル

フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。

閉じタグの有無

<q> は 開始タグ（<q>）と閉じタグ（</q>）の両方が必要 です。

基本的な記述方法

<p>彼は <q>成功の秘訣は努力だ</q> と言った。</p>

使用できる主な属性

属性名	説明	例
cite	引用元の URL を指定	<q cite="https://example.com">引用文</q>

cite の使用例

<p>シェイクスピアは <q cite="https://example.com">この世は舞台、人はみな役者</q> と言った。</p>

CSSを使ったデザイン変更

<q> のデフォルトのスタイルは 前後に引用符が追加 されますが、スタイルをカスタマイズできます。

q {
    font-style: italic;
    color: blue;
}

適切な使用例

✅ 短い引用を示す

<p>先生は <q>継続は力なり</q> と言いました。</p>

✅ cite を使用して引用元を示す

<p>ある研究によると <q cite="https://example.com/study">適度な運動が健康に良い</q> ことが分かっています。</p>

適切でない使用例（誤った使い方）

❌ <q> を長い引用に使用する（長文引用には <blockquote> を使う）

<!-- NG: 長い引用を <q> で囲む -->
<q>成功する秘訣は、毎日努力を積み重ねること。そしてそれを続けることが最も大切だ。</q>

✅ 正しい書き方（長い引用には <blockquote> を使用）

<blockquote>
    <p>成功する秘訣は、毎日努力を積み重ねること。そしてそれを続けることが最も大切だ。</p>
</blockquote>

❌ <q> の前後に手動で引用符を追加する（ブラウザが自動で追加する）

<!-- NG: 二重の引用符 -->
<p>彼は "<q>成功の秘訣は努力だ</q>" と言った。</p>

✅ 正しい書き方（<q> で囲むだけでOK）

<p>彼は <q>成功の秘訣は努力だ</q> と言った。</p>

<q>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<q>	短い引用を示す	自動で引用符が付く	短い言葉やフレーズの引用
<blockquote>	長い引用を示す	ブロック全体の引用	複数行の引用文
<cite>	出典を示す	書籍や記事のタイトルを表す	著作物の出典表記

使用上の注意点

✅ <q> は短い引用のみに使用する

• 長い引用には <blockquote> を使用するのが適切。

✅ cite を活用して引用元を示す

• 文章の出典がある場合は cite 属性を設定すると明確になる。

✅ lang 属性を使って適切な引用符を適用する

• 日本語のサイトでは「」の引用符、英語では “” の引用符が適用される。

関連タグ

• <blockquote> – 長い引用を示す
• <cite> – 出典を示す
• <abbr> – 略語を説明する

まとめ

<q> タグは、HTML 文書内で 短い引用を示すためのタグ です。
適切に使用すると、引用文の視認性を向上させ、SEO やアクセシビリティの向上に役立ちます。