CSSでカレンダー表示

トップページにある日記のカレンダーですが(後に、デザイン変更の際削除しました)、CSSで作ったテーブルです。実は。CSSをオフにしていただけると分かると思いますが（CSS切り替えでnoneにするなど）、CSSを適用していないときの表示結果は以下のとおりになります。

Sun Mon Tue Wed Thu Fri Sat 1 2 3 4 5 6 7 8 9 10 11 12 13.......

このソースを覗くとこうなっています。

<h2 class="caption"><$MTDate format="%B %Y"$></h2>
<div class="calendar" title="カレンダー表示/それぞれの日のエントリーにリンク">
	<span class="calendartable">
		<span class="head">
			<span class="group">
				<span title="Sunday" class="week">Sun</span>
				<span title="Monday" class="week">Mon</span>
				<span title="Tuesday"  class="week">Tue</span>
				<span title="Wednesday" class="week">Wed</span>
				<span title="Thursday" class="week">Thu</span>
				<span title="Friday" class="week">Fri</span>
				<span title="Saturday" class="week">Sat</span>
			</span>
		</span>
		<span class="column">
		<MTCalendar>
			<MTCalendarWeekHeader><span class="group"></MTCalendarWeekHeader>
					<span <MTCalendarIfToday>id="today"</MTCalendarIfToday> class="day">
					<MTCalendarIfEntries>
					<MTEntries lastn="1">
					<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
					</MTEntries>
					</MTCalendarIfEntries>
					<MTCalendarIfNoEntries>
					<$MTCalendarDay$>
					</MTCalendarIfNoEntries>
					<MTCalendarIfBlank>
					</MTCalendarIfBlank>
					</span>
			<MTCalendarWeekFooter></span></MTCalendarWeekFooter>
		</MTCalendar>
		</span>
	</span>
</div>

強調してあるところはMTでの引数です。

それぞれspanを入れ子にしていきますが、ソースを記述する際、オーバーラップしないように気をつけてください。私はこんがらがってよく間違えます…。

<div class="calendar">でのtitleはtableでいうsummary(要約)のようなものだと思ってください。.captionはcaption(表題)。

CSSを指定するまでは、表示は上記のままなので、マークアップに従ってCSSを指定していきます。

/*カレンダー全体*/
.calendar
	{
	margin-left :auto;/*カレンダーを中央に置く*/
	margin-right:auto;
	text-align: center;
	/*width:指定;*/
	}
.calendar a, .calendar a:hover, .calendar a:active, .calendar a:visited, .calendar a:link
	{
	color:#色;/*リンクの色*/
	}
/*今日の日付け*/
#today
	{
	color:#色;
	}
/*テーブルを定義。テーブルにするところの全体を囲む*/
.calendartable
	{
	display: table;
	border-collapse: collapse;
	width:100%;
	text-align: center;
	}
/*テーブルで言うcaption（題名）*/
.caption
	{
	display: table-caption;
	margin:10px;
	font-family:verdana, arial, sans-serif;/*フォントファミリー指定*/
	color:#色;
	font-size:指定;
	background:#色;
	font-weight:bold;
	line-height:140%;
	text-align: center;
	width: 100%;
	}
/*ヘッダーセルであるthを囲むtheadにあたる*/
.head
	{
	display: table-row-group;
	}
/*ボディーセルであるtdを囲むtbodyにあたる*/
.column
	{
	display: table-row-group;
	}
/*テーブルでのtrにあたる*/
.group
	{
	display: table-row;
	width: 100%;
	}
/*テーブルでのヘッダーセルthにあたる*/
.week
	{
	display: table-cell;
	padding:5px;/*セル内側の間隔*/
	width:30px;/*セルのずれを防ぐ*/
	font-family:verdana, arial, sans-serif;/*フォントファミリー指定*/
	color:#色;
	font-size:指定;
	font-weight:normal;
	text-align: center;
	}
/*テーブルでのtdにあたる*/
.day
	{
	display: table-cell;
	padding:5px;/*セル内側の間隔*/
	width:30px;/*セルのずれを防ぐ*/
	font-family:verdana, arial, sans-serif;/*フォントファミリー指定*/
	color:#色;
	font-size:指定;
	font-weight:normal;
	text-align: center;
	}

もちろんこれはIEでうまく表示されません。カレンダーの場合日数の関係から空spanができるのは止むを得ないのですが、operaやgecko系だとそれに関係なく意図通りに表示されるのと反し、IEで確認されたのは空spanであるところのgroupが、少しずつずれこんでいるということです。

おまけにbrder指定と背景指定で見てみるとIEは見るも無残な姿に。

デザインのためのマークアップというか、ちょっとばかし力任せというか、無理矢理なところがあるため仕方ないのかもしれません。

これにはCSS Laboratoryにあるテーブル関連対応テストの記事を参考にさせていただきました。

カレンダーのtdにあたるwidth、指定しても縮小ウィンドウにしたら.weekの部分のデザインが崩れると判明。気になる方は.weekの部分のみwhite-space: nowrap;(改行なし)を入れてください。

Breadcrumbs List

glas-gather のカテゴリーである Index から辿り、サブカテゴリーである Web を辿ると、個別記事である CSSでカレンダー表示 に着きます。