[使えるCSSテクニックVol.2] CSS を使った見栄えのいい引用文

使えるCSSテクニック Vol.02

2008.11.19

第 7 回目は「CSS を使った見栄えのいい引用文」です。
他の記事を引用したり、出典の一文を掲載したり、というところに使用する「引用文」を CSS できれいにしてみようじゃないかという試みです。

01. シンプルに見栄えよくしてみる

[サンプル]

あ…ありのまま今起こった事を話すぜ！
『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』
な…何を言ってるのかわからねーと思うがおれも何をされたのかわからなかった…
頭がどうにかなりそうだった…
催眠術だとか超スピードだとかそんなチャチなもんじゃあ断じてねえ
もっと恐ろしいものの片鱗を味わったぜ…

[HTML]

<blockquote id="simple01">
<p>あ…ありのまま 今 起こった事を話すぜ！<br />
『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』<br />
な…何を言ってるのかわからねーと思うがおれも何をされたのかわからなかった…<br />
頭がどうにかなりそうだった…<br />
催眠術だとか超スピードだとかそんなチャチなもんじゃあ 断じてねえ<br />
もっと恐ろしいものの片鱗を味わったぜ…</p>
</blockquote>

[CSS]重要なところだけ抜粋

/* =========================================================
■ 01.シンプルに見栄えよくしてみる
========================================================= */
blockquote#simple01 {
    width: 460px;
    margin: 0 20px 10px;
    padding: 10px 10px 10px 30px;
    border: #D9D9D9 solid;
    border-width: 1px 0;
    background: url(img/blockquote_01.gif) repeat-x 0 0;
}
blockquote#simple01 p {
    margin: 0;
    line-height: 150%;
    font-size: 90%;
}

[ポイント]

blockquote といえば「 “ ダブル引用符」です。背景画像にダブル引用符をモチーフにした画像をひくことで、引用部分を暗示します。

02.before,after を使ってみる

[サンプル]

あ…ありのまま今起こった事を話すぜ！
『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』
な…何を言ってるのかわからねーと思うがおれも何をされたのかわからなかった…
頭がどうにかなりそうだった…
催眠術だとか超スピードだとかそんなチャチなもんじゃあ断じてねえ
もっと恐ろしいものの片鱗を味わったぜ…

[HTML]

<blockquote id="simple02">
<p>あ…ありのまま 今 起こった事を話すぜ！<br />
『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』<br />
な…何を言ってるのかわからねーと思うがおれも何をされたのかわからなかった…<br />
頭がどうにかなりそうだった…<br />
催眠術だとか超スピードだとかそんなチャチなもんじゃあ 断じてねえ<br />
もっと恐ろしいものの片鱗を味わったぜ…</p>
</blockquote>

[CSS]重要なところだけ抜粋

/* =========================================================
■ 02. before,after を使ってみる
========================================================= */
div#sample02 blockquote#simple02 {
    width: 460px;
    margin: 10px;
    padding: 10px;
    background: #F2FAFC;
    border: none;
}
div#sample02 blockquote#simple02 p:before {
    margin: 0 5px 0 0;
    font-weight: bold;
    font-size: 120%;
    color: #0099CC;
    content: "“";
}
div#sample02 blockquote#simple02 p:after {
    margin: 0 0 0 5px;
    font-weight: bold;
    font-size: 120%;
    color: #0099CC;
    content: "”";
}
div#sample02 blockquote#simple02 p {
    margin: 0;
    padding: 0 0 1em;
    line-height: 150%;
    font-size: 90%;
    color: #666666;
}

[ポイント]

before,after を使って、ダブル引用符にスタイルをあてます
before,after は、IE には対応していません

03. 出典を表示してみる

[サンプル]

あ…ありのまま今起こった事を話すぜ！
『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』
な…何を言ってるのかわからねーと思うがおれも何をされたのかわからなかった…
頭がどうにかなりそうだった…
催眠術だとか超スピードだとかそんなチャチなもんじゃあ断じてねえ
もっと恐ろしいものの片鱗を味わったぜ…

ジョジョの奇妙な冒険 - スターダストクルセイダーズ

[HTML]

<div id="sample03">
<blockquote id="simple03">
<p>あ…ありのまま 今 起こった事を話すぜ！<br />
『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』<br />
な…何を言ってるのかわからねーと思うがおれも何をされたのかわからなかった…<br />
頭がどうにかなりそうだった…<br />
催眠術だとか超スピードだとかそんなチャチなもんじゃあ 断じてねえ<br />
もっと恐ろしいものの片鱗を味わったぜ…</p>
</blockquote>
<cite><a href="#">ジョジョの奇妙な冒険 - スターダストクルセイダーズ</a></cite>
</div><!-- /#sample03 -->

[CSS]重要なところだけ抜粋

/* =========================================================
■ 03. 出典を表示してみる
========================================================= */
div#sample03 {
    text-align: center;
    background: url(img/blockquote_03_02.gif) no-repeat 50% 100%;
    padding: 0 0 65px;
}
div#sample03 blockquote#simple03 {
    padding: 65px 0 0;
    text-align: center;
    background: url(img/blockquote_03_01.gif) no-repeat 50% 0;
}
div#sample03 blockquote#simple03 p {
    margin: 0 0 15px;
    line-height: 150%;
    font-size: 80%;
    color: #92908E;
}
div#sample03 cite {
    font-size: 80%;
    font-style: normal;
}

[ポイント]