qタグ 👉 インラインで引用する

HTMLの<q>クォートタグは、引用した文章を表します。段落をまたがない短い引用文のために使います。

<p>エジソンは<q>天才とは、1%のひらめきと99%の努力である</q>と言いました。</p>

👆この例だと「天才とは、1%のひらめきと99%の努力である」が引用であることが分かります。

blockquoteとqタグの違いは?

<blockquote>ブロッククォートタグも同じく、内容が引用した文章であることを表します。これらの違いは、以下のようになります。

段落全体が引用ならblockquoteタグ

<blockquote>は、従来の「ブロックレベル要素」にあたります。段落の文章全体が引用であれば、こちらを使います。以下のように、段落ごと<blockquote>の中に入れるような使い方をします。

<p>ガンジーは、次のように言いました。</p>
<blockquote>
  <p>明日死ぬかのように生きよ。永遠に生きるかのように学べ。</p>
</blockquote>

段落の一部が引用ならqタグ

<q>は従来のインライン要素にあたります。段落の一部が引用文なら<q>を使います。

<p>エジソンは<q>天才とは、1%のひらめきと99%の努力である</q>と言いました。</p>

以下のように<q>の中に段落を含める使い方は間違いなので、しないようにしましょう。

間違った使い方
<!-- 🙅ダメ! -->
<q><p>明日死ぬかのように生きよ。永遠に生きるかのように学べ。</p></q>

qタグのスタイルをCSSで変える

<p>エジソンは<q>天才とは、1%のひらめきと99%の努力である</q>と言いました。</p>

👆主要ブラウザでは、デフォルトで<q>の前後に引用マーク(")がつくようになっています。この引用マークはCSSの疑似要素(:before:after)により表示されています。

qの前後の引用マークを変える

この引用マークはCSSで簡単に上書きできます。例えば代わりにカギカッコを使う場合には、以下のようなCSSを指定します。

q {
  font-weight: bold; /* 太字に */
}
q:before {
  content: '「'; /* qの前を「に */
}
q:after {
  content: '」'; /* qの後を」に */
}

cite属性で引用元の「URL」を示す

Webページの文章を引用するときには、そのページのURLを<q>タグのcite属性に指定することができます。これは必須ではありません。

<p>Googleが掲げる10の事実に<q cite="https://www.google.com/about/philosophy.html">スーツがなくても真剣に仕事はできる</q>というものがあります。</p>

👆この例のように<q cite="引用元のURL">となります。cite属性のURLは検索エンジンなどのロボット(プログラム)のためのもので、ページには表示されません。言い換えると、このURLは読者の目に入りません。

リンクを貼った方が親切?

とはいえ、読者がそのページを見に行けるように、リンクを貼ったほうが親切かもしれません。

<p><a href="https://www.google.com/about/philosophy.html">Googleが掲げる10の事実</a><q>スーツがなくても真剣に仕事はできる</q>というものがあります。</p>

👆cite属性を指定せずに、単純にリンクタグ<a>を使っても良いでしょう。実際には、リンクを貼った方が引用元にSEOの効果があるため、喜んでもらえるはずです。

参考リンク