HTML5/CSS3対応 チェックサイトあれこれ

村山秀明　ノンピリオド

2012-02-22

自己紹介 •  天童市在住

•  ホームページ制作しています。

•  非常勤講師

•  本　出しました！ Dreamweaverで はじめるWebサイト構築

今日の話 HTML5とCSS3がどこまで使えるか、

チェックサイトできちんと確認しておきましょう

という話です。

まず、知っておくこと •  「実機で確認」が基本

•  WebkitというHTMLレンダリングエンジンを使っ

ているが、バージョンが違うと対応しているタ

グが異なる

•  AndroidのブラウザはChromeじゃないWebkit

•  iOSのSafariはWebkit

•  OperaやFirefoxはWebkitじゃない

では、本題

チェックサイトを紹介します

The HTML5 Test http://www.html5test.com/

•  HTML5のタグの対応をチェック

•  対応状況をスコアにして表示

•  対応しているタグも確認できる�

The CSS3 Test

http://css3test.com/

•  CSS3のプロパティの対応をチェック

•  ％で表示

•  色づけで対応を確認

Mobie HTML5

http://mobilehtml5.org/

•  APIまわりの対応を確認できる

•  ちょっと微妙なところもある

What's my IP?, What's my

browser? – FindMeByIP CSS3 & HTML5 Browser Suppor

http://fmbip.com/

•  基本はIPやブラウザをチェックするサイト

•  CSS3やScriptの対応もチェックできる�

以上、終了。

そういえば、

Dreamweaverでは

どれくらい対応しているんですか？

•  HTML5は　Safari 4ぐらいのレベル

（HTML5testのスコアで107ぐらい…）

•  CSS3は　46％…（実機よりひどい…）

•  iOS、AndroidのwebkitよりDreamweaverの

webkitのほうがバージョンが低い！

結論

•  ホームページは実機やエミュレータできちんと

確認しましょう

•  Dreamweaverはあくまでも制作環境です�

おしまい