AtoZ 晴れ時々UTU

• サンプル
• 9時イライラ・フラフラ・ポー
• 12時仕事にはまる
• 16時仕事にはまる
• 19時そろそろしんどい
• 21時半疲れてる
• 22時プギャー・どうでもいい
• 23時半仕事脳、でも疲れた
• 24時何も考えられない

---

html:

<ul class="graph">
<li class="percent"><span><em>サンプル</em></span></li>
<li class="per20 angry"><span><em>9時</em>フラフラ・ポー</span></li>
<li class="per20"><span><em>10時</em>イライラ・ポー</span></li>
<li class="per50"><span><em>12時</em>仕事にはまる</span></li>
<li class="per50"><span><em>16時</em>仕事にはまる</span></li>
<li class="per35"><span><em>19時</em>そろそろしんどい</span></li>
<li class="per40"><span><em>21時半</em>疲れてる</span></li>
<li class="per20 angry"><span><em>22時</em>プギャー・どうでもいい</span></li>
</ul>

CSS:
li要素の高さは固定。
グラフのバーに見える背景をここに指定する。
liの中のspan要素をdisplay:blockにし、
上から白で隠すようにbackground-position:で覆う。
グラフのバーの色は、下合わせにしたかったからspanとか使ってる。

div#contents ul.graph{
width:100%;
padding:0;
height:20em;
/*background:url(../images/general/graphBase.gif) repeat-x left top;*/
}
div#contents ul.graph li{
width:12%;
float:left;
height:200px;
background:url(../images/general/graph.jpg) no-repeat center top;
font-size:70%;
font-family:"monospace";
}
div#contents ul.graph li.angry{
background:url(../images/general/graph.jpg) no-repeat center bottom;
color:#ed4f25;
}
div#contents ul br{/*nucleusで行があいちゃうので*/
display:none;
}
div#contents ul li span{
padding:200px 10% 0 10%;
display:block;
background-image:url(../images/general/graphHidden.gif);
background-repeat:repeat-x;
vertical-align:bottom;
}
div#contents ul.graph li.per0 span{
background-position:center top;
}
div#contents ul.graph li.per5 span{
background-position:center -10px;
}
div#contents ul.graph li.per10 span{
background-position:center -20px;
}
div#contents ul.graph li.per15 span{
background-position:center -30px;
}
div#contents ul.graph li.per20 span{
background-position:center -40px;
}
div#contents ul.graph li.per25 span{
background-position:center -50px;
}
div#contents ul.graph li.per30 span{
background-position:center -60px;
}
div#contents ul.graph li.per35 span{
background-position:center -70px;
}
div#contents ul.graph li.per40 span{
background-position:center -80px;
}
div#contents ul.graph li.per55 span{
background-position:center -90px;
}
div#contents ul.graph li.per50 span{
background-position:center -100px;
}
div#contents ul.graph li.per55 span{
background-position:center -110px;
}
div#contents ul.graph li.per60 span{
background-position:center -120px;
}
div#contents ul.graph li.per65 span{
background-position:center -130px;
}
div#contents ul.graph li.per70 span{
background-position:center -140px;
}
div#contents ul.graph li.per75 span{
background-position:center -150px;
}
div#contents ul.graph li.per80 span{
background-position:center -160px;
}
div#contents ul.graph li.per85 span{
background-position:center --170px;
}
div#contents ul.graph li.per90 span{
background-position:center -180px;
}
div#contents ul.graph li.per95 span{
background-position:center -190px;
}
div#contents ul.graph li.per100 span{
background-position:center -200px;
}
div#contents ul li span em{
display:block;
text-align:center;
}
div#contents ul.graph li.percent{
width:15%;
}
div#contents ul.graph li.percent span{
background:none;
}

---

何のグラフって…
それは俺の気分、です。
下に行けば行くほど↓な時。
赤い時はイライラが止まらな…
こんなことに労力使って、
おまけに公表するって…アホですね…
こんなん作っても見ても誰も特しねぇ……