数年ぶりのサイト更新
数年ぶりのサイト更新だ。 特に何か理由があってというわけではないが、 久しぶりに更新してみようかという気になった。 （アフェリエイトとかをやってみたくなった、というのもあるにはある。） ブログにすることもできたのだが、HTMLを手打ちしていた者としては、 とりあえず慣れている方法で進めてみることにした。 もしかしたら、いずれブログ等へ移行するかもしれない。
HTML5
以前はHTML4.01やXHTMLなどでサイトを作成していた。 最近はHTML5が策定されつつあって、主流になりそうな勢いだ。 そこで、HTML5について調べてみたところ、 当サイトで用いているようなレベルであればHTML4.01と、 ほぼ変わらないようだ。 とはいえ、いくつかHTML4.01とは異なっているところがある。
構造と意味
HTML5では
- <header>
- <nav>
- <section>
- <article>
- <footer>
などの要素が追加されていて、構造の「意味」を明示できるようになっている。 これは、すばらしいことだと思う。 人間が印刷物のような、固定されたデザインのものを見る場合であれば、 「構造」とか「意味」とかは明示するというよりも、 デザインで暗示するような形になるだろう。 しかし、Webの場合は、どんなデバイスに表示されるか分からない。 きちんと構造化されていて、「意味」が明示されていれば、 それをデバイスに応じた適切な方法で表示/提示することもできるだろう。 さらにいえば、そもそも人間が見るとは限らない。 人間以外が見る、つまり機械が見る場合、 例えば検索エンジン（クローラ）などであれば、 どこが何を「意味」しているのか明示できれば、 より効率の高い検索ができるようになるのではないだろうか。 （もちろん、ちゃんと構造化できれば、の話だとは思う。）
図
これも構造や意味を示すものであるが、
- <figure>
- <figcaption>
などの要素は、 なんとなくTeXのfigure環境を彷彿とさせる。 これで、TeXでいう\labelのようなものが使えれば、と一瞬は思ったのだが、 本当に実現しようと思ったらTeXと同じく2パスにしなければならなくなり、 さすがにそれは非効率か、とは思う。
参考サイト
今回参考にしたサイトをいくつかあげておく。
なお、本稿執筆時点でHTML5はドラフト（草案）であり、固まっていない。 よって、今後仕様が変わる可能性もあることに注意したい。
記述確認
HTML5が正しく記述できているかどうか確認するため、 The W3C Markup Validation Service を使ってみた。記述ミスがいくつか見つかったが、修正したところ、 とりあえずOKになったようだ。
CSS
以前からCSSを使用していたので、今回は大幅には手を加えていないが、 以下を変更してみた。
背景色
背景色として以前はもっと濃い色を使っていたのだが、 なんとなく見にくいような気がしたので、薄い色に変更してみた。
class追加
元々、トップページのタイトル用にclass="title"、 著作権表示用にclass="copyright"の2種類のみ使用していたが、 後でスタイルを変えられるようにと思い、HTML側に、 最終更新用class="last-update"、 記事掲載日用class="publish-date"、 「パンくず」用class="breadcrumb" を記述しておいた。 追加したclassについて今のところCSS側では何も指定していない。
参考サイト
今回はHTMLクイックリファレンスの CSSの基本や CSS3リファレンスを 参考にしている。
記述確認
CSSが正しく記述できているかどうか確認するため、 W3C CSS 検証サービス を使ってみた。特に問題なくOKのようだ。
ユーザビリティ
Webページを作る以上は、ユーザビリティも気にしなくてはならない。 今回の更新では「パンくず」をつけてみることにした。
参考サイト
一時期はニールセン博士のAlertboxなどをよく読んでいたのだが、 最近はぜんぜん読んでいなかった。 なかなか実践できないところも多々あるが、 うまく取り込んでいければ、と思っている。
制作環境
テキストエディタで手打ちしている。 現在使用しているテキストエディタは Meadowだ。 今後はNTEmacsに乗り換えるかもしれない。