カレンダーはやっぱりtableで作ったほうがいいでしょ
2008年1月16日
コリスさんのエントリー[CSS]テーブル要素を使用しないで制作するカレンダーってのが紹介されていました。リストとCSSでカレンダーを作るというなんとも凄い力技なやり方。方法の一つとして面白いとは思うけれど、曜日と日付の関連を考えればtable使って作るほうが良いに決まってます。
公開されていたデモのソースは下記のようになってます。
<ul>
<li class="day">sun</li>
<li class="day">mon</li>
<li class="day">tues</li>
<li class="day">wed</li>
<li class="day">thurs</li>
<li class="day">fri</li>
<li class="day">sat</li>
<li> </li>
<li> </li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4 <span>event</span></li>
<li>5</li>
以下略
これだと曜日と日付の意味づけがされていません。例えば3日が何曜日なのか知りたいとしましょう。CSSが適用された状態では「見た目」で判断できますが、CSSが切られた状態では3とthurs(木曜日)は関係性が全くわかりません。数字は単に1,2,3,4,5・・・と並べられているだけ。もし曜日と数字のsemanticということを考えるのであれば下記のように書くべきです。
<dl>
<dt>sun</dt>
<dd>
<ul>
<li>6</li>
<li>13</li>
<li>20</li>
<li>27</li>
</ul>
</dd>
<dt>mon</dt>
<dd>
<ul>
<li>7</li>
<li>14</li>
<li>21</li>
<li>28</li>
</ul>
</dd>
～以下略
これなら意味的に数字と曜日を結びつけることができます。・・・ですが、普通こんな変な書き方しないですよね。カレンダーにするにしてもCSSがとっても複雑になりそうだし、こんな書き方するくらいならテーブルを使ってHTMLを書いたほうが100倍楽だし、早いし、HTML的にも曜日と数字の対応が意味づけられるのでtableを使うべきでしょう。tbodyやth要素を使ってしっかりとマークアップしてあげれば何ら問題はありません。
デモのようにカレンダー表記とリスト表記をスクリプトで切り替えたいといった特別な事情が無い限りはtableを使って作るのが無難だと思います。
- このエントリーのトラックバックURL
- http://www.lllcolor.com/web/css/93.html/trackback
- Links
