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の:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  2. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

  3. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

  4. Animated Transition Effects
  5. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

  6. CSS

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

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

コメント

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

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

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP