イメージ画像無しでのblockquoteで引用を表示するCSSサンプルを2パターン紹介しています。
blockquoteでの引用を美しく表示するCSSサンプル:phpspot開発日誌のエントリーを読んでみて、イメージ無しでのblockquoteでの引用を二重引用符で表示するCSSサンプルを紹介してみることに。
一つは、24 ways: Swooshy Curly Quotes Without Imagesのエントリーではイメージ画像無しでの二重引用符で括ったblockquoteでの引用表示するHTML+CSSを紹介していることを。
<span></span>要素で二重引用符（開始）と（終了）を囲み、CSSでブロック・フロート設定で括ってあるように表示する方法です。
- 24 ways
- http://24ways.org/
Ajax関連の面白いエントリーがいくつか紹介されています。
二つ目は、IEでは表示されませんが、CSS疑似要素要素（:beforeと:after）を使ってイメージ無しで引用符で括ったようにできる方法を紹介。
span要素を使っての二重引用符を囲むCSSサンプル
24 ways: Swooshy Curly Quotes Without Imagesでは、引用文の前と後に二重引用符を<span></span>要素を囲み、その<span></span>要素を以下のCSS設定で拡大表示しています。
CSSコード
ブラウザによっては、マージン、パディングの微調整が必要です。
CSS疑似要素要素（:beforeと:after）を使っての引用表示サンプル
IEでは適用されませんが、Firefox,Safari,Netscape,Operaでは適用される:before疑似要素:after疑似要素を使っても似たような表示ができます。こちらもブラウザによっては、マージン、パディングの微調整が必要です。
この方法だと、自分の好きなカラーに設定できるのでいいかと思います。IEで適用されないのが残念です。そろそろ引用表示も変えないと
javascriptでもできそうな気がします。また暇があれば考えてみようかと。
二重引用符実体参照と数値参照コード
| 文字 | 名称 | 実体参照 | 数値文字参照 |
|---|---|---|---|
| “ | 二重引用符（開始） | “ | “ |
| ” | 二重引用符（終了） | ” | ” |
コメントする