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のfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方

    ちょっとしたCSSのTipsです。結構使う機会があるのでメモがてら残し…

  2. Ember Burger Menu

    CSS

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

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

  3. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  4. CSS

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

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

  5. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  6. CSSで可変式ドロップダウンメニュー

    CSS

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

コメント

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

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

最近の記事

  1. サンクラフト ポテトング
  2. iPhone 11 Pro Smart Battery Case(ホワイト)
  3. メイソンピアソン ヘアブラシ
  4. COMOLI ベタシャンCPOシャツ(サックス)

アーカイブ

PAGE TOP