カレンダーはtableでなければならないか

ぼくも最初は「カレンダーをリストでマークアップってどうなの？」と思ったのです。脱tableレイアウトと言っても，tableを使うべきところはある。曜日をthに入れて，それぞれの日を曜日に関連づけることができる。ulやolにしたらそれはわからなくなる。なんて安易に考えていたのです。

しかし，我的春秋のゆうさんの記事を読んで，目からウロコ！でした。

• 一歩先のWeb標準 ♯10 | Webデザイナー・クリエイター > アイデアノート | withD

前半部分は，カレンダーをulでマークアップすることへの反響が簡単にまとめられています。

中盤あたりにこんなことが書いてありました。

時間の概念構造は不変、見せ方は可変

ご承知の通り、現在のカレンダーには年月日と曜日という概念があります。これは不変です。なのに、ちまたにある紙媒体のカレンダーには、表形式、リスト形式、年表形式、日めくり式など、さまざまなデザインがありますよね？　逆にいえば、見た目のデザインは全然違うのに、背景にある時間概念は同じです。

これは同じ年月日と曜日を表すのにも、どの要素を重視するかでデザインが変わってくるということを意味しています。年月や時間の論理構造や意味は、不変（普遍）。でも見せ方は、目的に応じて可変。

確かに，カレンダーにはいろんなデザインがあります。ぼくはマークアップするとき「カレンダー ＝ 七曜表」という概念にとらわれていたということですね。七曜表だからtableだったんです。

tableにしないことで，カレンダーはいろいろな見せ方ができるんですね。

ulでカレンダーを作ってみる

ゆうさんのサンプルでは，ol, liで日付の 1, 2, 3, 4, ... がマークアップされていました。

• リストからテーブル型カレンダーを表示

ここでふと，「せっかくolを使うなら，1, 2, 3, 4, ... はlist-style-type: decimal;で表示させてもいいんじゃないか。1, 2, 3, 4, ... を366日分入れて，曜日のclassを366日分入れて，という作業はしんどいぞ！」などと，根性なしのぼくは思ったのです。

olなら，何番目の月の何番目の日かは，すでにマークアップによって示されている。曜日もliのclass属性に入れてある。li要素の内容には違うものを入れて，月日を表す数字は入れずにやってみよう。

      <li class="sun">&nbsp;</li>
      <li class="mon">&nbsp;</li>
      <li class="tue">&nbsp;</li>
      <li class="wed">&nbsp;</li>
      <li class="thu">&nbsp;</li>
      <li class="fri">&nbsp;</li>
      <li class="sat">&nbsp;</li>

を53回コピペで入れて，月の区切りに

    </ol>
  </li>
  <li>February
    <ol>

を入れて，最初と最後を<ol>と</ol>でくくればカレンダーの枠は完成。今回は，要素の内容として（ のところに）六曜を入れてみました。

そうやって作ったのがこれ。

• 表示切り替えカレンダー

マークアップはこんな感じです。

<div class="calender">
  <ol>
    <li id="jan"><span lang="en">January</span><span lang="ja">睦月</span>
      <ol>
        <li class="tue hol">先負　<em>元旦</em></li>
        <li class="wed">仏滅</li>
        <li class="thu">大安</li>
        <li class="fri">赤口</li>
        <li class="sat">先勝</li>
        <li class="sun">友引</li>
        <li class="mon">先負（11/29）</li>
        <li class="tue saku">赤口（12/01）</li>
        <li class="wed">先勝</li>
        ......
        <li class="thu">大安</li>
      </ol>
    </li>
    <li id="feb"><span lang="en">February</span><span lang="ja">如月</span>
      <ol>
        <li class="fri">赤口</li>
        ......
        <li class="wed">仏滅</li>
      </ol>
    </li> 
  </ol>
 </div>

CSSを切り替えていろんなパターンで

さらに，マークアップしたXHTMLはそのままに，CSSを切り替えて

• 一日1行
• 数ヶ月ずつ横に並べて
• 日曜日があたま
• 月曜日があたま
• 六曜表

の5つのパーターンで表示できるようにしてみました。（IEには対応していません。たぶんひどいことになると思います）

7日を周期とするという概念をちょっとゆるめるために，六曜表も入れてみました。先勝，友引，先負，仏滅，大安，赤口の6日を周期とするものです。

ファイルは一式ダウンロードできますので，そちらでご覧いただいても，お好きにお使いいただいても結構です。

• calender.zip

CSSのツボ

構造としては，日に対応するli要素を，1ヶ月分olに入れて，月に対応するli要素にネストする。というふうになっています。この月のli要素と，日のli要素の幅を変えたり，floatさせたりすることでカレンダーの形を決めています。

一日1行

ふつうにリスト表示したものにちょっと飾りがついた程度です。

数ヶ月ずつ横に並べて

月のliをfloat: left;
31日までない月はpadding-bottomで下に余白を入れてあります。
ウインドウを広げると，横に並ぶ月の数も増えます。お好みに合わせて。

日曜日があたま

月のliの幅を固定して日のliが7日分入るようにします。
日のliをfloat: left;
li:first-childセレクタでmagin-left: 201px;とやって月のはじまりの位置を決めます。7日分並ぶと次は下に落ちていきます。

月曜日があたま

日曜があたまのパターンから，月のはじまりの位置を一日分左にずらします。

六曜表

月のliの幅を固定して日のliが6日分入るようにします。
あとは，七曜表と同じ。ただし，六曜は旧暦の月の初日で一度リセットされるので，旧暦の1日の位置もmargin-leftで指定します。

まさに「構造（structure）は固定，見栄え（prasentation）はいろいろ」ということですね。tableでマークアップすると，この柔軟性は得られません。