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コーディング

    【WordPressでGO!】WordPressの子テーマを作ってみよう

    前回の記事から1週間も経っていないことに軽く衝撃を感じているともさんです、こんにちわ。もう正月気分も抜けて、いよいよ体重が気になりだしたころでしょ…

  2. HTMLコーディング

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

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

  3. HTMLコーディング

    とっても簡単なベーシック認証(Basic認証)のかけ方

    日本酒のひやおろしがおいしい季節になりました、お久しぶりですこんにちわ。ともさんです。久しぶりに業務でベーシック認証(Basic認証)をか…

  4. HTMLコーディング

    EC-CUBE3でテンプレート適用後にパスが通らなくなってしまったときの対処法

    こんにちわ、ともさんです。みなさん元気ですかそうですか。さて、この前業務でEC-CUBEを触っていた時にとんでもないことが起こりました。…

  5. HTMLコーディング

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

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

  6. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム風にできるcss

    こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。今更ながらあけましておめでとうございます。作業がひと段落したので重い腰を上げて201…

コメント

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

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

CAPTCHA


最近の記事

  1. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使…
  2. お客様の声

    【お客様インタビュー】セブンオーセブンモーターサイクル小野様
  3. WEBデザイン

    色相環でグラデーションを描いてみよう
  4. お知らせ

    再び、Webデザイナー募集中
  5. コピーライティング

    コピーライティング心理学 そのいち ~バンドワゴン効果~
PAGE TOP