CSS勉強中　その２ - LinuxとかBlenderとかVol２

前回はCSSで月単位のカレンダーを作ってみましたが、今回は１日分の
予定を表示するためのカレンダー作ってみました。

今回は勉強になりました。
中でも「class=」には複数の属性(?というのか。。?)を指定できるということでした。
クラスの多重継承のような感じでとても便利です。

表示結果はこんな感じです。

ソースはこんな感じです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="container">
  <div id="header1">2009/01/01</div>

  <div id="timeframe">
	  <div class="timeline">00:00</div>
	  <div class="timeline">01:00</div>
	  <div class="timeline">02:00</div>
	  <div class="timeline">03:00</div>
	  <div class="timeline">04:00</div>
	  <div class="timeline">05:00</div>
	  <div class="timeline">06:00</div>
	  <div class="timeline">07:00</div>
	  <div class="timeline">08:00</div>
	  <div class="timeline">09:00</div>
	  <div class="timeline">10:00</div>
	  <div class="timeline">11:00</div>
	  <div class="timeline">12:00</div>
	  <div class="timeline">13:00</div>
	  <div class="timeline">14:00</div>
	  <div class="timeline">15:00</div>
	  <div class="timeline">16:00</div>
	  <div class="timeline">17:00</div>
	  <div class="timeline">18:00</div>
	  <div class="timeline">19:00</div>
	  <div class="timeline">20:00</div>
	  <div class="timeline">21:00</div>
	  <div class="timeline">22:00</div>
	  <div class="timeline">23:00</div>
  </div>

  <div class="userframe">
	<div class="timefield timeunit10 active">予定１</div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit50 active">予定２</div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit75 active">予定３</div>
	<div class="timefield timeunit05 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
  </div>

  <div class="userframe">
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit30 active">Task 1</div>
	<div class="timefield timeunit05 normal"></div>
	<div class="timefield timeunit55 active">Task 2</div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit65 active">Task 3</div>
	<div class="timefield timeunit05 normal"></div>
	<div class="timefield timeunit10 normal"></div>
	<div class="timefield timeunit10 normal"></div>
  </div>
</div>
</body>
</html>

CSSはこんな感じです。

#timeframe {
	width: 40px;
	height: 100%;
	margin: -1px;
    border: solid 1px #bbccbb;
	float:left;
}

.userframe {
	width: 260px;
	height: 100%;
	margin: -1px;
    border: solid 1px #bbccbb;
	float:left;
}

.timeline {
	width: 100%;
    height: 25px;
	margin: -1px;
	background-color:#557755;
    border: solid 1px #bbccbb;
	color : #eeffee;
	font-weight: bold;
	text-align: center;
	line-height: 24px;
	vertical-align: middle;
}

.timefield {
	width: 100%;
	margin: -1px;
    border: solid 1px #bbccbb;
	text-align: center;
	vertical-align: middle;
}

.normal { background-color:#f5fff5; }
.active { background-color:#fffff0; }

.timeunit05 { height: 12px; line-height: 12px; }
.timeunit10 { height: 25px; line-height: 25px; }

.timeunit15 { height: 38px; line-height: 38px; }
.timeunit20 { height: 51px; line-height: 51px; }

.timeunit25 { height: 64px; line-height: 64px; }
.timeunit30 { height: 77px; line-height: 77px; }

.timeunit35 { height: 90px; line-height: 90px; }
.timeunit40 { height: 103px; line-height: 103px; }

.timeunit45 { height: 116px; line-height: 116px; }
.timeunit50 { height: 129px; line-height: 129px; }

.timeunit55 { height: 142px; line-height: 142px; }
.timeunit60 { height: 155px; line-height: 155px; }

.timeunit65 { height: 168px; line-height: 168px; }
.timeunit70 { height: 181px; line-height: 181px; }

.timeunit75 { height: 194px; line-height: 194px; }
.timeunit80 { height: 207px; line-height: 207px; }

.timeunit85 { height: 220px; line-height: 220px; }
.timeunit90 { height: 233px; line-height: 233px; }

.timeunit95 { height: 246px; line-height: 246px; }
.timeunit100 { height: 259px; line-height: 259px; }

.timeunit105 { height: 272px; line-height: 272px; }
.timeunit110 { height: 285px; line-height: 285px; }

.timeunit115 { height: 298px; line-height: 298px; }
.timeunit120 { height: 311px; line-height: 311px; }

.timeunit125 { height: 324px; line-height: 324px; }
.timeunit130 { height: 337px; line-height: 337px; }

.timeunit135 { height: 350px; line-height: 350px; }
.timeunit140 { height: 363px; line-height: 363px; }

.timeunit145 { height: 376px; line-height: 376px; }
.timeunit150 { height: 389px; line-height: 389px; }

.timeunit155 { height: 402px; line-height: 402px; }
.timeunit160 { height: 415px; line-height: 415px; }

.timeunit165 { height: 428px; line-height: 428px; }
.timeunit170 { height: 441px; line-height: 441px; }

.timeunit175 { height: 454px; line-height: 454px; }
.timeunit180 { height: 467px; line-height: 467px; }

.timeunit185 { height: 480px; line-height: 480px; }
.timeunit190 { height: 493px; line-height: 493px; }

.timeunit195 { height: 506px; line-height: 506px; }
.timeunit200 { height: 519px; line-height: 519px; }

.timeunit205 { height: 532px; line-height: 532px; }
.timeunit210 { height: 545px; line-height: 545px; }

.timeunit215 { height: 558px; line-height: 558px; }
.timeunit220 { height: 571px; line-height: 571px; }

.timeunit225 { height: 584px; line-height: 584px; }
.timeunit230 { height: 597px; line-height: 597px; }

.timeunit235 { height: 610px; line-height: 610px; }
.timeunit240 { height: 623px; line-height: 623px; }

いやはや、Djangoで作成中のカレンダー、いつになったら完成することやら（笑）