リニューアルしました

サイトを全部CMS化して管理しようと思い立ち、ついでなのでHTML5にしました。さようならxhtml1.1。こんにちはHTML5。CMSはいつも通りTextpatternです。

CSS3も使ってます。SafariとGoogleChromeではうっすらとアニメーションが適用されると思います。IEはver9以外は壊滅的なので、IE9でご覧になってくれると嬉しいです。

さて、この度HTML5で書くにあたり色々と調べてメモしながら作業をしたので、そのへんも書いていこうと思います。

参考書にしたのは、オライリーから出ている入門HTML5という本です。これは既に手元にあったので改めて読み返しました。ミツエーリンクスの矢倉さんが訳しています。

また、入門HTML5にも書かれていますが、HTML4からHTML5への移行について解説した結局どうすればいいの？ - Dive Into HTML5も参考になります。

参考サイト

HTMLの構造変えるついでに、ちょこっとrole属性も使用しました。新しい技術はドキドキしますね。

sectionやarticleの使い方

次に多くの人が頭を悩ませてるらしいsectionとarticleについて。

どうやらsectionの誤用が多いみたいです。解答も併せて欲しかったですね。そんなわけで、私もsectionについて色々調べてみました。

vantさんのはてなグループ内のsectionに関する記事です。私はイマイチ理解できませんでした。

結構分かりやすい記事だと思います。ただ、当時の私はよく分かりませんでした…。

自分なりのarticleとsectionの境界線

さて、上記の参考になりそうな文書の他にも色々とそれらしき記事を読んだのですが、今一分からないので、とりあえず辞書を引きました。以下エキサイト辞書よりそれっぽい単語を抜粋してみました。

section
意味：（ものの）部分、断片、（全体を組み立てる）部品部、（書物・文章の）節、段落
article
意味：（新聞・雑誌の）記事、論説、（条約・契約などの）個条、条項、条款

ほんで、

article 要素は、ドキュメント、ページ、アプリケーション、サイトの自己完結したものを表します。つまり、シンジケーションのように、単独で再配布でき再利用できるよう意図したものです。これはフォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジットやガジェット、その他、コンテンツの独立した項目が考えられます。

cite: article 要素 - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP

シンジケーションて何じゃらほいと思って検索したらAtomやRSSの類いのことでした。

というわけで、article要素に関しては、RSSで配信できるレベルの文書や記事ってことかな？ということで決着をつけました。

一方、巷で色んな人を散々悩ませていたsection要素はRSSなんかで配信できないレベルの、文字通り「部分、断片」ってことで決着をつけました。

基本的に文書の構造化用として使うのがいいみたいです。装飾は従来通りdivにしておいた方が無難かと思います。

アウトラインチェックのウェブサービスも便利です。私は結構ゆるいアウトラインですが、ガチガチな人もいるのかな。

そんな感じで、HTML5になりました。私は一番吃驚したのはブロック要素とインライン要素が消滅して、フローコンテンツ、セクショニングコンテンツに分類されてて、今までの概念が消えたことです。多分消えてはいないと思うんですが多少変更があるみたいで、そこらへんはまだまだ追求と理解が甘いので、地道に学習していけたらいいなと思います。