画像を使わずに棒グラフを描画
それでは、画像を一切使わずに、棒グラフを描画してみましょう。
これもとっても簡単です。
画像を使った棒グラフでは、棒の表示に img要素を使いました。 ここでは、その代わりに div要素を使用します。
<div style="background-color: blue; width: 120px; font-size: 10px;"> </div>
すると、これは次のように表示されます。
これなら、画像を使わずにHTML（とスタイルシート）だけで棒グラフを作成できます。
上記の 120px の部分の数値を書き換えることで、棒グラフの横幅を変化させられます。 また、blue の部分を書き換えることで、棒の色を変えられます。 さらに、10px の数値を書き換えることで、棒グラフの高さを変えられます。
※高さの調整には、heightプロパティではなく font-sizeプロパティを使用しています。 これは、heightプロパティでの指定では、Netscape Navigator ではうまくいくものの、Internet Explorer や Opera などではうまくいかないためです。
例えば、次のように記述してみます。
<div style="background-color: blue; width: 120px; font-size: 10px;"> </div> <div style="background-color: green; width: 97px; font-size: 10px;"> </div> <div style="background-color: red; width: 142px; font-size: 10px;"> </div>
これを表示すると、次のような感じになります。
このままでは、棒の横に文字を置けないので、tableを使って次のように記述すると、
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td>1: </td> <td><div style="background-color: blue; width: 120px; font-size: 10px;"> </div></td> </tr> <tr> <td>2: </td> <td><div style="background-color: green; width: 97px; font-size: 10px;"> </div></td> </tr> <tr> <td>3: </td> <td><div style="background-color: red; width: 142px; font-size: 10px;"> </div></td> </tr> </table>
次のように表示されます。
| 1: |
|
| 2: |
|
| 3: |
|
この方法は、スタイルシートが有効でないと表示されませんし、古いブラウザではうまく表示されない場合がありますので、 画像が用意できる場合は、前ページでご紹介した、画像を使う方法で作る方がよいでしょう。
おわりに
今回は、棒グラフを作成する方法をご紹介致しました。
何かグラフが必要になったときには、ぜひお試し下さい。
なお、この記事で使用した2つの画像（下記）は、もしよろしければ、ご自由にご使用下さい。下記の画像を右クリックして「名前を付けて画像を保存」などのメニューを使えば、保存できます。
1:  |
2:  |
次回は、もっと棒グラフらしく見える「縦向き棒グラフ」の作成方法をご紹介致します。
【関連記事】
