株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

05-03)　　1. テーブルを使ってカレンダーのデザイン作成

　

カレンダーのデザインをｃｓｓに設定し表示する。
日付の個別データをXHTMLに設定をする。

ｃｓｓの書き方 /*-------------------------------------------------------
05-03 テーブルを使ってカレンダーのデザイン
-------------------------------------------------------- */
.info_921{
 width: 193px;
 margin: 0 0 20px 100px;
 border: 1px solid #000000;
}
.info_921 h4{
 margin: 0 0 5px 0;
 padding: 3px;
 background-color: #000000;
 color: #FFFFFF;
 font-size: 82%;
 text-align: center;
}

.info_921 dl{
 width: 181px;
 margin: 0 6px 4px 6px;
}
.info_921 dt{
 clear: both;
 float: left;
 width: 5em;
 line-height: 1.4;
}
.info_921 dd{
 float: left;
 width: 7em;
 line-height: 1.4;
}

.tbl_921{
 width: 185px;
 margin: 0 auto 10px auto;
 border-collapse: separate;
 border-spacing: 2px;
}
.tbl_921 caption{
 table-caption: top;
 text-align: left;
 font-size: 90%;
 font-weight: normal;
}
.tbl_921 th{
 padding: 2px;
 background-color: #CCCCCC;
 text-align: center;
 font-size: 90%;
 font-weight: normal;
}
.tbl_921 td{
 padding: 2px;
 background-color: #FFFFFF;
 text-align: center;
 font-size: 90%;
}
.tbl_921 td del{
 display: block;
 background-image: url("../images/cafe_line_del.gif");
 background-repeat: no-repeat;
 background-position: right top;
 text-decoration: none;
}
.sun{ color: #990000;}
.sat{ color: #003399;}
.holiday{ color: #990000;}
HTMLの使用例  <div class="info_921">
<h4>定休日・営業時間のご案内</h4>
<table class="tbl_921">
<caption>2013年9月</caption>
<tr>
<th scope="col">日</th>
<th scope="col">月</th>
<th scope="col">火</th>
<th scope="col">水</th>
<th scope="col">木</th>
<th scope="col">金</th>
<th scope="col">土</th>
</tr>
<tr>
<td class="sun">1</td>
<td><del title="定休日">2</del></td>
<td class="holiday">3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td class="sat">7</td>
</tr>
<tr>
<td class="sun">8</td>
<td><del title="定休日"><span>9</span></del></td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td class="sat">14</td>
</tr>
--- 以降省略　-----
</table>

<dl>
<dt>営業時間</dt>
<dd>11:00〜23:00</dd>
<dt>定休日</dt>
<dd>月曜日</dd>
</dl>
</div>

定休日・営業時間のご案内

2013年9月
日 月 火 水 木 金 土
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
営業時間
11:00〜23:00
定休日
月曜日