<q> - 引用文

qは、引用文をマークアップするための、インライン要素のタグです。ブロックを用意して引用文を表示するのではなく、段落の文章内の一定範囲で引用をしたい場合に有用です。引用元のURLアドレスがある場合、cite属性で指定することができます。qというタグ名は、quotedから来ています。

説明

cite
qタグで囲んだ引用文の、引用元のURLアドレスを指定する。

下記は、文章の中でMr.Childrenの歌詞を引用した例です。

HTML

<p>名もなき詩に、<q>知らぬ間に築いてた自分らしさの檻の中でもがいてる</q>という歌詞があり、私はこの表現が好きだ。</p>

名もなき詩に、知らぬ間に築いてた自分らしさの檻の中でもがいてるという歌詞があり、私はこの表現が好きだ。

ウェブ上に存在するドキュメントから引用する場合、cite属性にそのページへのURLアドレスを指定しましょう。下記は、あるユーザーのTwitterでの発言を引用したものです。この場合、cite属性にはツイートの個別ページのURLアドレスを指定するとよいでしょう。

HTML

<p>ウェブサイトを運営する人は、大体の人がアクセス数を上げたい。m...nさんが昨夜、Twitterでつぶやいていた<q cite="...">俺のウェブサイトを評価しない検索エンジンは間違っている</q>という、怒りを伴った言葉は、その気持ちの現れなのかもしれない。</p>

ウェブサイトを運営する人は、大体の人がアクセス数を上げたい。m...nさんが昨夜、Twitterでつぶやいていた俺のウェブサイトを評価しない検索エンジンは間違っているという、怒りを伴った言葉は、その気持ちの現れなのかもしれない。

引用符を付けるために使わない

qタグは、引用文をマークアップするためのタグであって、テキストに引用符を付けるためのタグではありません。下記のように、デザイン目的で強調したい言葉にqタグを使うのは間違っています。

HTML

<p>私の100メートル走のタイムが、なんと<q>1秒</q>も上がった。<q>増えた</q>ともいう。ものは言い様だ。</p>

私の100メートル走のタイムが、なんと1秒も上がった。増えたともいう。ものは言い様だ。

引用文じゃないテキストに引用符を付けたいのなら、スタイルシートで、qタグの標準のスタイルをコピーしましょう。例えば、下記はspanタグで引用符を実装したものです。

HTML

<p>私の100メートル走のタイムが、なんと<span class="aaa">1秒</span>も上がった。<span class="aaa">増えた</span>ともいう。ものは言い様だ。</p>

CSS

.aaa:before {
	content: open-quote ;
}

.aaa:after {
	content: close-quote ;
}

私の100メートル走のタイムが、なんと1秒も上がった。増えたともいう。ものは言い様だ。

概要

カテゴリー
  • Flow content (フロー・コンテンツ)
  • Phrasing content (フレージング・コンテンツ)
  • Palpable content (パルパブル・コンテンツ)
コンテンツモデル
フレージングコンテンツ
利用できる場所
フレージングコンテンツが期待される場所で使用できます。
利用できる属性
グローバル属性
許可されている、全てのグローバル属性を指定できます。
cite
qタグで囲んだ引用文の、引用元のURLアドレスを指定する。
タグの省略
qタグは、開始タグ、終了タグ、共に省略することはできません。
標準のスタイル
q {
	display: inline ;
}

q:before {
	content: open-quote ;
}

q:after {
	content: close-quote ;
}

参考情報

q要素に関する情報は、下記サイトで確認できます。

  • W3C … W3CによるHTML5勧告。qの項目。
  • HTML language reference … W3Cによるqのリファレンス。
  • WHATWG … WHATWGによる仕様書、HTML Living Standard。q要素の仕様。