CSSで縦の棒グラフ（罫線付き）をつくる

罫線付きのグラフをCSSだけで作ってみた。

HTML

<div class="container">
  <div class="label-vertical">
    <div class="label">（人数）</div>
    <div class="label">1000</div>
    <div class="label">900</div>
    <div class="label">800</div>
    <div class="label">700</div>
    <div class="label">600</div>
    <div class="label">500</div>
    <div class="label">400</div>
    <div class="label">300</div>
    <div class="label">200</div>
    <div class="label">100</div>
    <div class="label">0</div>  
  </div>
  <div class="inner">
    <div class="graph">
      <hr style="top: 26px;">
      <hr style="top: 52px;">
      <hr style="top: 78px;">
      <hr style="top: 104px;">
      <hr style="top: 130px;">
      <hr style="top: 156px;">
      <hr style="top: 182px;">
      <hr style="top: 208px;">
      <hr style="top: 234px;">
      <hr style="top: 260px;">
      <hr style="top: 286px;">
      <div class="bar" style="height: 165px; margin-top: 122px;"></div>
      <div class="bar" style="height: 82px; margin-top: 203px;"></div>
      <div class="bar" style="height: 200px; margin-top: 87px;"></div>
      <div class="bar" style="height: 166px; margin-top: 121px;"></div>
    </div>
    <div class="label-horizontal">
      <div class="label">10代</div>
      <div class="label">20代</div>
      <div class="label">30代</div>
      <div class="label">40代</div>
      <div class="label">50代</div>
      <div class="label">60代</div>
      <div class="label">70代</div>
      <div class="label">80代</div>
    </div>
  </div>
  
</div>

CSS

.container {
  display: flex;
}
.label-vertical .label{
  font-size: 12px;
  line-height: 26px;
  text-align: right;
  padding-right: 10px;
}
.graph {
  height: 287px;
  width: 678px;
  border: 1px solid #F0F0F0;
  position: relative;
  margin-top: 13px;
}
.graph .bar:first-of-type {
  margin-left: 29px;
}
.bar {
  float: left;
  text-align: center;
  position: relative;
  margin-left: 60px;
  width: 25px;
  background-color: #006400;
}
hr {
  border: none;
  position: absolute;
  width: 100%;
  height: 1px;
  margin: 0 auto;
  background: #F0F0F0;
}
.label-horizontal {
  display: flex;
}
.label-horizontal .label{
  font-size: 12px;
  margin-left: 60px;  
  width: 25px;
  text-align: center;
  padding-top: 6px;
}
.label-horizontal .label:first-of-type{
  margin-left: 29px;  
}

CodePen

See the Pen 棒グラフ - 縦 by Shiori SHONO (@sshono1210) on CodePen.

修正したい点

• floatを使ってるところ
• 直接styleタグを使ってるところ

をやめたい

参考