概要

試行錯誤を経て、サイトのマークアップ言語をHTML5に変更した。 長らくVersion 2.9.xで更新を続けてきたが、これを機にVersion 3.xを名乗ることにした。 未だ調整を必要とすることは認識しているが、おいおい対応していきたいと思う。

マークアップの変更に伴い、サイトのデザインにも手を加えている。 従来、フォントは全てサンセリフ体（ゴシック体）を指定してきたが、これをタイトル・見出しに相当する部分のみにとどめ、本文はセリフ体（明朝体）を指定して記事を読みやすくした点が最も大きな変更になる。

主要な変更点

• サイトのマークアップ言語のHTML5への変更
• マークアップの入れ子構造を見直し、シンプルなものに変更
• 記事本文のフォントをOptima(Mac OS Xに付属)を始めとするセリフ体へ変更(日本語フォントはブラウザによる自動選択)
• タイトル部分などの色・デザインの変更
• ページ下部にフッターを導入
• Movable Typeを6.2へ更新

先日から少し調べ始めたHTML5であるが、やはり、文書構造を明確化できるsection, article, nav, aside, header, footerといったタグが使えることは面白い。 試験的に、トップページ（メインページ）をローカル環境にコピーし、HTML5式にマークアップを行ってみた。

すでにMovable Typeの標準のテンプレートとは異なった構造になっていた可能性もあるが、元々のトップページはMovable Typeの標準の構造を流用していて、大雑把にまとめると以下のような構造になっていた。

続きを読む "HTML5へのマークアップ言語の変更" »

このところ、SVGなどの（私にとって）新しい技術について調べることが増え、自然とHTML5への興味も高まってきた。 これまでは各ブラウザの対応状況をhtml5test.comで見るくらいで、Safariの対応の遅さに意味もなく歯がゆい思いをしてきた程度だった。 ちなみにSafari 9でもスコアは555点満点のうち400と、ChromeやFirefoxに大きく引き離されているし、Internet Explorer後継のMicrosoft Edgeにも（ほぼ同じスコアだが）追い抜かされている。

現在このサイトはXMLベースであるXHTML 1.0 Strictを使ってマークアップしている。 HTML5は従来のHTMLのように、タグを省略するなど、ある程度「ゆるく」マークアップできる言語のようだ。 しかし個人的にはきちんと要素の範囲を指定して、文書構造がはっきりするXHTMLの方が好みだ。 HTML5では、XMLをベースとしてXHTML式にマークアップすることも可能なようで、XHTML5と呼ばれているようだ。 Google検索で調べてみるとすでに5年以上前からこの違いについて解説しているサイトがあり、自分の不勉強が恥ずかしい限りだ。

HTML5では文書構造を示すための要素としてsection, article, nav, aside, header, footerが追加されていて、文書の意味づけがより明確に行えるようだ。 この辺りを厳密にやろうとすると、Movable TypeのテンプレートをCSSも含めて相当書き換えないといけなくなりそうだ。 また、現在のテンプレートはMovable Typeのテーマ機能を使うためと思われるが、div要素の入れ子構造が深くて、あまり好きではなかった。 これを機会に、よりシンプルなマークアップになるようにしてみたい。 それに伴って、個別記事のマークアップも変更しなければならないかもしれない。

ただ、XHTML5でマークアップするには、サーバー側のHTTP応答ヘッダを変える必要もあるなど、やや敷居が高い。 しかし従来のHTMLの延長で、限りなくXHTML5準拠に近いというような方法は可能なのではないかと思う。 HTML5への移行を、今後のサイト更新の目標の一つとしていきたい。

続きを読む "HTML5とXHTML" »