イメージ無しのblockquoteで引用を表示するCSSサンプル

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でもできそうな気がします。また暇があれば考えてみようかと。

二重引用符実体参照と数値参照コード

二重引用符実体参照と数値参照コード
文字名称実体参照数値文字参照
二重引用符(開始)&ldquo;&#8220;
二重引用符(終了)&rdquo;&#8221;

トラックバック(1)

このブログ記事を参照しているブログ一覧: イメージ無しのblockquoteで引用を表示するCSSサンプル

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/214

前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介し... 続きを読む

コメントする

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このブログ記事について

このページは、スカイが2006年11月27日 18:54に書いたブログ記事です。

ひとつ前のブログ記事は「Lunascapeブラウザデザインコンテストと参考サイトいろいろ」です。

次のブログ記事は「yahoo.com-Discover Cardの広告が面白い」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。