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

スポンサーリンク

引用する際に用いるblockquote要素とq要素について、CSSのセレクターである::after、::before、及び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;
}

対象要素の概要

blockquote要素

blockquote 段落単位の引用 コピペで使えるHTML+CSS
他から文書を引用する場合に用いるblockquote要素についてcite属性と共に解説します。

q要素

q 語句単位の引用 コピペで使えるHTML+CSS
q要素は他から文書を引用する場合に用いる。blockquoteと違って短い単位での引用に用いる。cite属性についても解説。

使用するCSSの概要

::beforeと::after 疑似要素

::before と ::after 疑似要素 要素の前後に挿入 コピペで使えるHTML+CSS
要素の前に表示する::beforeセレクター、要素のあとに表示する::afterセレクター。どのような仕組みか。どのように使用するかを具体例とともに解説。

transform プロパティ, rotate()関数

transform 要素を変形するコピペで使えるHTML+CSS
要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。