Special Elements - Quotation Element

Q 要素は %special に属するインライン要素です。この要素は任意のインライン要素を子供要素に持ち得ます。

Q 要素に関する Transitional DTD の抜粋；

<!ELEMENT Q - - (%inline;)*            -- short inline quotation -->
<!ATTLIST Q
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI for source document or msg --
  >

短い引用を表す Q 要素には cite 属性が指定できます。この属性値は引用もとの文書を指し示す URL (+ URN) です。引用された元になる文書が WWW 上に存在する場合は必ず明記するように御奨めします。これは一つ以上の段落にまたがる長い引用文を表す BLOCKQUOTE 要素の場合も同様です。

<p>
<cite>セーレン・キルケゴールの「死にいたる病」</cite>によれば、
<q lang="jp">死が希望となるほどに危険が大きいとき、そのときの、
死ぬことさえもできないという希望のなさ</q>
を<q lang="jp">絶望</q>と呼んでいる。
</p>
<p>
そして、このときまさに、<q lang="jp">絶望</q>は<q lang="jp">死にいたる病</q>だと云う。
</p>

Q 要素は引用語句を表すインライン要素で、入れ子関係になる可能性も有ります。引用語句は通常引用符で括られます。規格によれば、ブラウザは Q 要素の開始直後と終了直前に、適切な引用符を自動的に挿入するように定められています。

この規格を適切にサポートしているブラウザは多くありませんが、事実存在しますので、記述者は Q 要素の開始、終了の直前、直後に引用符を記述してはなりません。

間違い；

<q lang="jp">「引用符付き引用語句」</q>

この例では、テキストとして記述済みの引用符と、 Q 要素によって自動的に挿入される引用符とが二重になってしまいます。引用符は言語によって異なりますが、 lang 属性を与えることで適切な引用符が挿入されることが期待されます。

このように自動的に挿入される文字は、 CSS で自由に選ぶ事ができます；

CSS による引用符の自動挿入

CSS2 による自動挿入の制御；

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <title>CSS2 による自動挿入の制御</title>
    <meta http-equiv="content-style-type" content="text/css">
    <style type="text/css">
      <!--
q:before { content: '「' }
q:after { content: '」' }
      -->
    </style>
  </head>
  <body>
    <p>
      <cite>セーレン・キルケゴールの「死にいたる病」</cite>によれば、
      <q lang="jp">死が希望となるほどに危険が大きいとき、そのときの、
      死ぬことさえもできないという希望のなさ</q>
      を<q lang="jp">絶望</q>と呼んでいる。
    </p>
    <p>
      そして、このときまさに、<q lang="jp">絶望</q>は、
      <q lang="jp">死にいたる病</q>だと云う。
    </p>
  </body>
</html>

この文書の全ての Q 要素の直前にかぎカッコ『「』が、直後に閉じるかぎカッコ『」』が自動的に挿入するように指示してあります。

また、このスタイルを適用させる対象を制限するために属性と属性値を利用できます。この場合は、 q[lang="ja"]:before, q[lang="ja"]:after のように指示することになります。

属性値の利用や、 :before, :after は CSS2 で登場したので、現在はサポートするブラウザが殆どありません。従って、他の CSS プロパティを利用した方が安全でしょう；

CSS1 の例；

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <title>CSS1 による見栄えの指定</title>
    <meta http-equiv="content-style-type" content="text/css">
    <style type="text/css">
      <!--
q.jp { font-size: 1.2em; font-weight: bold }
      -->
    </style>
  </head>
  <body>
    <p>
      <cite>セーレン・キルケゴールの「死にいたる病」</cite>によれば、
      <q lang="jp" class="jp">死が希望となるほどに危険が大きいとき、そのときの、
      死ぬことさえもできないという希望のなさ</q>
      を<q lang="jp" class="jp">絶望</q>と呼んでいる。
    </p>
    <p>
      そして、このときまさに、<q lang="jp" class="jp">絶望</q>は、
      <q lang="jp" class="jp">死にいたる病</q>だと云う。
    </p>
  </body>
</html>

この例では、 CSS1 で定義された機能しか利用していません。

class 属性の値が jp である Q 要素に限って、文字の大きさが 1.5 倍にし、太字で表示するように指示しています。