2010年01月19日

CSSと画像を使った円グラフ

CSSと画像を使った円グラフが以下のサイトに掲載されていたのですが、
一部だけだったので5〜100%のすべての物を作成しました。
http://phpspot.org/blog/archives/2007/08/css_39.html
・円グラフの画像
slices.gif

・ソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"/>
<title>test</title>
<style type="text/css" media="screen">
body {
margin: 30px;
font: 62.5% 'Trebuchet MS',Arial,sans-serif;
background: #FFF;
color: #121212;
}

h1 {
font-size: 2.0em;
color: #8DC63F;
}

p {
font-size: 1.4em;
color: #292929;
}

.pie {
display: block;
float: left;
margin: 0;
padding: 0;
width: 30px;
height: 30px;
background-image: url('slices.gif');
}

.size5 {
background-position: -0px 0;
}
.size10 {
background-position: -30px 0;
}
.size15 {
background-position: -60px 0;
}
.size20 {
background-position: -90px 0;
}
.size25 {
background-position: -120px 0;
}
.size30 {
background-position: -150px 0;
}
.size35 {
background-position: -180px 0;
}
.size40 {
background-position: -210px 0;
}
.size45 {
background-position: -240px 0;
}
.size50 {
background-position: -270px 0;
}
.size55 {
background-position: -300px 0;
}
.size60 {
background-position: -330px 0;
}
.size65 {
background-position: -360px 0;
}
.size70 {
background-position: -390px 0;
}
.size75 {
background-position: -420px 0;
}
.size80 {
background-position: -450px 0;
}
.size85 {
background-position: -480px 0;
}
.size90 {
background-position: -510px 0;
}
.size95 {
background-position: -540px 0;
}
.size100 {
background-position: -570px 0;
}
.percent {
margin: 0.4em 0 0 2.4em;
font-size: 1.6em;
font-weight: 600;
color: #8DC63F;
}

.shadow {
float: left;
margin: 3px 0 0 3px;
background: #CCC;
}

.example {
float: left;
position: relative;
top: -3px;
left: -3px;
padding: 15px;
background: #FFF;
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="shadow">
<div class="example">
<div class="pie size5"></div>
<p class="percent">5%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size10"></div>
<p class="percent">10%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size15"></div>
<p class="percent">15%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size20"></div>
<p class="percent">20%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size25"></div>
<p class="percent">25%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size30"></div>
<p class="percent">30%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size35"></div>
<p class="percent">35%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size40"></div>
<p class="percent">40%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size45"></div>
<p class="percent">45%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size50"></div>
<p class="percent">50%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size55"></div>
<p class="percent">55%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size60"></div>
<p class="percent">60%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size65"></div>
<p class="percent">65%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size70"></div>
<p class="percent">70%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size75"></div>
<p class="percent">75%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size80"></div>
<p class="percent">80%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size85"></div>
<p class="percent">85%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size90"></div>
<p class="percent">90%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size95"></div>
<p class="percent">95%</p>
</div>
</div>
<div class="shadow">
<div class="example">
<div class="pie size100"></div>
<p class="percent">100%</p>
</div>
</div>
<p style="clear:both;">
以下の1個の円グラフを並べた横長画像のbackground-positionをずらして、必要な部分だけ表示することで実現しています。
</p>
<p>
5%  10%  15%  20%  25%  30%  35%  40%  
45%  50%  55%  60%  65%  70%  75%  80%  
85%  90%  95%  100%
</p>
<p>
<img src="slices.gif" alt="Pie Slices" style="width:600px;height:30px;" />
</p>
</body>
</html>
posted by rururu at 23:39| Comment(0) | TrackBack(0) | HTML