ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

棒グラフを作りたい(2ページ目)

棒グラフを作ってみましょう。数値で何かを表す際、グラフがあると見やすいですね。表計算ソフトで作成したグラフを画像にするのは面倒ですし、修正が大変です。HTMLで手軽にできる棒グラフの作成方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

棒は画像、長さはHTMLで指定

棒の部分に次の画像を使用しています。これで、どうやって棒グラフを作成しているのでしょうか。

1:
2:

答えはとても簡単で、HTMLで画像の横幅を調整しているだけです。
HTMLで画像を表示させる際には、img要素(<img>タグ)を用いますね。例えば、次のように記述します。

<img src="graph.gif" width="***" height="10" alt="グラフ">

上記の *** の部分に数値を入れることで、その画像の横幅を変化させることができます。(数値の単位は「ピクセル」)
「graph.gif」の部分は画像ファイル名、「width="10"」の部分は画像の高さです。

例えば、

<img src="graph.gif" width="125" height="10" alt="グラフ">

……と記述すれば、横幅 125ピクセルで表示できます。

もうお分かりだと思いますが、この横幅の数値を変えて、必要分だけ列挙すれば棒グラフになるわけです。例えば次のような感じです。

1: <img src="graph.gif" width="125" height="10" alt="グラフ(125)">
2: <img src="graph.gif" width="94"  height="10" alt="グラフ( 94)">
3: <img src="graph.gif" width="108" height="10" alt="グラフ(108)">

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

1: グラフ(125)
2: グラフ( 94)
3: グラフ(108)

グラデーションしている画像に変えると、次のようになります。

1: グラフ(125)
2: グラフ( 94)
3: グラフ(108)

いろいろな画像で試してみると面白いでしょう。

画像は絶対必要?

さて、上記でご紹介した方法では、棒として画像を使用しています。
しかし、画像を全く使わずに棒グラフを実現する方法もあります。

それでは、次のページへ →

  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます