blockquote q 引用符をデザインコピペで使えるHTML+CSS

引用する際に用いるblockquote要素とq要素について、CSSのセレクターである::after、::before、及びtransformプロパティでrotate()関数を用いて独自の引用符を実装します。

引用符をデザインする
1. blockquote要素の引用符
2. q要素の引用符
対象要素の概要
1. blockquote要素
2. q要素
使用するCSSの概要
1. ::beforeと::after 疑似要素
2. transform プロパティ, rotate()関数

引用符をデザインする

引用符を表記するために、:before :afterを用いて、“ (ダブルクォーテーションマーク)を表示する方法をとります。もちろん、“ 以外の文字や文字列を指定することもできます。

blockquote要素の引用符

春はあけぼの。やうやう白くなりゆく　山際、少し明かりて、紫だちたる雲の細くたなびきたる。

スタイルシートで記述

<blockquote style="blockquote-mark">春はあけぼの。やうやう白くなりゆく　山際、少し明かりて、紫だちたる雲の細くたなびきたる。</blockquote>

.blockquote-mark:before{ /*  左上に表記する引用符について　*/
    top:5px; /* 引用符を表記する位置を設定します。 上からの距離*/
    left:0px; /* 同じく左からの距離 */
    content: "“"; /*  “ を引用符として表示  */
    line-height: 1;
}
.blockquote-mark:after{ /* 右下に表記する引用符について　*/
    bottom:8px;/* 下からの距離 */
    right:0px;  /* 右からの距離 */
    content: "“";
    line-height: 1;
    transform: rotate(-180deg); /* 引用符を180度回転させます */
}

q要素の引用符

blockquoteと同じく、:before :afterを用いて、“ (ダブルクォーテーションマーク)を表示する方法をとります。もちろん、“ 以外の文字や文字列を指定することもできます。

古典の名作である枕草子の書き出しは春はあけぼのです。

スタイルシートで記述

古典の名作である枕草子の書き出しは<q class="q-style">春はあけぼの</q>です。

.q-style:before{ /*  左上に表記する引用符について　*/
    top:5px; /* 引用符を表記する位置を設定します。 上からの距離*/
    left:0px; /* 同じく左からの距離 */
    content: "“"; /*  “ を引用符として表示  */
    line-height: 1;
}
.q-style:after{ /* 右下に表記する引用符について　*/
    top:5px;/* 下からの距離 */
    right:0px;  /* 右からの距離 */
    content: "“";
    line-height: 1;
}