[CSS]テーブル要素を使用しないで制作するカレンダー

テーブル要素(tableなど)を使用しないで、リスト要素(ul, li）を使用して制作するカレンダーの紹介です。

pixelspreadのデモでは、カレンダーをリスト要素でマークアップし、スタイルシートで表組みのようにしています。

カレンダーのようなエレメントはテーブル要素にしていましたが、表組みではなく、リスト要素の方がいいな、と思いました。

Post on:2008年1月15日

スタイルシート見ても、どうやって土曜日で改行してるのはわからない、、、。それにしてもHTMLもJavaScriptもCSSも全部スマートですね。

> えふさん

改行に相当する箇所は、「style_2.css」内にあるリストの幅指定によるものです。
ul{width:364px;}

テーブルじゃダメなの？

> HA さん

テーブルでも、いいと思いますよ。
もちろん、リストがいい時もあると思います。

ただ、考え方というか、こういう発想からいろいろ生まれてくることもあるので、大事にしたいと思います。

行き過ぎたCSS…

いつも良質なエントリーが目立つコリスさんで以下のようなエントリーがあった。
[CSS]テーブル要素を使用しないで制作するカレンダー
CSSでこ (more…)

> コバさん

確かに、曜日と紐付けるのはテーブルの方が適しているように思いますが、キャプチャ画像のように「日付とイベント」が並ぶ場合は、リスト要素の方がいいな、と思いました。

また、月が変わるごとに、曜日と日付の位置を変更するテーブルはいまいち釈然としないなと思います。
リストでも、その曜日の紐付けはしっくりしないですけどね。