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

    EC-CUBE3で自動返信メールが文字化けし、そしてタイトルが途中で切れたときの対処法

    大阪はすっきりしない天気が続いてロードバイクに乗れずテンション下がりまくりのともさんですこんにちは。さて、前回に引き続き今回もEC-CUBE関…

  2. HTMLコーディング

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

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

  3. HTMLコーディング

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

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

  4. HTMLコーディング

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

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

  5. HTMLコーディング

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

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

  6. HTMLコーディング

    【SVGことはじめ その1】SVG形式の画像ファイルを作って表示させてみよう

    このあいだ社長の大好きなラフロイグというウイスキーを飲ませてもらい独特の匂いに驚きのけぞったともさんです、こんにちは。みなさん、svgって知っ…

コメント

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

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

CAPTCHA


最近の記事

  1. レポート

    Web担当者に勧めたいマーケティング・セールスコピー書籍BEST5
  2. お知らせ

    【2018年】新年あけましておめでとうございます
  3. お客様の声

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

    「いらすとや」の素材を使ってマンガを作成しよう!
  5. お知らせ

    Webデザイナー募集中
PAGE TOP