blockquoteのデザインって色んなパターンがあって面白いですよね。比較的よく見られるパターンの一つとしては、左上と右下にダブルクォーテーションをつけているのなんかが結構あります。で、画像とか作るのが面倒くさかったりしちゃう人はCSSだけでそれなりのものを作ってみるっていうのもアリなのかなと思ったりもします。なので、今回はそれを作ってみました。 [ads_center] CSSでblockquoteをデザイン ダブルクォーテーションは疑似要素の :before、:afterを使用してcontentで挿入しています。配置に関してはpositionやline-heightで調整していけばなんとか目的の場所に収まるんじゃないかなーと思います。以下サンプルです。 サンプル sampletext sampletext sampletext sampletext sampletext sample
![よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる – bl6.jp](https://cdn-ak-scissors.b.st-hatena.com/image/square/4b00ef75c9ddf9edae3e8a42d7791005c6b3c7db/height=288;version=1;width=512/https%3A%2F%2Fbl6.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F03%2Fblockquote-only-css-db-quotes.png)