引用符の設定

引用文の表示に使われているタグには、<blockquote>と<ｑ>要素の２種類があります。

<blockquote>～</blockquote>要素

通常長文を引用する再に使用します。インデント(字下げ)を伴って出力されますが、インデント目的のタグではありません。

<cite>と<title>を使って引用元のURLやタイトル記述ができます。ブロックレベル要素であり、他のブロックレベル要素やインライン要素を使って多様な引用文が作れます。

<html>
 <body>
   <blockquote cite="http://www.bbc.com/news/" title="BBCニュース"><p>Somewhere near Lexington Avenue I snapped. I'd spent three days with a BBC colleague given to uttering sweeping generalisations as breathtaking as a cold winter gust bursting down Broadway.. <from BBC NEWS></p></blockquote>
 </body>  
</html>

上記の引用文で、テキストはインライン要素なので、ブロックレベル要素の</p>～</p>要素で囲んで置く必要があります。

<q>～</q>要素

比較的短い文章の引用で使われます。「quotation」の略で、インライン要素なので、テキストのみ内包可能です。

<q>

<html>
 <body>
 <p>
   <q cite="http://www.bbc.com/news/">Somewhere near Lexington Avenue I snapped.</q>
 <p>
 </body>  
</html>

引用符の設定

2つのプロパティ「content」と「quotes」を紹介します。

content

要素の前後に引用符を追加するプロパティです。疑似要素である「:before と :after 」の組み合わせて設定します。

:before … 要素の直前に対する指定
:after … 要素の直後に対する指定

content属性

属性	値	説明
content	open-quote	開始引用符を挿入する（入れ子の深さに応じた引用符が使用される）
	close-quote	終了引用符を挿入する（入れ子の深さに応じた引用符が使用される）
	no-open-quote	引用符の入れ子の深さを一段階深くする
	no-close-quote	引用符の入れ子の深さを一段階浅くする

<html>
  <head>
    <meta charset="utf-8">
    <title>CSS | quotes</title>
    <style>
      blockquote {
        quotes: "「" "」" "『" "』";
      }
      blockquote p:before {
        content: open-quote;
        }
        blockquote p:after {
        content: no-close-quote;
        }
        blockquote p.last:after {
        content: close-quote;
        }
    </style>
  </head>
 <body>
 <p>
   <q>Somewhere<q>near </q>Lexington Avenue</q> I snapped.</p>
 <p>
 </body>  
</html>

Somewhere near Lexington Avenue I snapped.

I'd spent three days with a BBC colleague given to uttering sweeping generalisations as breathtaking as a cold winter gust bursting down Broadway.

quotes

引用文を囲んでいる引用符の種類を設定するプロパティです。quotesプロパティで設定した引用符はcontentプロパティで使用されます。

quotes属性

属性	値	説明
quotes	none	引用符を表示しません。
	"文字列""文字列"	開始引用符と終了引用符の文字列を2つ指定します。（文字列は引用符で囲みます。）開始引用符と終了引用符の文字列は、「半角スペース」で区切ります。最初の文字列が優先的に表示されます。

sample1

<html>
  <head>
    <meta charset="utf-8">
    <title>CSS | quotes</title>
    <style>
      q {
        quotes: "<" ">" "(" ")";
      }

    </style>
  </head>
 <body>
 <p>
   <q>Somewhere<q>near </q>Lexington Avenue</q> I snapped.</p>
 <p>
 </body>  
</html>

SomewherenearLexington Avenue I snapped.

二重引用符（ " ）の中で二重引用符を指定する場合は、次のようにバックスラッシュ（ \ ）を一緒に付けておきます。

Sample2

<html>
  <head>
    <meta charset="utf-8">
    <title>CSS | quotes</title>
    <style>
      q {
        quotes: "\"" "\"" "'" "'";
      }
    </style>
  </head>
 <body>
 <p>
   <q>Somewhere<q>near </q>Lexington Avenue</q> I snapped.</p>
 <p>
 </body>  
</html>

Somewhere near Lexington Avenue I snapped.