引用タグの引用符をcssで完璧にデザインする方法

引用タグをcssでデザインする方法

引用タグの引用符「”」をcssで表現する方法をメモ。

ブログだと引用タグ(blockquote)を使うことは多いんじゃないかなと思いますが画像でデザインしているサイトを多くみます。
ですがレスポンシブサイトを作成するときはcssで作ってしまったほうが利点が大きいと思います。

引用タグの引用符をcssで完璧にデザインする方法

blockquote{
    position: relative;
    margin: 0 1em 1.5em;
    padding-top: 45px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;	
    border: 2px solid #CCCCCC;
    background-color: #F2F2F2;
    z-index: 1;
}
 
blockquote p{
    position: relative;
    z-index: 3;
}
 
blockquote:before{
    content: "“";
    font-size: 1000%;
    line-height: 0.8em;
    font-family: 'Times New Roman' ,"MS Pゴシック" ,sans-serif;
    color: #CCCCCC;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
blockquote:after{
    content: "”";
    font-size: 1000%;
    line-height: 0em;
    font-family: 'Times New Roman' ,"MS Pゴシック" ,sans-serif;
    color: #CCCCCC;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

これで

こういう風になります。
引用符CSSデザインサンプル
blockquote:afterを削除することで最後の「”」を削除することができます。

paddingなどはお好みに合わせて調節してくださいね。
それではまたxD


コメントを残す

メールアドレスが公開されることはありません。