Re:「blockquote」を「“”」で囲ったようなデザインにする方法＠ネタフル

2007年09月05日 20:32

技術情報

ネタフルのエントリーでもやっていますが、「blockquote」つまり引用している部分を「引用符（“”）」で囲ったようなデザインにする方法が紹介されています。
via: [N] 「blockquote」を「“”」で囲ったようなデザインにする方法

いつも通り Livedoor Reader でRSS読んでたらいきなり自分のエントリーがでてるんだもん、そりゃ驚くっちゅー話で。
ネタフルさんのエントリーがUPされた13時過ぎくらいから急にアクセスがあがり、はてブもいつもより多め。
これが、噂に聞いたネタフル砲か（ネタフルキャノンと読んだ方が格好良いか？）

ああ、ありがたや、ありがたや。

ついでに、余計なお世話だと思いますがネタフルさんの引用（blockquote）を勝手に添削してみます（！）

HTMLは非常にシンプルにblockquoteで囲っているだけ。blockquoteの中にpタグとかは使っていません。
引用元の表記はciteタグは使わずにpタグのみ。以下の感じです。

<p><a href="http://creazy.net/2007/09/blockquote_css.html">第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法</a>というエントリーより。</p>
<blockquote>今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符（“”）」で囲ったようなデザインにする方法を紹介します。</blockquote>

そしてCSSはこんな感じ、

.content blockquote {
    color: #333333;
    line-height: 160%;
    font-size: 14px;
    width: 340px;
    background-image: url(image2/blockquote_bg.gif);
    background-repeat: no-repeat;
    padding-top: 20px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #F5F5F5;
    padding-bottom: 10px;
}

ここで気をつけたいのが前のエントリーでも書いたブラウザ依存の問題。

ポイントは横幅が固定じゃないとうまくいかないので注意が必要です。widthとpaddingの組み合わせはブラウザによって動作が異なりますのでHackが必要になるケースがあります。
via: 第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法

どういうことかというと、同じblock要素にwidthとpadding-left（padding-right）を指定した場合に、FirefoxやSafariなどではwidth＋padding-left（padding-right）が横幅になるのに、IEではpaddingの幅が無視されwidthが横幅になってしまうという事です。

CSS1/CSS2ではボックスの幅を算出するときにパディングやボーダーのサイズは除外される。しかしWinIEではこれらを含めて幅や高さを算出する。
via: Internet Explorer (Windows) CSSバグリスト

なのでネタフルさんのblockquoteの場合、Firefoxでみると350px、IEでみると340pxになります。
10pxくらいの差なので全然気にならないんですが、無理矢理CSS Hackとかで対応するとこんな感じかと。

.content blockquote {
    color: #333333;
    line-height: 160%;
    font-size: 14px;
    width: 340px;
    background-image: url(image2/blockquote_bg.gif);
    background-repeat: no-repeat;
    padding-top: 20px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #F5F5F5;
    padding-bottom: 10px;
}
* html body .content blockquote {
    width: 350px;
}

いわゆるスターハックってやつですね。