HTML5学習(1) head要素、リセットCSS、旧IE対応等
HTML5学習のまとめ【HTML5勉強用ページ-学習記事、お薦めリンク集、お薦め書籍まとめ-】はこちら
HTML5の学習を開始しました。
せっかくなので学習内容を今後blogにまとめていきます。
自分が使いそうだと思った部分だけを抜粋していく形になるので、網羅はしません。
詳しく知りたい方はHTML5.JPあたりをご参照ください。
すでにXHTML1.0を知っていて、新たにHTML5の概要をつかみたい方のお役に立てるような記事を書いていければと思っています。
まず今回は、DOCTYPEや言語指定、headの中身(<head>〜</head>)についてまとめます。
DOCTYPE
XHTML1.0のときに比べるとかなりシンプルです。
これだけです。
DOCTYPEに関わらず、HTML5は何度も出てくる要素についてはできるだけシンプルにということが徹底されているようです。
言語指定
たとえば日本語の場合は
となります。
base
上記二つはhead要素の前ですが、こちらはhead要素の中に書きます。
相対パスの基準URLを示すために使います。
hrefの中には相対パスの基準URL、targetの中にはリンク先を開くときのtarget指定(_self：現フレーム、_blank：別窓、_parent：親フレーム、_top：ブラウザ全体)を記述します。
旧バージョンとの違いは閉じるときの/がないことぐらいです(あっても無事に動作します)。
通常は指定しなくても問題ない要素ですので、本blogで配布するファイルには含めていません
文字エンコーディング
こちらもheadの中に書きます。
他サイトから訪れた場合の文字化け対策として、特段の理由がなければ指定しましょう。
その他要素
その他、head要素にて指定する中でとりあえず私がよく使いそうなものは以下の通りでした。
XHTMLと同様なものも記述しています。
タイトル
キーワード（contentにて指定）
説明（contentにて指定）
ファビコン（hrefにて指定）
<link rel="icon" href="images/favicon.ico">
CSS（スタイルシート）へのリンク（hrefにて指定）
JavaScriptへのリンク（srcにて指定）
html5resetcss-リセットCSS
各ブラウザでの表示の差異を防ぐためにリセットCSSは導入した方が良いのではと思います。
HTML5で有名なのはhtml5resetcssです。
私もダウンロードして読み込むことにしました。
現時点での最新は1.6.1です。
他のcssの読み込みよりも上に書くよう注意しましょう(適用したスタイルがリセットされないように)。
HTML5.js-Internet Explorer対応
HTML5はブラウザによって対応状況が大きく異なります。
※対応状況はHTML5 & CSS3 Support, Web Design Tools & Support - FindMeByIP - CSS3 & HTML5 Browser Supportがとてもわかりやすくまとまっています。
特に、大半の方がご存知かとは思いますが、IEの8以前はまったくと言っていいほどHTML5に対応していません。
HTML5.jsというJavaScriptファイルを適用することでこの問題を回避する方法が知られています。
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
この方法でどれだけ問題を回避できるのかはまだ検証していないので、今後学習する中で問題が発生したら報告する予定です。
また、IE8以前でCSSの疑似セレクタに対応させるためのie-css.jsというファイルも有名なので、必要であれば調べてみてはいかがでしょうか。
参考リンク：IE5～8をCCS3の疑似セレクタ対応にするスクリプト – ie-css3.js | コリス
文法チェック
コードの文法チェックのためにはValidator.nu (X)HTML5 Validatorといったサイトがあります。
ただ、実験運用段階とのことなのでご注意を。
そもそもHTML5がまだ正式勧告されていませんので(2014年正式勧告予定だそうです)。
まとめ
ここまでの内容をまとめると以下のコードになります。
<html lang="ja">
<head>
<base href="http://www.aoharu-b.com/developers/html5/sample/sample001/" target="_self">
<meta charset="utf-8">
<title>sample001</title>
<meta name="keywords" content="HTML5">
<meta name="description" content="HTML5のサンプルページ">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/html5reset-1.6.1.css">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 8]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/common.js"></script>
</head>
<body>
</body>
</html>
今回のコードを実際に表示するとこちらのようになります(body内が空っぽのため真っ白ですが)。
ファイルのダウンロード
今回の学習内容をまとめたファイル一式はこちらにてダウンロード可能です。
ただしCSSやJavaScriptは中身空っぽです。まだ入れ物を用意しただけですので。