- HTML5とは?
- xhtml1.0をhtml5にしてみる
- videoタグで動画を再生
- スマートフォン最適化
xhtml1.0をHTML5にしてみる
まずは手始めに、手元にあるxhtml1.0をhtml5っぽくしようと思います。
1.DOCTYPE宣言やhead周りの変更
主に宣言文の変更ですが、
xhtml1.0に比べると、あまりにも記述する量が少ないので心配になるが、ひとまずこれで。
2、html5専用のタグを使ってみる
一番やってみたかったのがこれ。headerやnav、footerなど今まで任意で名前を付けてidやclassにしていたものが、
専用のタグとして利用できるようになった。
<div id="header"> ～ </div>
を
<header> ～ </header>
に。
<div id="footer"> ～ </div>
を
<footer> ～ </footer>
に、
他にもナビゲーション部分に<nav>を使ってみたりする。
これだけでも、だいぶhtml5っぽくなった気がする。
あとは、既存のcssの調整。
headerやfooterはidやclassではなく、タグの扱いになるので、
#header{ }
を
header{ } 、
#footer{ }
を
footer{ }
などに修正。
3.IEに対応させる
IEはHTML5の新要素に対応していないため、
ie9.jsというJavascriptを使用する。
使い方は<head>内に下記ソースコードを追加し、該当するフォルダにie9.jsを配置するだけ。
- ・擬似クラス対応
- ・属性セレクタ対応
- ・透過PNG対応
- ・position:fixed対応
- ・margin:0 auto;対応
- ・max-height,width対応
- ・min-height,width対応
- ・E5/6のバグを修正
といった機能が適応されるようです。
以上で作業は完了！
個人的に気になっている個所は、
section、article、asideなどのセクショニンングのタグをどの場面で使うかが 微妙ということ。
これは引き続き他のサイトを見て勉強しようと思う。
サンプルサイト「Standard」
以前実案件で作成した 岩手のスポーツ雑誌「Standard」を上記の手順をもとにhtml5化してみました。
株式会社クーシー 担当：三上
TEL：019-656-0003 E-mail：mikami@coosy.co.jp
