quotes【引用符】

メモ 構文 例 関連

メモ

  • content【コンテンツ】プロパティの open-quote【開始引用符】 ・close-quote【終了引用符】の指定で使用
  • 【開始引用符】 と 【終了引用符】の対を定義
    • 入れ子の引用符を外側から順に指定
    • 指定数より深い入れ子は、最後の定義を使用
  • 文字参照等の指定方法は、 《string【文字列】》 を参照

構文 (※記述方法)

プロパティ値備考
quotes:     [ 《string【文字列：開始引用符】》 《string【文字列：終了引用符】》 ]+
| none【引用符なし】 		開始引用符 と 終了引用符 の対
 

例

<style>
.ex1 { quotes: "【" "】" "『" "』" "「" "」"; }
.ex1:before { content: open-quote; }
.ex1:after  { content: close-quote; }

.ex2 { quotes: "【[1]" "[1]】" "『[2]" "[2]』" "「[3]" "[3]」"; }
.ex2:before { content: open-quote; color: red; }
.ex2:after  { content: close-quote; color: blue; }

.ex3 { quotes: "【[A]" "[A]】" "『[B]" "[B]』" "「[C]" "[C]」"; }
.ex3 span:before { content: open-quote; color: red; }
.ex3 span:after  { content: close-quote; color: blue; }
</style>

<p><span class="ex1">あいうえお<span class="ex1">かきくけこ<span class="ex1">さしすせそ</span></span></span></p>

<p><span class="ex2">あいうえお<span class="ex2">かきくけこ<span class="ex2">さしすせそ</span></span></span></p>

<p><span class="ex3"><span>あいうえお</span><span>あいうえお<span>かきくけこ<span>さしすせそ<span>たちつてと<span>なにぬねの</span></span></span></span></span></span></p>

あいうえおかきくけこさしすせそ

あいうえおかきくけこさしすせそ

あいうえおあいうえおかきくけこさしすせそたちつてとなにぬねの