CSS

よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる

blockquoteのデザインって色んなパターンがあって面白いですよね。比較的よく見られるパターンの一つとしては、左上と右下にダブルクォーテーションをつけているのなんかが結構あります。で、画像とか作るのが面倒くさかったりしちゃう人はCSSだけでそれなりのものを作ってみるっていうのもアリなのかなと思ったりもします。なので、今回はそれを作ってみました。

[ads_center]

CSSでblockquoteをデザイン

ダブルクォーテーションは疑似要素の :before、:afterを使用してcontentで挿入しています。配置に関してはpositionやline-heightで調整していけばなんとか目的の場所に収まるんじゃないかなーと思います。以下サンプルです。

サンプル

sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext

IE6,7は :beforeと:afterに対応していないのでダブルクォーテーションは表示されないです。それ以外はちゃんと表示されました。まあ別にダブルクォーテーションが表示されなくても内容がわかれば特に問題はないと思いますので許容範囲内ではないでしょうか。ということで以下コードです。

CSS

blockquote {
    font-size: 13px;
    font-style: italic;
    width: 500px;
    margin: 20px;
    padding: 50px;
    background: #d9d9d9;
    color: #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #ccc;
}
blockquote:before {
    content: "”";
    font-size: 40px;
    font-weight: bold;
    text-align: left;
    line-height: 40px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    left: 20px;
}
blockquote:after {
    content: "”";
    font-size: 40px;;
    font-weight: bold;
    text-align: left;
    line-height: 60px;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

ダブルクォーテーションの位置調整する時は、その時だけ :beforeと:after にbackgroundを指定すると調整しやすかったです。こんな感じで。

sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext sampletext

関連記事

  1. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

  2. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  3. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

  4. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

  5. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

  6. Animated Transition Effects

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. F7U070bt
  2. 生きている玄米と玄米酵素ブレンド雑穀
  3. BOOST↑CHARGE Apple Watch用モバイルバッテリー

アーカイブ

PAGE TOP