概要へ移動

このページで解説するコードの実行結果。（タイトルの文字列をクリックすると、コードに移動）

クォート
ここは一重です。
ここは 二重 です。
日本語
ここは一重です。
ここは 二重 です。
英語
ここは一重です。
ここは 二重 です。
ドイツ語
ここは一重です。
ここは 二重 です。
絵文字
ここは一重です。
ここは 二重 です。
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
div {

    border:     1px solid blue;  /*  境界線 */

    margin:     5px;             /*  外側の余白 */

    padding:    5px;             /*  内側の余白 */

    font-size:  2em;             /*  文字の大きさ */

}



span {

    color:      red;

}
HTML : 適用するHTML
<div class="sample">

    ここは一重です。

</div>



<div class="sample">

    ここは

    <span class="sample">

        二重

    </span>

    です。

</div>
実行結果
ここは一重です。
ここは 二重 です。
テンプレート
CSS : テンプレート
.sample {

    quotes:     '"' '"' "'" "'";        /* クォート */

    /*

        quotes: '\300C' '\300D' '\300E' '\300F';    // 日本語

        quotes: '\201C' '\201D' '\2018' '\2019';    // 英語

        quotes: '\201E' '\201C' '\201A' '\2018';    // ドイツ語

    */

}

.sample::before {

    content:    open-quote;

}

.sample:after {

    content:    close-quote;

}

quotesの概要

引用符の記号を指定する。

一重引用符

引用記号を「""」にする場合。

quotesに「'"' '"'」を設定する。 前の'"'がopen-quote、後ろがclose-quoteになる。

しかし、これだけだと実行結果は変わらない。

CSS : quotes
.sample {

    quotes:     '"' '"';

}
実行結果
ここは一重です。
ここは 二重 です。

::beforeと::afterの疑似要素を使う。

::beforeにopen-quote、::afterにclose-quoteを設定する。

CSS : open-quote, close-quote
.sample {

    quotes:     '"' '"';

}

.sample::before {

    content:    open-quote;

}

.sample:after {

    content:    close-quote;

}
実行結果
ここは一重です。
ここは 二重 です。

引用符が設定された。

多重引用符

上記の例では、二重の.sampleクラスで囲まれた「二重」の引用符が、一重の引用符と同じ""になっており分かりにくい。（この例では赤になっているので分かりやすいけど）

そこで、二重引用符の場合は、異なる引用符''を使うように変更する。

二重引用符の指定は、第三引き数と第四引き数で行う。

CSS : 二重引用符
.sample {

    quotes:     '"' '"' "'" "'";

}

.sample::before {

    content:    open-quote;

}

.sample:after {

    content:    close-quote;

}
実行結果
ここは一重です。
ここは 二重 です。

三重以降も同様にできる。

CSS : auto
.sample {

    quotes: '"' '"' "'" "'" '“' '”';

}

.sample::before {

    content: open-quote;

}

.sample:after {

    content: close-quote;

}
HTML : 適用するHTML
<div class="sample">

    一重

    <span class="sample">

        二重

        <span class="sample">

            三重

        </span>

    </span>

    です。

</div>
実行結果
一重 二重 三重 です。

日本語の場合

一重引用符を「」、二重引用符を『』にする場合。

CSS : auto
.sample {

    quotes:     '「' '」' '『' '』';

}

.sample::before {

    content:    open-quote;

}

.sample:after {

    content:    close-quote;

}
実行結果
ここは一重です。
ここは 二重 です。

文字コードでも指定できる。

CSS : auto
.sample {

    quotes:     '\300C' '\300D' '\300E' '\300F'; 

}

.sample::before {

    content:    open-quote;

}

.sample:after {

    content:    close-quote;

}
実行結果
ここは一重です。
ここは 二重 です。

英語の場合

CSS : auto
.sample {

    quotes:     '\201C' '\201D' '\2018' '\2019'; 

}

.sample::before {

    content:    open-quote;

}

.sample:after {

    content:    close-quote;

}
実行結果
ここは一重です。
ここは 二重 です。

ドイツ語の場合

CSS : auto
.sample {

    quotes:     '\201E' '\201C' '\201A' '\2018'; 

}

.sample::before {

    content:    open-quote;

}

.sample:after {

    content:    close-quote;

}
実行結果
ここは一重です。
ここは 二重 です。

ロシア語の場合

CSS : auto
.sample {

    quotes:     '\00AB' '\00BB' '\201E' '\201C'; 

}

.sample::before {

    content:    open-quote;

}

.sample:after {

    content:    close-quote;

}
実行結果
ここは一重です。
ここは 二重 です。

絵文字を使ってみる

※ 絵文字はやめた方がいいと思う。

CSS : auto
.sample {

    quotes:     '🙈' '🙉' '😸' '😺'; 

}

.sample::before {

    content:    open-quote;

}

.sample:after {

    content:    close-quote;

}
実行結果
ここは一重です。
ここは 二重 です。

Emmet : q

記述Visual Studio Code
qquotes: ;
qequotes: '\201C' '\201D' '\2018' '\2019'; ← 英語
qrquotes: '\00AB' '\00BB' '\201E' '\201C'; ← ロシア語