CSS3：縦の棒グラフを作る

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/zAtvG

See the Pen zAtvG by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

以前横に伸びるタイプも紹介しましたが、背景もCSS3でグリッド化するとグラフとして見やすくなるのでカスタマイズしてみました。

CSS

クラスごとに説明します。

背景部分

.barchart {
  position: relative;
  width: 220px;
  height: 250px;
  margin: 0 auto;
  border: solid 5px #ccc;
  background-image: linear-gradient( transparent 98%, rgba(#000, .2) 2%);
  background-size: 10%;
  background-repeat: repeat;
}

linear-gradientで線を引くだけの背景を作り、縦10%ごとのグリッドを作っています。

グラフ部分

[class*=date] {
  @include inline-block;
  position:absolute;
  bottom: 0;
  width: 60px;
  background: #ccc;
  @include animation(anime1 1s 1 ease);
}
.date1 {background: #0c9;left:10px}
.date2 {background: #09c;left:80px}
.date3 {background: #0cc;left:150px}

まずクラス名が「date」で始まるクラスに共通したスタイル設定をしています。
横に伸びるタイプと異なり、下から上に伸ばすには position:absolute して bottom:0 をかけ、基準値を枠の底にする必要があります。

date1～3には色と、absoluteしているため個別の位置を設定。

グラフ自体の長さはHTMLにインラインで記述することで動的に処理しやすくしています。