HTMLコーディング

棒グラフをcssで表現してみよう

何かおいしい日本酒銘柄があれば教えて欲しいと思っている、ともさんです。
ちなみに、私のおすすめは「美少年」です。

先日の案件で、サイト内に棒グラフを表示するページがあったんですが、ただ単に画像で作ってしまっては面白くないなと思い、cssでやってみたら思いのほか上手くできたので晒すことにしました。

実現させたい表示

今回は以下のようなグラフを表現します。
よくある横棒グラフすね。

こういうグラフを表示させたい

HTML

ベースとなるHTMLは以下です。

<table>
	<tr>
		<th>男性</th>
		<td class="g_man">53,992名</td>
	</tr>
	<tr>
		<th>女性</th>
		<td class="g_woman">39,795名</td>
	</tr>
</table>

難しいことは何もしてません。
よくあるtableコーディングですねー。

CSS

まずCSSすべて晒します。
詳しい説明はあとから。

table {
width: 100%;
margin: 1.5em 0 0;
font-size: 1em;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-collapse: collapse;
}

th,
td {
padding: 1em;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

th {
width: 20%;
text-align: center;
font-weight: normal;
background: #eee;
}

.g_man,
.g_woman {
padding-left: 0;
}

.g_man:before,
.g_woman:before {
content: "";
display: inline-block;
height: 20px;
margin-right: 1em;
vertical-align: middle;
background: #666;
}

.g_man:before {width: 80%;}
.g_woman:before {width: 88%;}

table、th、tdへの指定で、テーブル内の余白や枠線の太さと色、フォントサイズなど、ベースとなる指定をしてます。
特に難しいことはしていないので、ゆっくり見てもらえればわかるのではないかなと思います。

さて、いよいよ今回の記事の本筋に行きましょう。

グラフを表現している部分は?

ここですね。

.g_man,
.g_woman {
padding-left: 0;
}

.g_man:before,
.g_woman:before {
content: "";
display: inline-block;
height: 20px;
margin-right: 1em;
vertical-align: middle;
background: #666;
}

.g_man:before {width: 80%;}
.g_woman:before {width: 88%;}

ひとつずつ説明します。

グラフはひとつずつ数値が違うものなので、指定も別々に行います。
グラフを入れたい場所にclassをひとつずつ指定しました。

g_manとg_womanですね。

classを指定している<td>には、数字を入れています。
今回であれば、男性の場合「53,992名」といった具合ですね。

・・・ん?
グラフを入れるべきタグがありませんね。
では、どこでグラフを表現させましょうか。

そうです、cssにはセレクタという、とっっても便利なものがありますねー
今回は:beforeにグラフを表現しました。

:beforeや:afterセレクタを使用する際には必ずcontent指定をしてくださいね。

display: inline-block;

これで数字の前にグラフを表示させる準備をします。

height: 20px;

高さを指定しないと0になってしまうので。

vertical-align: middle;

縦の中央揃え指定ですねー

background: #666;

グラフの色です。

.g_man:before {width: 80%;}
.g_woman:before {width: 88%;}

横幅をそれぞれ指定することで、グラフの長さに違いを出してます。
数字と大差ないくらいのテキトーさ加減で調整すればいいかなと思います。

最後にcodepenで作成したものはっときます。

See the Pen 棒グラフをcssで表現 by tomosan (@tomosan) on CodePen.0

まとめ

セレクタは知れば知るほど奥が深くて、使いようによってはとても便利なものなのでガンガン使っていきましょう!
昔ほどIEを気にする必要もなくなりましたしね|д゚)

なんて便利な世の中になったんだ。

秋到来で、おいしいお菓子がわんさか出てきて抑制できないともさんでした。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    tableをCSSのみでレスポンシブ対応にする方法

    テイクフォーにジョインして早3ヶ月が経ちましたがあきらか飲む回数が増えてるともさんですこんにちは。・・・前はそんな、毎週飲むとか、なかったンデスヨ…

  2. HTMLコーディング

    css3だけで立体的でアニメーション付きのボタンを作ろう

    はじめまして、制作チームキャップの徳永です。今年でテイクフォーも4期目に突入し、そろそろ自社サイトでまじめに記事を書いていみようという事になったの…

  3. HTMLコーディング

    EC-CUBE3をローカル環境へインストールしてみよう

    寒い!((((;゚Д゚))))寒すぎてロードバイク諦めかけてるともさんです、こんにちわ。EC-CUBE3のテスト環境を作りたくて、どこに作…

  4. HTMLコーディング

    社内勉強会を行いました。

    こんにちわ、入社2ヶ月のともさんです。さて、去る9月16日(金)19:00~社内勉強会を行いました。テイクフォーでは初の勉強会となります。…

  5. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Type編】

    最近、耳をふさがないイヤホンを見つけて衝動買いしてしまったワタクシ、ともさんです。こんにちわ。Bluetoothではないのに、まあまあ高め…

  6. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう

    皆様あけおめです。ともさんです。あけおめ・・・もう2月ですよ。どうしましょう。なにをしてたんでしょうか。というわけで、今回もはりきってゴー…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. HTMLコーディング

    【SVGことはじめ その1】SVG形式の画像ファイルを作って表示させてみよう
  2. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Typ…
  3. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム…
  4. WEBデザイン

    Photoshopでオシャレなネオンサインのような文字を作る方法
  5. レポート

    モンストフェスティバル2015に行ってきました。
PAGE TOP