引用タグをデザインする

他から文章を引用した場合は、
blockquoteタグを使用しますが、
現在、何もスタイルを指定していないので、
blockquoteタグで引用文を追加しても何も装飾がありません。

そこで、今日は引用タグのスタイルを変更してみようと思います。

style.cssにblockquoteのスタイルを追加

blocquoteタグのスタイルをstyle.cssに追加します。
私は、 before擬似要素、after擬似要素を使って、
引用符のマークをつけました。

・before擬似要素・・・要素の直前に内容を挿入
・after擬似要素・・・要素の直後に内容を挿入

あとは、背景色や配置などを自分の好みにあったデザインに調整してあげれば
完成です。
（以下、私が追加したスタイル）

/* 引用 */
blockquote{
    background-color: #ddd;
    padding: 1em 1em 0.5em;
    position: relative;
    border: 2px solid #d7d7d7;
    margin: 0 1em 1.5em;
}

blockquote:before{
    content: "“";
    font-size: 400%;
    line-height: 1em;
    font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif;
    color: #999;
    position: absolute;
    left: 5px;
    top: 0;
}

blockquote:after{
    content: "”";
    font-size: 400%;
    line-height: 0em;
    font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif;
    color: #999;
    position: absolute;
    right: 5px;
    bottom: 0;
}

以下が完成した引用タグのデザインです。

テスト、テスト、テスト、テスト

まとめ

以上、引用タグのデザイン方法でした。
参考になれば幸いです。