CSS勉強中（Djangoも勉強中）

Dev-Python

最近、少しづつですが、Djangoの勉強を再開してます。
バージョンが1.0になってから始めてのアプリ制作ですのでいろいろとつまづいたり
してますが、結構面白いです。（笑）


さて、今作っているのは、カレンダーです。
家族（といっても、私と奥さんですが）の予定を共有できるように
してみよう！というのが狙いです。
Googleカレンダーを使えば。。。とかというのはとりあえずなしで、
「Djangoを使って」というとこがポイント。


モデルを作って、ビューも作ったんですが、どうもスッキリしません。。。
絶対に、もっと簡単に（というかエレガントに）つくれると思うんですよね、きっと。


それで思ったのが、

「CSSを上手に使えば、もう少しテンプレートがシンプルになるかも」

でした。


ということで、少し寄り道になってしまいますが、ここらでHTML + CSS を
勉強してみることにしました。


今のところはこんな感じです。


色使いは、いつもながら「ううむ。。」といったところですが、
Djangoだよね、と思って。


で、上記のスクリーンショットのソースとCSSは次のような感じです。

●ソース

<!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</div>

  <div id="header2">
	<div id="head_mon">MON</div>
	<div id="head_tue">TUE</div>
	<div id="head_wed">WED</div>
	<div id="head_thu">THU</div>
	<div id="head_fri">FRI</div>
	<div id="head_sat">SAT</div>
	<div id="head_sun">SUN</div>
  </div>

  <div class="clear"><hr/></div>

  <div id="week1">
	<div class="weekday"></div>
	<div class="weekday"></div>
	<div class="weekday"></div>
	<div class="weekday">
      <span class="weekday_label">1</span>
	  <ul class="task_item">
		<li>aaaa</li>
		<li>bbbbb</li>
		<li>cccc</li>
	  </ul>
	</div>
	<div class="weekday"><span class="weekday_label">2</span></div>
	<div class="weekend"><span class="weekend_label">3</span></div>
	<div class="weekend"><span class="weekend_label">4</span></div>
  </div>
  
  <div class="clear"><hr/></div>

  <div id="week2">
	<div class="weekday"><span class="weekday_label">5</span></div>
	<div class="weekday"><span class="weekday_label">6</span></div>
	<div class="weekday"><span class="weekday_label">7</span></div>
	<div class="weekday"><span class="weekday_label">8</span></div>
	<div class="weekday"><span class="weekday_label">9</span></div>
	<div class="weekend"><span class="weekend_label">10</span></div>
	<div class="weekend"><span class="weekend_label">11</span></div>
  </div>
  
  <div class="clear"><hr/></div>

  <div id="week3">
	<div class="weekday"><span class="weekday_label">12</span></div>
	<div class="weekday"><span class="weekday_label">13</span></div>
	<div class="weekday"><span class="weekday_label">14</span></div>
	<div class="weekday"><span class="weekday_label">15</span></div>
	<div class="weekday"><span class="weekday_label">16</span></div>
	<div class="weekend"><span class="weekend_label">17</span></div>
	<div class="weekend"><span class="weekend_label">18</span></div>
  </div>
  
  <div class="clear"><hr/></div>

  <div id="week4">
	<div class="weekday"><span class="weekday_label">19</span></div>
	<div class="weekday"><span class="weekday_label">20</span></div>
	<div class="weekday"><span class="weekday_label">21</span></div>
	<div class="weekday"><span class="weekday_label">22</span></div>
	<div class="weekday"><span class="weekday_label">23</span></div>
	<div class="weekend"><span class="weekend_label">24</span></div>
	<div class="weekend"><span class="weekend_label">25</span></div>
  </div>
  
  <div class="clear"><hr/></div>

  <div id="week5">
 	<div class="weekday"><span class="weekday_label">26</span></div>
	<div class="weekday"><span class="weekday_label">27</span></div>
	<div class="weekday"><span class="weekday_label">28</span></div>
	<div class="weekday"><span class="weekday_label">29</span></div>
	<div class="weekday"><span class="weekday_label">30</span></div>
	<div class="weekend"><span class="weekend_label">31</span></div>
	<div class="weekend"></div>
 </div>
</div>
</body>
</html>

●CSS

.clear {
	clear:both;
}
.clear hr
{
	display: none;
}

#container {
	width: 560px;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
	border: dotted 1px #555555;
}

#header1 {
	width: 100%;
	height: 30px;
	background-color: #004400;
	color : #eeffee;
	text-align: center;
	line-height: 30px;
	vertical-align: middle;
	font-weight: bold;
	font-size: x-large;
}

#header2 {
	width: 100%;
	height: 20px;
	color : #eeffee;
}

#head_mon, #head_tue, #head_wed, #head_thu, #head_fri {
	width: 80px;
	height: 20px;
	margin: -1px;
	border: solid 1px #bbccbb;
	background-color: #446644;
	text-align: center;
	line-height: 20px;
	vertical-align: middle;
	font-weight: bold;
	float: left;
}

#head_sat, #head_sun {
	width: 80px;
	height: 20px;
	margin: -1px;
	border: solid 1px #bbccbb;
	background-color:#f0a000;
	text-align: center;
	line-height: 20px;
	vertical-align: middle;
	font-weight: bold;
	float: left;
}

#week1, #week2, #week3, #week4, #week5 {
	width: 100%;
	height: 80px;
	border: solid 0px #ff0000;
}

.weekday {
	width: 80px;
	height: 80px;
	margin: -1px;
	background-color: #f5fff5;
	border: solid 1px #bbccbb;
	float: left;
}

.weekday_label {
	color: #447744;
	font-weight: bold;
	padding-left: 2px;
}

.weekend {
	width: 80px;
	height: 80px;
	margin: -1px;
	background-color: #fffff0;
	border: solid 1px #bbccbb;
	float: left;
}

.weekend_label {
	color: #f0a000;
	font-weight: bold;
	padding-left: 2px;
}

.task_item {
	list-style-position: inside;
	padding-left: 0.1em;
}


カレンダーを作る場合には、本来はテーブルを使ったほうがいいのかも
知れないですが、CSSの練習がメインなのでテーブルを使わずにやってみました。


さて、今回作ったものをDjangoで制作中のカレンダーテンプレートに流用したら
少しはテンプレートがスッキリするかな。。。