CSSでカレンダー

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

ソースコード

サンプル

ソースコード

<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では文字の上にカーソルを持っていかないとオンマウス判定されないみたいです。

コメントを投稿する

返信先
コメント	お気軽にコメントをお寄せくださいませ・コメントを投稿するにはブラウザの JavaScript を有効にしてください・入力された通りに改行位置で改行されます・HTML タグは使用できませんが、文中の URL は自動的にリンクされます・"<" は "<"、">" は ">" と書いてください　・MovableType関係の質問でテンプレートタグをそのまま書かれると見えません
名前	(匿名可/必須/公開)
メール	(匿名可/必須/非公開)
投稿確認	(必須) コメントスパム防止のため投稿前にを入力してから投稿してください。お手数ですがご協力のほど宜しくお願いいたします。

ヘッダメニュー

CSSでカレンダー

ソースコード

この記事を読んだ人はこんな記事も読んでいます

この記事のアーカイブ

コメントを投稿する

リファレンス

ブロガープロフィール

ツール

関連する商品

モバイル

ナビゲーション

記事検索

勝手におすすめ

最近のコメント/関連記事

最近の人気記事

フッタメニュー

ヘッダメニュー

CSSでカレンダー

ソースコード

この記事を読んだ人はこんな記事も読んでいます

その他の関連する記事

この記事のアーカイブ

コメントを投稿する

リファレンス

ブロガープロフィール

ツール

関連する商品

モバイル

ナビゲーション

記事検索

勝手におすすめ

最近のコメント/関連記事

最近の人気記事

フッタメニュー