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

catnose · 2019/11/07 に最終更新

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

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

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

このページの目次

blockquoteとqタグの違いは？

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

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

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

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

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

<!-- 🙅ダメ！ -->
<q><p>明日死ぬかのように生きよ。永遠に生きるかのように学べ。</p></q>

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

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

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

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

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

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

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

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

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

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

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

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

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

参考リンク