Home > スポンサー広告 > コピペで使えるCSS/htmlカレンダー

スポンサーサイト

--------
スポンサー広告

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

Home > CSS/html > コピペで使えるCSS/htmlカレンダー

Newer
Older

コピペで使えるCSS/htmlカレンダー

2009-07-24
CSS/html

htmlでカレンダーを作成したいとき、Javascriptで動的に作成することが多いと思います。Web上にサンプルコードもたくさんありますね。

今回、需要があるかどうか解りませんが、Javascriptを使用せずCSSとhtmlだけでカレンダーを作成しました。動的更新されないシンプルなカレンダーです。

コピペするだけで、あなたのサイト上にカレンダーが表示されます！もちろん、加工も御自由にどうぞ！需要あるかな・・・(^^ゞ

詳細は以下から。

まずはCSSから。

@charset "utf-8";

/* テーブル全体設定 */
table {
	font-size: 13px;
	color: #000;
	border: 3px solid #ddd;
	background-color: #fff;
}

/* キャプション */
table caption {
	color: #000;
}

tr {
	background-color: #eee;
}

/* 曜日タイトル行 */
tr.dow {
	background-color: #ccc;
}

td {
	text-align: center;
}

/* 祝祭日の文字色 */
td.hol {
	color: #dc143c;
}

/* 日曜日の文字色 */
td.sun {
	color: #dc143c;
}

/* 土曜日の文字色 */
td.sat {
	color: #0000cd;
}

2009年8月・9月・10月・11月・12月のカレンダーです。htmlソースの内容自体は大したこと無いんですが長いんで、表示負荷軽減のためあえてSyntaxHighlighter使ってません。

<!-- 2009.08 -->

	<table>
		<caption>平成21年8月</caption>
		<tr class="dow">
			<td width="30" class="sun">日</td>
			<td width="30">月</td>
			<td width="30">火</td>
			<td width="30">水</td>
			<td width="30">木</td>
			<td width="30">金</td>
			<td width="30" class="sat">土</td>
		</tr>
		<tr>
			<td><br></td>
			<td><br></td>
			<td><br></td>
			<td><br></td>
			<td><br></td>
			<td><br></td>
			<td class="sat">1</td>
		</tr>
		<tr>
			<td class="sun">2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td class="sat">8</td>
		</tr>
		<tr>
			<td class="sun">9</td>
			<td>10</td>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
			<td class="sat">15</td>
		</tr>
		<tr>
			<td class="sun">16</td>
			<td>17</td>
			<td>18</td>
			<td>19</td>
			<td>20</td>
			<td>21</td>
			<td class="sat">22</td>
		</tr>
		<tr>
			<td class="sun">23</td>
			<td>24</td>
			<td>25</td>
			<td>26</td>
			<td>27</td>
			<td>28</td>
			<td class="sat">29</td>
		</tr>
		<tr>
			<td class="sun">30</td>
			<td>31</td>
			<td><br></td>
			<td><br></td>
			<td><br></td>
			<td><br></td>
			<td><br></td>
		</tr>
	</table>


<!-- 2009.09 -->

	<table>
		<caption>平成21年9月</caption>
		<tr class="dow">
			<td width="30" class="sun">日</td>
			<td width="30">月</td>
			<td width="30">火</td>
			<td width="30">水</td>
			<td width="30">木</td>
			<td width="30">金</td>
			<td width="30" class="sat">土</td>
		</tr>
		<tr>
			<td><br></td>
			<td><br></td>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td class="sat">5</td>
		</tr>
		<tr>
			<td class="sun">6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
			<td>11</td>
			<td class="sat">12</td>
		</tr>
		<tr>
			<td class="sun">13</td>
			<td>14</td>
			<td>15</td>
			<td>16</td>
			<td>17</td>
			<td>18</td>
			<td class="sat">19</td>
		</tr>
		<tr>
			<td class="sun">20</td>
			<td class="hol">21</td>
			<td class="hol">22</td>
			<td class="hol">23</td>
			<td>24</td>
			<td>25</td>
			<td class="sat">26</td>
		</tr>
		<tr>
			<td class="sun">27</td>
			<td>28</td>
			<td>29</td>
			<td>30</td>
			<td><br></td>
			<td><br></td>
			<td><br></td>
		</tr>
	</table>


<!-- 2009.10 -->

	<table>
		<caption>平成21年10月</caption>
		<tr class="dow">
			<td width="30" class="sun">日</td>
			<td width="30">月</td>
			<td width="30">火</td>
			<td width="30">水</td>
			<td width="30">木</td>
			<td width="30">金</td>
			<td width="30" class="sat">土</td>
		</tr>
		<tr>
			<td><br></td>
			<td><br></td>
			<td><br></td>
			<td><br></td>
			<td>1</td>
			<td>2</td>
			<td class="sat">3</td>
		</tr>
		<tr>
			<td class="sun">4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td class="sat">10</td>
		</tr>
		<tr>
			<td class="sun">11</td>
			<td class="hol">12</td>
			<td>13</td>
			<td>14</td>
			<td>15</td>
			<td>16</td>
			<td class="sat">17</td>
		</tr>
		<tr>
			<td class="sun">18</td>
			<td>19</td>
			<td>20</td>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td class="sat">24</td>
		</tr>
		<tr>
			<td class="sun">25</td>
			<td>26</td>
			<td>27</td>
			<td>28</td>
			<td>29</td>
			<td>30</td>
			<td>31</td>
		</tr>
	</table>


<!-- 2009.11 -->

	<table>
		<caption>平成21年11月</caption>
		<tr class="dow">
			<td width="30" class="sun">日</td>
			<td width="30">月</td>
			<td width="30">火</td>
			<td width="30">水</td>
			<td width="30">木</td>
			<td width="30">金</td>
			<td width="30" class="sat">土</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td class="hol">3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td class="sat">7</td>
		</tr>
		<tr>
			<td class="sun">8</td>
			<td>9</td>
			<td>10</td>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td class="sat">14</td>
		</tr>
		<tr>
			<td class="sun">15</td>
			<td>16</td>
			<td>17</td>
			<td>18</td>
			<td>19</td>
			<td>20</td>
			<td class="sat">21</td>
		</tr>
		<tr>
			<td class="sun">22</td>
			<td class="hol">23</td>
			<td>24</td>
			<td>25</td>
			<td>26</td>
			<td>27</td>
			<td class="sat">28</td>
		</tr>
		<tr>
			<td class="sun">29</td>
			<td>30</td>
			<td><br></td>
			<td><br></td>
			<td><br></td>
			<td><br></td>
			<td><br></td>
		</tr>
	</table>


<!-- 2009.12 -->

	<table>
		<caption>平成21年12月</caption>
		<tr class="dow">
			<td width="30" class="sun">日</td>
			<td width="30">月</td>
			<td width="30">火</td>
			<td width="30">水</td>
			<td width="30">木</td>
			<td width="30">金</td>
			<td width="30" class="sat">土</td>
		</tr>
		<tr>
			<td><br></td>
			<td><br></td>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td class="sat">5</td>
		</tr>
		<tr>
			<td class="sun">6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
			<td>11</td>
			<td class="sat">12</td>
		</tr>
		<tr>
			<td class="sun">13</td>
			<td>14</td>
			<td>15</td>
			<td>16</td>
			<td>17</td>
			<td>18</td>
			<td class="sat">19</td>
		</tr>
		<tr>
			<td class="sun">20</td>
			<td>21</td>
			<td>22</td>
			<td class="hol">23</td>
			<td>24</td>
			<td>25</td>
			<td class="sat">26</td>
		</tr>
		<tr>
			<td class="sun">27</td>
			<td>28</td>
			<td>29</td>
			<td>30</td>
			<td>31</td>
			<td><br></td>
			<td><br></td>
		</tr>
	</table>

Comments:

Trackback+Pingback:

TrackBack URL for this entry: http://individualpackage.blog41.fc2.com/tb.php/54-e7e6f9f7
Listed below are links to weblogs that reference: from Individual Package

Home > > コピペで使えるCSS/htmlカレンダー

BlogRanking