HTML5 で久しぶりのサイト更新



数年ぶりのサイト更新

数年ぶりのサイト更新だ。 特に何か理由があってというわけではないが、 久しぶりに更新してみようかという気になった。 (アフェリエイトとかをやってみたくなった、というのもあるにはある。) ブログにすることもできたのだが、HTMLを手打ちしていた者としては、 とりあえず慣れている方法で進めてみることにした。 もしかしたら、いずれブログ等へ移行するかもしれない。

HTML5

以前はHTML4.01やXHTMLなどでサイトを作成していた。 最近はHTML5が策定されつつあって、主流になりそうな勢いだ。 そこで、HTML5について調べてみたところ、 当サイトで用いているようなレベルであればHTML4.01と、 ほぼ変わらないようだ。 とはいえ、いくつかHTML4.01とは異なっているところがある。

構造と意味

HTML5では

などの要素が追加されていて、構造の「意味」を明示できるようになっている。 これは、すばらしいことだと思う。 人間が印刷物のような、固定されたデザインのものを見る場合であれば、 「構造」とか「意味」とかは明示するというよりも、 デザインで暗示するような形になるだろう。 しかし、Webの場合は、どんなデバイスに表示されるか分からない。 きちんと構造化されていて、「意味」が明示されていれば、 それをデバイスに応じた適切な方法で表示/提示することもできるだろう。 さらにいえば、そもそも人間が見るとは限らない。 人間以外が見る、つまり機械が見る場合、 例えば検索エンジン(クローラ)などであれば、 どこが何を「意味」しているのか明示できれば、 より効率の高い検索ができるようになるのではないだろうか。 (もちろん、ちゃんと構造化できれば、の話だとは思う。)

これも構造や意味を示すものであるが、

などの要素は、 なんとなく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に乗り換えるかもしれない。