CSSだけでグラフを作ってみました

Day 1

60

Day 2

55

Day 3

51

Day 4

48

Day 5

35

Day 6

30

Day 7

32

Day 8

31

Day 9

44

Day 10

55

Day 11

62

Day 12

34

Day 13

50

Day 14

74

Day 15

80

xhtml

<dl id="graph">
<dt>Day 1</dt>
<dd class="first"><span class="p60"><em>60</em></span></dd>
<dt>Day 2</dt>
<dd><span class="type2 p55"><em>55</em></span></dd>
<dt>Day 3</dt>
<dd><span class="type3 p51"><em>51</em></span></dd>
<dt>Day 4</dt>
<dd><span class="type4 p48"><em>48</em></span></dd>
<dt>Day 5</dt>
<dd><span class="type1 p35"><em>35</em></span></dd>
<dt>Day 6</dt>
<dd><span class="type2 p30"><em>30</em></span></dd>
<dt>Day 7</dt>
<dd><span class="type3 p32"><em>32</em></span></dd>
<dt>Day 8</dt>
<dd><span class="type4 p31"><em>31</em></span></dd>
<dt>Day 9</dt>
<dd><span class="type1 p44"><em>44</em></span></dd>
<dt>Day 10</dt>
<dd><span class="type2 p55"><em>55</em></span></dd>
<dt>Day 11</dt>
<dd><span class="type3 p62"><em>62</em></span></dd>
<dt>Day 12</dt>
<dd><span class="type4 p34"><em>34</em></span></dd>
<dt>Day 13</dt>
<dd><span class="type1 p50"><em>50</em></span></dd>
<dt>Day 14</dt>
<dd><span class="type2 p74"><em>74</em></span></dd>
<dt>Day 15</dt>
<dd><span class="type3 p80"><em>80</em></span></dd>
</dl>

CSS

説明しやすいように、簡単な要素のwrapperBox、headerBox、navigationBox、footerBoxからCSSの指定をしたいと思います。

#contents dl#graph{
	background: url(image/bg_graph.gif) no-repeat;
	width: 580px;
	height: 385px;}
#contents dl#graph dt{
	display:  none;
}
#contents dl#graph dd{
	position: relative;
	float: left;
	display: inline;
	width: 33px;
	height: 330px;
	margin-top: 22px;		
} 

#contents dl#graph dd.first{
	margin-left:  33px;		
} 	

#contents dl#graph span{
	position: absolute;
	display: block;
	width: 33px;	
	bottom: 0;
	left: 0;	
	z-index: 1;
	color: #555;
	text-decoration: none;
} 		

#contents dl#graph span em{
	display: block;
	font-style: normal;
	float: left;
	line-height: 200%;
	background: #FFF;
	border: 1px solid #b1b1b1;
	position: absolute;
	top: 50%;
	left: 3px;
	text-align: center;
	width: 23px;
} 		

#contents dl#graph span{
	height: 50%;
	background: url(image/type1.jpg) repeat-y;
} 

/* -------------- graphのtype別　Style --*/		
#contents dl#graph span.type1{
	background: url(image/type1.jpg) repeat-y;
} 

#contents dl#graph span.type2{
	background: url(image/type2.jpg) repeat-y;
} 

#contents dl#graph span.type3{
	background: url(image/type3.jpg) repeat-y;
} 

#contents dl#graph span.type4{
	background: url(image/type4.jpg) repeat-y;
} 

/* -------------- パーセンテージの設定 --*/	

#contents dl#graph span.p0{height: 0%;}
#contents dl#graph span.p1{height: 1%;}
#contents dl#graph span.p2{height: 2%;}
#contents dl#graph span.p3{height: 3%;}
#contents dl#graph span.p4{height: 4%;}
#contents dl#graph span.p5{height: 5%;}
#contents dl#graph span.p6{height: 6%;}
#contents dl#graph span.p7{height: 7%;}
#contents dl#graph span.p8{height: 8%;}
#contents dl#graph span.p9{height: 9%;}
#contents dl#graph span.p10{height: 10%;}
#contents dl#graph span.p11{height: 11%;}
#contents dl#graph span.p12{height: 12%;}
#contents dl#graph span.p13{height: 13%;}
#contents dl#graph span.p14{height: 14%;}
#contents dl#graph span.p15{height: 15%;}
#contents dl#graph span.p16{height: 16%;}
#contents dl#graph span.p17{height: 17%;}
#contents dl#graph span.p18{height: 18%;}
#contents dl#graph span.p19{height: 19%;}
#contents dl#graph span.p20{height: 20%;}
#contents dl#graph span.p21{height: 21%;}
#contents dl#graph span.p22{height: 22%;}
#contents dl#graph span.p23{height: 23%;}
#contents dl#graph span.p24{height: 24%;}
#contents dl#graph span.p25{height: 25%;}
#contents dl#graph span.p26{height: 26%;}
#contents dl#graph span.p27{height: 27%;}
#contents dl#graph span.p28{height: 28%;}
#contents dl#graph span.p29{height: 29%;}
#contents dl#graph span.p30{height: 30%;}
#contents dl#graph span.p31{height: 31%;}
#contents dl#graph span.p32{height: 32%;}
#contents dl#graph span.p33{height: 33%;}
#contents dl#graph span.p34{height: 34%;}
#contents dl#graph span.p35{height: 35%;}
#contents dl#graph span.p36{height: 36%;}
#contents dl#graph span.p37{height: 37%;}
#contents dl#graph span.p38{height: 38%;}
#contents dl#graph span.p39{height: 39%;}
#contents dl#graph span.p40{height: 40%;}
#contents dl#graph span.p41{height: 41%;}
#contents dl#graph span.p42{height: 42%;}
#contents dl#graph span.p43{height: 43%;}
#contents dl#graph span.p44{height: 44%;}
#contents dl#graph span.p45{height: 45%;}
#contents dl#graph span.p46{height: 46%;}
#contents dl#graph span.p47{height: 47%;}
#contents dl#graph span.p48{height: 48%;}
#contents dl#graph span.p49{height: 49%;}
#contents dl#graph span.p50{height: 50%;}
#contents dl#graph span.p51{height: 51%;}
#contents dl#graph span.p52{height: 52%;}
#contents dl#graph span.p53{height: 53%;}
#contents dl#graph span.p54{height: 54%;}
#contents dl#graph span.p55{height: 55%;}
#contents dl#graph span.p56{height: 56%;}
#contents dl#graph span.p57{height: 57%;}
#contents dl#graph span.p58{height: 58%;}
#contents dl#graph span.p59{height: 59%;}
#contents dl#graph span.p60{height: 60%;}
#contents dl#graph span.p61{height: 61%;}
#contents dl#graph span.p62{height: 62%;}
#contents dl#graph span.p63{height: 63%;}
#contents dl#graph span.p64{height: 64%;}
#contents dl#graph span.p65{height: 65%;}
#contents dl#graph span.p66{height: 66%;}
#contents dl#graph span.p67{height: 67%;}
#contents dl#graph span.p68{height: 68%;}
#contents dl#graph span.p69{height: 69%;}
#contents dl#graph span.p70{height: 70%;}
#contents dl#graph span.p71{height: 71%;}
#contents dl#graph span.p72{height: 72%;}
#contents dl#graph span.p73{height: 73%;}
#contents dl#graph span.p74{height: 74%;}
#contents dl#graph span.p75{height: 75%;}
#contents dl#graph span.p76{height: 76%;}
#contents dl#graph span.p77{height: 77%;}
#contents dl#graph span.p78{height: 78%;}
#contents dl#graph span.p79{height: 79%;}
#contents dl#graph span.p80{height: 80%;}
#contents dl#graph span.p81{height: 81%;}
#contents dl#graph span.p82{height: 82%;}
#contents dl#graph span.p83{height: 83%;}
#contents dl#graph span.p84{height: 84%;}
#contents dl#graph span.p85{height: 85%;}
#contents dl#graph span.p86{height: 86%;}
#contents dl#graph span.p87{height: 87%;}
#contents dl#graph span.p88{height: 88%;}
#contents dl#graph span.p89{height: 89%;}
#contents dl#graph span.p90{height: 90%;}
#contents dl#graph span.p91{height: 91%;}
#contents dl#graph span.p92{height: 92%;}
#contents dl#graph span.p93{height: 93%;}
#contents dl#graph span.p94{height: 94%;}
#contents dl#graph span.p95{height: 95%;}
#contents dl#graph span.p96{height: 96%;}
#contents dl#graph span.p97{height: 97%;}
#contents dl#graph span.p98{height: 98%;}
#contents dl#graph span.p99{height: 99%;}
#contents dl#graph span.p100{height: 100%;}