[CSS] カレンダー

Posted by
ぴろり
Posted at
2007/04/11 02:49
Post Comment
コメントできます
Category
開発メモ カテゴリ

 今更目新しいこともありませんが、TABLEで作られたカレンダーをCSSで装飾してみるテスト。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

ソースコード

<style>
.calendar table {
	border-bottom: solid 1px black;
	border-right: solid 1px black;
}

.calendar th {
	color: #fff;
	background-color: pink;
	width: 40px;
	border-top: solid 1px black;
	border-left: solid 1px black;
}

.calendar td {
	color: #000;
	background-color: #eee;
	border-top: solid 1px black;
	border-left: solid 1px black;
	text-align: center;
}

.calendar a {
	color: red;
	background-color: #ddd;
	display: block; /* ここがミソ? */
}

.calendar a:hover {
	background-color: #fff;
}
</style>

<div class="calendar">
  <table cellpadding="0" cellspacing="0">
    <caption>2007 Apr.</caption>
    <tr>
      <th>M</th><th>Tu</th><th>W</th><th>Th</th><th>F</th><th>Sa</th><th>Su</th>
    </tr>
    <tr>
      <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>1</td>
    </tr>
    <tr>
      <td>2</td><td>3</td><td><a href="#">4</a></td><td>5</td><td>6</td><td>7</td><td>8</td>
    </tr>
    <tr>
      <td>9</td><td>10</td><td>11</td><td>12</td><td>…</td><td>…</td><td>…</td>
    </tr>
  </table>
<!--calendar--></div>

 Windows XP の Firefox、Opera、Netscapeであれば、枠内ならリンクが反応するものの、IEでは文字の上にカーソルを持っていかないとオンマウス判定されないみたいです。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  



コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。