Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

Web

超簡単できた!CSSで横向きのグラフを作る方法

投稿日:

超簡単できた!CSSで横向きのグラフを作る方法

今までグラフはイラストレーター、fireworksなどで作って画像にしてきましたが数値など定期的に変わったりするので毎回更新のたびに修正するのは手間がかかるなっと思ってました。

今回はCSSで横向きのグラフを作ってみました。

ページコンテンツ

HTML STEP1

<div class="BarChartBox">
    <span class="bar1">36%</span>
</div>

divでくくってグラフの数値をspanで囲みます。

CSS STEP2

.BarChartBox {
    width: 400px;
	margin-bottom: 10px;
}

.BarChartBox .bar1 {
    display: block;
    background: #006d97;
    text-align: center;
    color: #f0ffff;
    height: 2em;
    line-height: 2em;
    width:36%;
}

BarChartBoxはグラフの全体の横幅の設定値を入れます。私は400pxにしました。

クラスbar1にグラフを色(background)、グラフの横幅(width)を設定します。
このクラスにグラフの中の文字色を変えたり、文字のセンター寄せを左にしたりしてください。

横向きのグラフ

複数のグラフもクラスを変えるだけで作れます。

まとめ

[サンプル] 横向きグラフ

簡単にCSSだけで横向きのグラフを作ることができました。

※firefox、クロームで動いていることを確認しております。

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.