円チャートを表示するCSS（スタイルシート）

スカイ
(2006年9月15日 06:41) | | コメント(0) | トラックバック(0)

deliciousにて円チャートをCSSで表現するサイトを見つけました。
画像をずらすことで円チャートを簡単に表現することができます。
結構シンプルです。

円チャートサンプル

37%

55%

90%


slices.gif

上記の背景画像を移動することでチャート表示を変えます。一つのチャートが30ピクセルスパンで作られていますので、ずらして表示することで簡単にチャートを作ることができます。

HTMLコード


CSSコード

とってもシンプルなので、これを真似てレーティング（5つ星表示）なども簡単にできるような気がします。

参照元

Dynamic Pie Chart with CSS
http://petewilliamsagency.com/css/examples/pie/

カテゴリ:

タグ:

トラックバック(0)

このブログ記事を参照しているブログ一覧: 円チャートを表示するCSS（スタイルシート）

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

コメントする

検索

最近のブログ記事

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: ｆmtubesキャッチイメージ

  • 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年9月15日 06:41に書いたブログ記事です。

ひとつ前のブログ記事は「TagSupplementalsプラグインを使って関連エントリーリストを生成」です。

次のブログ記事は「Firefox 1.5.0.7リリース」です。

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