CSSだけで棒グラフをつくるテクニック

CSS だけで棒グラフ

HTML

<p class="graph-title">最近のブラウザシェア事情</p>
<ul class="bar-graph">
  <li class="graph-a">
    <dl>
      <dt>GoogleChrome</dt>
      <dd>
        <span>39%</span>
     </dd>
    </dl>
  </li>
  <li class="graph-b">
    <dl>
      <dt>InternetExplorer</dt>
      <dd>
        <span>31%</span>
     </dd>
    </dl>
  </li>
  <li class="graph-c">
    <dl>
      <dt>Firefox</dt>
      <dd>
        <span>16%</span>
     </dd>
    </dl>
  </li>
  <li class="graph-d">
    <dl>
      <dt>Safari</dt>
      <dd>
        <span>8%</span>
     </dd>
    </dl>
  </li>
  <li class="graph-e">
    <dl>
      <dt>Edge</dt>
      <dd>
        <span>3%</span>
     </dd>
    </dl>
  </li>
</ul>

定義リスト dl を使い、マークアップも気にしてみました。上の例でいくと「GoogleChrome は39％」を定義しています。

CSS

/* 初期値等のリセット */
.graph-title , .bar-graph, .bar-graph li, .bar-graph dl,
.bar-graph dt, .bar-graph dd, .bar-graph span {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

/* グラフのタイトル */
.graph-title {
  font-weight: bold;
  text-align: center;
}

.bar-graph {
  border: 1px solid #ccc;
  margin-bottom: 30px;
}

.bar-graph li {
  border-bottom: 1px solid #ccc;
}

.bar-graph li:last-child {
  border-bottom: 0;
}

/* 各グラフの横並びは flex */
.bar-graph dl {
  display: flex;
  justify-content: space-between;
}

/* グラフの項目名は固定幅 */
.bar-graph dt {
  border-right: 1px solid #ccc;
  flex-basis: 300px; /* 項目名の幅 */
  flex-grow: 0;
  flex-shrink: 0;
  padding: 10px 0;
  text-align: center;
}

/* グラフが入る要素は自由幅 */
.bar-graph dd {
  flex-grow: 1;
  flex-shrink: 1;
  padding: 10px 0;
  text-align: center;
}

/* グラフ本体 */
.bar-graph dd span {
  display: block;
  overflow: visible;
  white-space: nowrap;
}

/* 各グラフの色と％、各々設定する */
.graph-a dd span {
  background-color: #fff176;
  width: 39%;
}

.graph-b dd span {
  background-color: #81c784;
  width: 31%;
}

.graph-c dd span {
  background-color: #4fc3f7;
  width: 16%;
}

.graph-d dd span {
  background-color: #f8bbd0;
  width: 8%;
}

.graph-e dd span {
  background-color: #ffaB91;
  width: 3%;
}


/* レスポンシブ対応、狭いときは flex を解除 */
@media (max-width: 860px) {
  .bar-graph dl {
    display: block;
  }

  .bar-graph dt {
    border-bottom: 1px solid #ccc;
    border-right: 0;
  }
}

CSS だけで作るので各棒グラフの％も CSS に書くことになります。width とそのグラフの％を同じ値にします。色も個別に設定できます。

flex の設定値で、flex-shrink と flex-grow を0にすると、その要素は固定幅になります。その幅を flex-basis で決めます。先の値を両方1とすると今度は自由幅になります。横幅として余っている分だけ横に広がってくれます。

棒グラフそのものに white-space: nowrap を設定することで、グラフが小さくても中の文字が折り返されずにはみ出て表示されます。

サンプル

以下のグラフが CSS のみで作成したグラフです。

最近のブラウザシェア事情

• GoogleChrome

  39%

• InternetExplorer

  31%

• Firefox

  16%

• Safari

  8%

• Edge

  3%

最新のブラウザであればそれなりの棒グラフが表示されていると思います。

グラフのデータは去年のものなのでデータ自体は余り信憑性はありません。信じないでください。

モバイルでは項目名と棒グラフを横に並べるのはキツイので、下の画像のように立てに並べています。幅を変更するとレスポンシブになるのが確認できます。

まとめ

flex を使っているので、古い IE や Andoroid の標準ブラウザでは崩れていると思いますが、最新のブラウザなら IE11 でも問題なく表示されています。古いものにも対応したい方はベンダープレフィクス等つけて対応してください。

マークアップも定義リストを使って構成されているので Google にもそれなりの感じで解釈されると思われます。わかりませんが。

CSS だけでもそれなりの見た目に出来るので使ってみると記事が華やかになるかもしれないです。