こんばんは。常々、既成概念にとらわれない生き方をしようと思っているけど、それを実践するのはなかなか難しいなと思っているmartinです。
さて、ppBlogでは現状、大まかに3種類のカレンダーを指定できますが、その内2種類は、TABLEタグを用いたものです。まぁ、よく見るカレンダーの構造を見ると、TABLEタグを使って表みたく作成というのは自然な流れでしょう。web界隈の最前線は追っていないので、ちょっと知るのが遅かった気もしますが、カレンダーの中には、TABLE要素を使わずに、UL要素やOL要素などのリスト要素を用いてカレンダーを生成する試みもあるようです。
Tableless Calendar In Use
A Semantic List-Based CSS Calendar
一口にリスト要素を使うといっても、色々な記述があり、紹介しているサイト毎に違っています。で、未だに無視できない数のユーザーの方々がIE6を使っていると思うのですが、少なくとも上記２つのサイトは、IE6で見ると微妙に表示が崩れてしまいます（IE6,7に見られるバグで、hasLayoutをもった要素のOL要素の番号付けが無視されるというものは、有効な解決法がなく致命的）。なので、自分なりに、どのブラウザで見ても同じような見栄えになるようにと色々試した結果、以下のやつが現時点での最適解かなというのに辿りついたので、ppBlogにも採用するついでに紹介しておこうと思います。
これはスクリーンショットです。実際のデモは下のリンクから。
TABLE要素の代わりにOL要素(Ordered List)を使います。日付は時系列なものですから、順序付きリストを用いるのが良いでしょう。このテーブルレスカレンダーの特徴として挙げられるのは、ひとつのHTMLの記述で、3種類の全く違った見栄え（ボックス型・水平型・垂直型）にすることが可能ということです。この見栄えの制御には、CSSを使いますが、かなりシンプルな記述で済みます。また、IE6にも対応となると、色々ややこしいCSSハックを駆使しがちですが、CSSハックは全く必要ありません。
では早速、カレンダーを生成するHTMLソースを見てみましょう。以下のような感じです。
<div id="calendar">
<ol class="wheader">
<li>S</li>
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
</ol>
<ol class="weekday">
<li class="blank"> </li>
<li class="blank"> </li>
<li class="blank"> </li>
<li class="daySubmit" title="エイプリルフール">1</li>
<li>2</li>
<li>3</li>
<li class="Sat">4</li>
<li class="Sun">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li class="Sat">11</li>
<li class="Sun">12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li class="Sat">18</li>
<li class="Sun">19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li class="Sat">25</li>
<li class="Sun">26</li>
<li>27</li>
<li>28</li>
<li class="Holiday" title="みどりの日">29</li>
<li>30</li>
<li class="blank"> </li>
<li class="blank"> </li>
</ol>
</div>
例として今年４月のカレンダーをあげます。曜日を表す部分(日月火水木金土)と、日にちの部分を分けて、それぞれOL要素でグルーピングしていて、各にwheaderとweekdayというクラス名を与えています。ppBlogでは、記事を書いた日付には、daySubmitというクラス名が与えられます。
まず、通常の、よく見るボックスタイプですが、これは以下のようなCSSで実現できます。
#calendar * {
margin: 0; padding: 0; /* まずは、マージンやらのリセット */
}
#calendar ol {
list-style: none; /* 順序付きリストの番号を非表示に */
width: 220px; /* この横幅指定が一番のポイント */
}
#calendar li {
float: left; /* これもポイント */
border: solid 1px #aaa;
width: 18px; height: 18px;
margin: 2px;
padding: 3px;
text-align: center;
line-height: 18px;
font: 600 14px Trebuchet MS;
}
#calendar ol.wheader li {
background: #c69;
color: snow;
}
/* その他 ppBlog用のオプション */
li.daySubmit { background-color : #feff7d; }
li.Sun { color: red; }
li.Sat { color : blue; }
li.Holiday { color : orange; }
li.Today { font-weight: 900; }
li.blank { border: solid 1px #ddd !important; background: #f5f5f9; }
ポイントは、OL要素に具体的に横幅を指定して、かつ、LI要素を左寄せにすることです。指定した幅に達すると自動的に下に流れ込みます。となると、水平タイプにするのは簡単で、幅を指定しなければ良いわけです。その際に、曜日の部分や、空白のリスト要素はあえて表示させる必要はないので、以下のような記述になります。
#calendar ol {
width: auto; /* 幅を指定しない！ */
}
#calendar ol.wheader, #calendar ol.weekday li.blank {
display: none; /* 非表示に */
}
最後に、垂直タイプですが、これも簡単で、従来、OL要素は縦に展開するものです。それを上ふたつではフロート指定で横方向に伸ばしたので、そのフロート指定をしなければ、自ずから縦になります。明示するなら以下のような感じです。
#calendar ol.wheader, #calendar ol.weekday li.blank {
display: none; /* 非表示に */
}
#calendar ol.weekday li {
float: none; /* フロートの解除 */
}
それでは、実際のデモを見てみましょう。
Tableless Calendarのデモ
ボタンをクリックすれば、その場でひとつのカレンダーが３通りに切り替わります（最後にスタイルを適応させないボタンも付けました。OL要素のデフォルトの動作が確認できます）。JavaScriptで制御しているのですが、動的スタイルシートの適応は、動的スタイルシートの作成 で紹介した手法を用いています。
個人的に、このOL要素を用いたカレンダー表示というのは、お気に入りなので、近くバージョンアップ予定のppBlogに組み込んでいます。後、現状、ボックスタイプでは、週の初めは日曜日ですが、これを任意の曜日を指定できようにしています。
CSS
Y:
ALL:
Online: 
Comments