[CSS]スタイシートだけで実装するアクセシブルな折れ線グラフ

スクリプトやフラッシュを使用しないで、スタイルシートだけで実装する折れ線グラフをcss globeから紹介します。

Pure Css Line Graph
demo

グラフはdl要素で実装されており、スタイルシートのオフ時や音声ブラウザでも情報入手が可能なものとなっています。

スタイルシートのオフ時の表示

折れ線グラフを作成するには複数の背景画像が使用されており、折れ線グラフの背景の画像、ポイントの画像、折れ線の画像、と3枚の画像で作成されています。

実装のイメージ

各画像のデザインを変更すれば、オリジナルデザインの折れ線グラフも作成できます。
サイズ変更は、スタイルシートの数値変更をお忘れなく。