【ホームページ作成】棒グラフを作りたい

画像を使わずに棒グラフを描画

それでは、画像を一切使わずに、棒グラフを描画してみましょう。
これもとっても簡単です。

画像を使った棒グラフでは、棒の表示に img要素を使いました。 ここでは、その代わりに div要素を使用します。

<div style="background-color: blue; width: 120px; font-size: 10px;">&nbsp;</div>

すると、これは次のように表示されます。

これなら、画像を使わずにHTML（とスタイルシート）だけで棒グラフを作成できます。
上記の 120px の部分の数値を書き換えることで、棒グラフの横幅を変化させられます。 また、blue の部分を書き換えることで、棒の色を変えられます。 さらに、10px の数値を書き換えることで、棒グラフの高さを変えられます。
※高さの調整には、heightプロパティではなく font-sizeプロパティを使用しています。 これは、heightプロパティでの指定では、Netscape Navigator ではうまくいくものの、Internet Explorer や Opera などではうまくいかないためです。

例えば、次のように記述してみます。

<div style="background-color: blue;  width: 120px; font-size: 10px;">&nbsp;</div>
<div style="background-color: green; width: 97px;  font-size: 10px;">&nbsp;</div>
<div style="background-color: red;   width: 142px; font-size: 10px;">&nbsp;</div>

これを表示すると、次のような感じになります。

このままでは、棒の横に文字を置けないので、tableを使って次のように記述すると、

<table border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td>1: </td>
      <td><div style="background-color: blue; width: 120px; font-size: 10px;">&nbsp;</div></td>
   </tr>
   <tr>
      <td>2: </td>
      <td><div style="background-color: green; width: 97px; font-size: 10px;">&nbsp;</div></td>
   </tr>
   <tr>
      <td>3: </td>
      <td><div style="background-color: red; width: 142px; font-size: 10px;">&nbsp;</div></td>
   </tr>
</table>

次のように表示されます。

この方法は、スタイルシートが有効でないと表示されませんし、古いブラウザではうまく表示されない場合がありますので、 画像が用意できる場合は、前ページでご紹介した、画像を使う方法で作る方がよいでしょう。

おわりに

今回は、棒グラフを作成する方法をご紹介致しました。
何かグラフが必要になったときには、ぜひお試し下さい。

なお、この記事で使用した2つの画像（下記）は、もしよろしければ、ご自由にご使用下さい。下記の画像を右クリックして「名前を付けて画像を保存」などのメニューを使えば、保存できます。

1:

2:

次回は、もっと棒グラフらしく見える「縦向き棒グラフ」の作成方法をご紹介致します。

次回の記事「縦向き棒グラフの作成方法」へ →

【関連記事】

• 色も線種も線幅も自由な枠を作る
• 四辺が別種類の複雑な枠を作る