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 は自動的にリンクされます・"<" は "<"、">" は ">" と書いてください
投稿確認	コメントスパム防止のため投稿前にを入力してから投稿してください。お手数ですがご協力のほど宜しくお願いいたします。(必須)

フッタメニュー

Copyright © 2004-2008 Open MagicVox.net. Some rights reserved under Creative Commons License.
Written in Japanese (utf-8). Japanese fonts are required to view this page.
Generated with Movable Type Open Source 4.15b4b-en

Total Visits:

/ Today:

/ Yesterday:

ヘッダメニュー

CSSでカレンダー

ソースコード

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

この記事のアーカイブ

コメントを投稿する

リファレンス

ツール

関連する商品

モバイル

ナビゲーション

記事検索

勝手におすすめ

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

最近の人気記事

フッタメニュー

ヘッダメニュー

CSSでカレンダー

ソースコード

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

その他の関連する記事

この記事のアーカイブ

コメントを投稿する

リファレンス

ツール

関連する商品

モバイル

ナビゲーション

記事検索

勝手におすすめ

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

最近の人気記事

フッタメニュー