CSS3」というモダンな枠組みを選ぶことにした。Webで調べながら作業ということになるんだけど、そこには事前に予想していなかったトラブルが潜んでいた。一通り作業が終わってHTMLをチェックしていたら、後から手直しが必要だと必要とわかった場所が結構出てきてしまっていたのだった。原因は参考にした記事の内容が(ブログでなくても)古くてアップデートされてないことがかなり多く、「使用した要素や属性が廃止されていた(正式には採用されなかった)」「新しい要素や属性が追加されていた」という事態が思いの外多かったこと。HTML5の最初のドラフト(草案)は2008年とかなり古く、それから今に至るまで様々な議論や検討などがおこなわれた結果、色々修正が加えられていたというわけ。元々が草案だったのだからしょうがないし、参考にした記事だって書いて時点では正しかったのだから、誰が悪いという話ではない。できれば「無駄な作業は避けたい」というのは人情じゃないだろうか。いうわけで、作業していて気がついた点をメモしておきたい。「これからHTML5でサイトを作るぜ!」という人には、ある程度参考になるのではないかと思う。ちなみに、自分の作業自体はまだ続いているので、新たに何か気がついた段階で内容が増えていくかもしれない。「hgroup」要素が廃止された見出しをグループ化するための「hgroup要素(タグ)」が候補から外れ、正式には採用されないことになった。削除される可能性が高いとされていたらしい。hgroupを使っていてグループ化していた副題などは、「pタグを使えばいいよ」という話になっているようだ。WATCH<hgroup>-HTML5タグリファレンス「pubdate」属性が廃止された最初は「article要素(タグ)」、その後変更されて「time要素(タグ)」に設定することができた「pubdate属性」が削除された。どちらにしても文章(article要素)の公開日時を設定するためのものだったのだが、これは「time要素で明記すれば十分」ということになったのかもしれない。Labs<time>-HTML5タグリファレンス「main」要素が追加された「main要素(タグ)」は文章(ページ内)の主要な部分を明示する(囲む)ためのもの。アクセシビリティの観点から追加されたらしい。ページ内で1回しか使用できず、かつ重要な部分に使うべきというところで、HTML4やXHTML1.0の「h1」タグを何となく彷彿とさせる。説明を読む限り、ブログでいうならメインカラム、特にコメントやトラックバック部分を除いた記事本体部分に使うのがいいのかもしれない。WEBCRE8.jp「role」属性が追加された正確にはHTML5の属性ではないし、別にHTML4などでも使えるらしいが、話が複雑になるのでとりあえずHTML5の属性の話として進める。「role属性」は上記のmain要素と同じく、アクセシビリティの観点から追加された属性。そのページのドキュメントや要素の役割(=role)を設定・明示するために使用する。具体的には任意の要素(タグ)に、以下のようにrole属性を設定するとのこと。アプリケーションrole属性はHTML5で新たに追加された属性です。これらはWebページの構成内である役割を担う要素に対し目印を付けることからランドマーク(Landmark)と呼ばれています。このように文書構造に対し目印をつけることでWebアクセシビリティの向上を図ります。ごすてっぷ現状、この属性を設定したからといって一般的なWeb閲覧でメリットがある場合は少ないようなのだが、Webページとブラウザの両方で普及が進めば事情は変わってくるかもしれない。ごすてっぷCSS3を使うときはもう(ほとんどの場合に)ベンダープレフィックスはいらないHTML5には直接関係ないものの、セットで使うことが多いと思われるCSS3についても少し。CSS3について書かれた古い記事では、当時のブラウザの対応状況の関係でコードに「-webkit-」「-moz-」などのベンダープレフィックスが付いていることが良くある。これは記事の公開時点では正しかったが、2013年の今では必要ない......どころかトラブルの原因になっていることすらある。標準の書き方をせずベンダープレフィックスのみでCSSが記述されているときに、最新のブラウザではスタイルが適用されてないものが散見された。具体例としては以下のページなどが挙げられる。21で閲覧すると、スタイルが適切に設定されていない。Lecture恐らく、プロパティの記述方法が変わってしまったのが原因だと思われる。最新のブラウザでは、基本的にCSS3を使用するときに、固有のベンダープレフィックスを付ける必要がないぐらい対応が進んでいるはず。古めのページを参考にするときには注意しておきたい。Reader」にすることにした記事への反応この記事へのコメントコメント機能を利用するにはログインする必要があります。「Disqus」または「Twitter」「Google」「Facebook」などのアカウントが使用できます。URLこの記事にトラックバックする(FC2ブログユーザー)スパム対策のため、この記事へのリンクのないトラックバックは受信されません。Disqusブログロール空気を読まない中杜カズサブログ名の設定は、まだ。「メルペイ残高」はどう使うのがスマートでお得か?3つのルートから考える「コード決済」は進化か退化か。自分でQRコードをスキャンして初めて実感できた“存在意義”IIJmio(みおふぉん)を解約したのでSIMカードを返却。