HTML

The <q> element in HTML is an inline element used for indicating short quotations within text, and most browsers automatically add quotation marks when displaying it.

q 要素

q 要素とは？

概要

<q> 要素は、**短い引用（インライン引用）**を示すためのHTML要素です。文中で会話文や短めの引用を示したいときに使用します。例えば、本や記事から特定のフレーズのみを抜粋したり、会話のセリフを引用したりするようなケースです。

<p>彼はこう言いました: <q>明日は必ず成功させてみせるよ</q>。</p>

上記の例では、「明日は必ず成功させてみせるよ」という部分を <q> 要素で囲むことにより、短い引用であることを明示的に表現できます。ブラウザは通常、<q> 要素で囲まれたテキストを自動的にダブルクォーテーションなどで表示する実装になっています（ブラウザや言語設定により異なる）。

blockquoteとの違い

HTMLには<blockquote>要素も存在し、こちらは**長めの引用（ブロックレベル引用）**を示す場合に使われます。<blockquote>は段落（ブロック）として引用文を示すのが目的で、<q>はインライン要素として文章の一部を引用するのが目的です。

<blockquote>

ブロックレベル要素。長い引用、複数行にわたる引用など。

<q>

インライン要素。短い引用、文中の短文やフレーズなど。

<!-- blockquoteの例 -->
<blockquote>
	<p>夢を叶える秘訣は、まず自分を信じること。</p>
</blockquote>

<!-- qの例 -->
<p>
	彼女はこう述べました。<q>自分を信じられない人に成功は訪れない</q>と。
</p>

<q>要素の基本的な使い方

文中での引用に使う

<q>要素はあくまで「短い引用」を表現するものです。文章の途中で引用箇所が発生する場合に利用します。

<p>スティーブ・ジョブズは、<q>ハングリーであれ。愚かであれ</q>という言葉を残しました。</p>

このように、言葉の引用を短く示す際に利用します。

cite属性を使って出典を明示する

<q>要素には、オプションで**cite属性**を指定することができます。これにより、その引用の「出典（URLなど）」を示すことができます。例えば、引用元のWebページや記事へのリンクを付けておくことで、読者や検索エンジンにも情報の正確性を示すことができます。

<p>
	スティーブ・ジョブズは、<q cite="https://example.com/speech">
		ハングリーであれ。愚かであれ
	</q> と言いました。
</p>

cite属性

出典のURLまたは引用先を示すための文字列。必須ではありませんが、引用先を明示できる場合には付けておくと良いでしょう。

インライン要素である点

<q>はインライン要素なので、周囲の文章と同じ行内に配置されます。改行して引用箇所を際立たせたい場合や長めの引用をしたい場合は、<blockquote>の使用を検討してください。

ブラウザによる表示とスタイリング

ブラウザの自動クォーテーション

<q>要素は、ブラウザによっては自動的に引用符（ダブルクォーテーションやフランス語式引用「<< >>」など）が付与される場合があります。これはユーザーのシステムやブラウザの言語設定に依存します。

多くの英語圏設定ブラウザ

"<内容>" のようにダブルクォーテーションで括られる

フランス語圏設定など

«内容» のようにアングルクォートで括られる

日本語環境

通常はダブルクォーテーションがつく場合が多い（ブラウザやスタイル設定による）

カスタマイズ（CSSでの例）

もしブラウザが自動で付けるクォーテーションを変更したい、または自動クォーテーションを無効にしたい場合は、CSSでコントロールできます。例えば、quotesプロパティやcontentプロパティを使用して指定できます。

q {
	quotes: "「" "」" "『" "』";
}

q:before {
	content: open-quote; /* 先頭に設定したquotesの「(もしくは『)」が入る */
}

q:after {
	content: close-quote; /* 末尾に設定したquotesの」(もしくは』)が入る */
}

• quotes : 引用符の対を順番に指定できる。
• open-quote / close-quote : quotesで指定した記号を挿入。
• ブラウザによっては既定の動作を上書きする必要があることも。

<q>要素がネストされる（入れ子になる）場合は、CSSで追加のペアを定義して順次使われるように調整できます。

<q>要素の正しい使い分けと注意点

引用内容が長い場合

「引用のテキストが長い場合でも<q>を使ってもいいのか？」という疑問が生じるかもしれません。一般的には、2行以上になる、あるいは段落レベルの引用は<blockquote>を使う方がセマンティクス的にも適切です。あくまで短い引用である場合に<q>を使用しましょう。

ネストされた引用

会話のやり取りなどで、引用の中にさらに引用が登場する（入れ子になる）ことがあります。その場合には、ネストして<q>を使うことも可能です。ただし、ブラウザがデフォルトでネストされた引用に対してどのようにクォーテーションをつけるかは言語設定やCSSによって異なります。必要に応じてCSSでスタイルを調整するとよいでしょう。

<p>
	彼女はこう言いました: <q>昨日彼から「<q>明日は晴れる</q>って言ってたけど本当かしらね？」と聞かれたの</q>。
</p>

• このようにネストすると、ブラウザは外側のクォートと内側のクォートを適宜切り替えて表示する場合があります。
• ただし、可読性が落ちやすいので、情報が複雑になる場合は単純な文章構造に書き換えるのも一つの方法です。

スクリーンリーダーやアクセシビリティへの配慮

音声読み上げソフトなどでは、<q>要素だからと言って「引用符がある」ことを必ずしも音声で読み上げるわけではありません。支援技術によっては引用であることを伝える可能性もありますが、その動作は一定ではありません。引用であることをより明確に伝えたい場合は、前後の文章表現やaria-labelなどを駆使することも検討してください。

実践的なコード例

基本的な文中引用

<p>
	アインシュタインは、
	<q cite="https://example.com/albert-einstein-quotes">
		想像力は知識よりも重要だ
	</q>
	という言葉を残しています。
</p>

ネストされた引用を含む例 + CSSカスタマイズ

<p>
	彼はこう言いました:
	<q>
		昨日、上司が「
		<q>このプロジェクトは来月までに完了させよう</q>
		」と強く言っていたよ
	</q>
	。
</p>

/* ネストされた引用符を日本語に合わせて調整する例 */
q {
	quotes: "「" "」" "（" "）";
}
q:before {
	content: open-quote;
}
q:after {
	content: close-quote;
}
/* 可読性を高めるためにインライン要素に色をつける例 */
q {
	color: #007acc;
	font-weight: bold;
}

• ここでは、CSSのquotesプロパティを使って日本語の括弧に置き換える例を示しています。外側が「」で、内側が（）になる設定です。

アクセシビリティ考慮 + 出典付きの例

<p>
	先日の記者会見で、著名な研究者が
	<q cite="https://example.com/research-interview" aria-label="科学分野での発言">
		新しい研究成果は社会に大きな影響を与える可能性がある
	</q>
	と述べています。詳しくは
	<a href="https://example.com/research-interview">こちらのインタビュー記事</a>
	を参照してください。
</p>

• aria-labelを使うことで、スクリーンリーダーなどに対して引用文に説明を付与することができます。
• cite属性で出典のURLを明示しつつ、別途リンクも用意するとユーザーがよりアクセスしやすくなります。

まとめと発展的なポイント

• 短い引用を行いたい場合は<q>を使うことでHTMLのセマンティクスを正しく表現できる
• ブラウザは自動的に引用符を付与する場合があるが、必ずしも言語に合うとは限らないので、必要に応じてCSSでカスタマイズする
• 長い引用（段落レベル）には<blockquote>を使うのが一般的
• cite属性を使うことで出典を明示できるが、アクセシビリティの観点からはユーザーが必要な情報にアクセスしやすい形でリンクや注釈を入れることが望ましい
• ネストされた引用には注意が必要で、CSSの設定で可読性や視認性を確保する
• アクセシビリティ向上のためにaria-labelなどを併用することも検討するとよい

国際化・多言語サイトでの注意

多言語サイトを運営している場合、ユーザーの言語設定が異なると、自動引用符のスタイルが変化する可能性があります。意図しない引用符が表示されることを避けたい場合は、早い段階でCSSを使って明示的に指定しておくことが重要です。

レスポンシブデザインとの絡み

<q>はインライン要素なので、レスポンシブデザインにおいてレイアウトが崩れるようなことはあまりありません。ただし、文字サイズの拡大縮小やスタイリングでの変更に応じて引用符も適切に表示されるよう、emやremなど相対的な単位で設定するとより柔軟です。

マークアップとSEO

引用タグ（<q>や<blockquote>）を正しく使うことで、コンテンツの構造をきちんと示せます。検索エンジンによっては引用文が正しくマークアップされていることを評価する場合もあります。過度なSEO効果は期待できないかもしれませんが、正しい構造化は可読性とアクセシビリティ向上につながり、結果として評価を高める可能性があります。

最後に

HTML5からセマンティクスがより重視されるようになり、<q>や<blockquote>のように役割が明確化された要素を正しく使うことは、Webページ全体の品質向上にもつながります。初心者の方はまず「短い引用は<q>、長い引用は<blockquote>」という基本ルールをおさえ、中級者以上の方はCSSでの引用符スタイリングやアクセシビリティ対応、出典を明示するcite属性の活用なども検討するとよいでしょう。

<q>要素は小さく地味な存在にも思えますが、「どこからどこまでが引用なのか」「その引用をどこから引用したか」という文書構造を明確に示す上では重要な役割を果たします。うまく活用して、セマンティクスに優れたWebページを作りましょう。