Days on the Moon

今このブログのトップページをWinIEで見てみたらレイアウトが見事に崩れてツールバーが下に行ってますね。まったく、IEのバグにも困ったものです。IE7では修正されていることを切に願うばかり。

しばらくは用意されたスタイルのままで行くつもりでしたがこれは早めにスタイルを書き換えたほうがいいかもしれません。まあそういいつつなかなか取り掛かれないのが私の性なのですが。

先の記事ではぜひ修正してほしいと思った部分を挙げましたが、ここではこのままでもいいかもしれないけどできればこうしてほしいなと思う部分を挙げていきます。

1. コメント送信フォーム周り

今のコメント送信フォームは、ベタのテキストとinput要素、br要素が並んでいるだけでスタイルシートによるレイアウト変更の余地がほとんどありません。たとえば以下のように定義リストを使うことでレイアウトデザインの自由度が増すと思います。

<form ...>
<dl>
<dt class="comment-name"><label for="comment-name">名前:</label></dt>
<dd class="comment-name">
    <input id="comment-name" name="name" value="" size="32">
</dd>
<dt class="comment-mail"><label for="comment-mail">メールアドレス:</label></dt>
<dd class="comment-mail">
    <input id="comment-mail" name="mail" value="" size="50">
</dd>
<dt class="comment-url"><label for="comment-url">URL:</label></dt>
<dd class="comment-url">
    <input id="comment-url" name="url" value="" size="50">
</dd>
<dt class="comment-content"><label for="comment-content">コメント:</label></dt>
<dd class="comment-content">
    <textarea id="comment-content" name="content" cols="60" rows="5"></textarea>
</dd>
</dl>
<p class="comment-submit">
<input type="submit" name="comment" value="確認">
<input type="hidden" ...>
</p>
</form>

classはスタイルのためですがなくてもいいかもしれません。隠れコントロール(<input type="hidden" ...>)はform要素の直下に置けないため確認ボタンのあととしました。

2. カレンダー周り

これはスタイルのためではなくHTMLの考え方に沿ってのことですが、どうもカレンダーの表のマークアップが中途半端のような気がします。

上に挙げたのが今のカレンダーです。「2005/05」という月表示は表全体の見出し、「日月火……」という曜日名はヘッダ行として表せると思いますがいずれもそうはマークアップされていません。それを修正すると以下のようになります。

<table class="calendar" summary="2005年5月のカレンダー">
<caption class="calendar-title">2005/05</caption>
<colgroup class="calendar-sun-col"></colgroup>
<colgroup class="calendar-wday-col" span="5"></colgroup>
<colgroup class="calendar-sat-col"></colgroup>

<thead>
<tr>
<th class="calendar-sun-name" scope="col">日</th>
<th class="calendar-wday-name" scope="col">月</th>
<th class="calendar-wday-name" scope="col">火</th>
<th class="calendar-wday-name" scope="col">水</th>
<th class="calendar-wday-name" scope="col">木</th>
<th class="calendar-wday-name" scope="col">金</th>
<th class="calendar-sat-name" scope="col">土</th>
</tr>
</thead>

<tbody>
<tr class="calendar-row">
<td class="calendar-cell">01</td>
<td class="calendar-cell">02</td>
...
<td class="calendar-cell">30</td>
<td class="calendar-cell">31</td>
<td class="calendar-cell callendar-space" colspan="4"></td>
</tr>
</tbody>
</table>

table要素にsummary属性を追加し、月表示はcaption要素、曜日名はth要素としてマークアップ、表の構造を表すためにcolgroup要素、thead要素、scope属性を使っています。また、tbody要素の最初または最後に現れうる日付を含まないセルにはスタイルシートから利用できるようcallendar-spaceというclass名を加えました。

もし何らかの理由で月表示をセルとしてマークアップしたいというのなら以下のようになるでしょう。

<table class="calendar" summary="2005年5月のカレンダー">
<colgroup class="calendar-sun-col"></colgroup>
<colgroup class="calendar-wday-col" span="5"></colgroup>
<colgroup class="calendar-sat-col"></colgroup>

<thead>
<tr>
<th colspan="7" class="calendar-title">2005/05</th>
</tr>

<tr>
<th class="calendar-sun-name" scope="col">日</th>
<th class="calendar-wday-name" scope="col">月</th>
<th class="calendar-wday-name" scope="col">火</th>
<th class="calendar-wday-name" scope="col">水</th>
<th class="calendar-wday-name" scope="col">木</th>
<th class="calendar-wday-name" scope="col">金</th>
<th class="calendar-sat-name" scope="col">土</th>
</tr>
</thead>

<tbody>
<tr class="calendar-row">
<td class="calendar-cell">01</td>
<td class="calendar-cell">02</td>
...
<td class="calendar-cell">30</td>
<td class="calendar-cell">31</td>
<td class="calendar-cell callendar-space" colspan="4"></td>
</tr>
</tbody>
</table>

3. 個別記事の大見出しのリンク

現在個別の記事のページは「<記事のタイトル>: <ブログ名>」という形式の内容になっていますが、この文字列全体にそのブログのトップページへのリンクが貼ってあります。しかし、トップページへのリンクなのに個別の記事のタイトルが入っているというのは少々混乱の元かもしれません。できるならトップページへのリンクはブログ名の部分のみにしたほうがいいと思います。

以上、些細なことではありますが、余力があったら修正していただけるとうれしいと思う次第です。