前の記事 ≪：2008年2月4日 管理人のブックマーク
次の記事 ≫：PHPで使える便利関数をJavaScriptでも使えるようにする「php.js」

ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」

2008年02月05日-はてなブックマーク

スポンサード リンク
Pure Css Data Chart | Css Globe
Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let's say simple data chart? How about giving it a try with nothing but good ol' css?

ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」。
次のようなグラフを描画するCSSとHTMLマークアップのサンプルが紹介されています。


マークアップも次のように綺麗に記述できます。

<dt>Day 1</dt>
<dd class="first"><span class="p36"><em>36</em></span></dd>
<dt>Day 2</dt>
<dd><span class="type2 p45"><em>45</em></span></dd>
<dt>Day 3</dt>
<dd><span class="type3 p51"><em>51</em></span></dd>
<dt>Day 4</dt>
<dd><span class="type4 p48"><em>48</em></span></dd>
<dt>Day 5</dt>
<dd><span class="type1 p55"><em>55</em></span></dd>
<dt>Day 6</dt>
<dd><span class="type2 p80"><em>80</em></span></dd>
<dt>Day 7</dt>
<dd><span class="type3 p72"><em>72</em></span></dd>
<dt>Day 8</dt>
<dd><span class="type4 p71"><em>71</em></span></dd>
<dt>Day 9</dt>
<dd><span class="type1 p64"><em>64</em></span></dd>
<dt>Day 10</dt>
<dd><span class="type2 p55"><em>55</em></span></dd>
<dt>Day 11</dt>
<dd><span class="type3 p62"><em>62</em></span></dd>
<dt>Day 12</dt>
<dd><span class="type4 p44"><em>44</em></span></dd>

凝った作りで、CSSの学習用としてもよい資料になりそう。

関連エントリ

関連の記事検索：CSS, css
スポンサード リンク

By.KJ : 2008年02月05日 07:07 ブックマークに追加する livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)