2010-08-09 09:42:07
HTML5というのがあるらしい。まだ、正式勧告ではないようだが、徐々にhtml5に対応したブラウザは増えているようだ。私もそろそろhtml5について考えようと暑さで朦朧とした頭で考えた。私は古い人間なので、htmlファイルは手打ちである。タグをほぼ全部手で打ち込んでいる。だから、早めに新しいhtmlにも馴染んでおかなければならない。PHPで自動生成させることも多いけれども、phpのスクリプトは手打ちだから、タグや構造が判っていなければどうしようもない。さらに、私は古い人間なので、本が必要である。本を買おう。
Introducing HTML5 (Voices That Matter)
bk1, 楽天,
紀伊國屋書店,
Yahoo! Books]を買ってみようと思ったけれども、前者はSafari Books Onlineで読めることに気がついて、註文は後者だけにした。
これで後はお茶でも飲みながら本が届くのを待てばいいのだが、考えてみれば、Safari Books Onlineの方はいつでも読めるのだから、待つ必要はない。早速、Introducing HTML5 (Voices That Matter)
宣言は<!doctype html>でいいらしい。続く、html/head/title/link....といったところはあまり大きく変わっていないような気がする。<header>という領域を次に書く（書きたくなければ書かなくてもいいけど）。ヘッダ部分である。今回はタイトルのみ。次に<nav>。これはナビゲーターということ。 日記の過去の月へのリンク領域はこれにしよう。日記本文は<article>というタグをつける。日記本文の段落は従来通り<p>タグではさむ。最後に<footer>である。フッタである。フッタの文が変なような気がしたが、参考図書に書いてあったから仕方がない。今はそこを詳しく検討する余裕はないのだ。
これでいいのか？ header/nav/article/footerというような構造は、読者が読む分にはなくても構わないだろうと思う。まったく同じ表示画面はhtml4で作れるのだから。どうやら、こういう文書構造を示すことで、自動的なテキスト抽出が効率的に行えるらしい。例えば検索エンジンのためのデータベース構築のとき。そんなの私には関係ないと一瞬思ったが、それが検索して読みにくる人にとって有益ならば、無視しなくてもいいかという気分にもなる。
<!doctype html>
<html lang=ja>
<head>
<title>HTML5 test</title>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>tolle et lege</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li>Last week</li>
<li>Archives</li>
</ul>
</nav>
<article>
<h3>2010年8月8日</h3>
<p> 午後から微かな頭痛。</p>
<p> 村瀬拓男『電子書籍の真実』（780円＋税／マイコミ新書）[amazon.co.jp, bk1,
楽天, 紀伊國屋書店, Yahoo! Books]を全然期待せずに読み始めたのだが、これが予想以上に
よい内容だった。</p>
<p> 頭が痛いから、もう寝よう。</p>
</article>
<article>
<h3>2010年8月7日</h3>
<p> ジョー・ウォルトン<em>『暗殺のハムレット』</em>（茂木健訳／
1200円＋税／創元推理文庫読了。これは傑作。鳥肌が立つやうな興奮を覚えながら読み終
へた。政府要人の暗殺未遂といふ話なのだが、これが改変された歴史の流れの中で語られ
てゐるからこそ、これだけ興奮するのであって、今の歴史の流れで語られると感動は多分
50文の１くらゐだ。前は、この世界の話だとしても変はらないんぢゃないかなんて思って
ゐたけれども、私が間違ってゐた。早く第三巻を読みたい。</p>
</article>
<footer>
<p><small>This is copyright by Yoshio Nakano.</small></p>
</footer>
</body>
</html>
さて、これでは上からずらずらと文字が並ぶだけである。全体の構造はcssで規定 する。styles.cssというファイルを作って、こんなふうにしてみた。前より簡単になっ た（ような気がする）。
header, nav, footer, article {display: block; }
nav {float:left; width: 20%; }
article {float:right; width: 79%; }
footer {clear: both;}
こいつを表示させてみる。MacOSXのSafari 5.0.1である。Firefox 3.6でもほぼ同じであった。
この試験ファイルへのリンクも張っておいた。Dropboxの共有フォルダに置いてみたものである。私はWindowsも持っていないので、Internet Explorerでどんなふうに見えるのか、私にはまったく判らない。
次回から、色をつけたり、左のnavの部分をもう少しきちんと作ってみよう。といっても、私の日記はそれしかないので、他にいろいろすることもないのだが。それとも、これを機会に大改変してみようか。