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

JavaScriptの配列操作をメモがてら整理してまとめてみる前のページ

CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた次のページ

関連記事

  1. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  2. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

  3. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  4. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  5. CSS

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

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

  6. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP