HTML5とCSS3を使い始める

HTML5とCSS3を使い始める

HTML5に対応しているブラウザといえば、
Google Chrome 3.0 以降
Safari 3.1 以降
Firefox 3.5 以降
Opera 10.5
Internet Explorer 9
ということです。(by wiki)

現在はwebkitエンジン採用のブラウザが最先端らしいです。

ブラウザ レンダリングエンジン javascriptエンジン
IE Trident JScript
Firefox Gecko SpiderMonkey
Chrome WebKit V8
Safari WebKit JavaScriptCore
Opera Presto Charakan

最もシェアを占めているIE6,7,8に非対応というのがネックということで、HTML5は使えないのか?と思いきや、どうやら使えるようにできるjavascriptファイルが存在するらしい。(今頃。。。)

そのファイルが、html5shivってやつ。これを落として読み込んでもいいけど、jQueryじゃないけど、わざわざ落とさずにGoogleから読み込むのが主流。

head内に以下を記述。body直前はだめとのこと。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

HTML5の新要素とか

詳しい解説は、こちらのサイトにて。

HTML4の全体構造が下記なのに対して、

161

HTML5の全体構造は下記になります。

162

articleの使用基準は、ブログの記事のようにそれだけで1つのコンテンツとわかるものに対して使います。それ以外はすべてsectionです。

これらを踏まえると、HTML5文書の雛形は下記のようになりますね。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTML5 雛形</title>
     
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 
</head>
<body>
</body>
</html>

CSS3の注意点

こちらもブラウザにより対応状況がまったく異なります。その対応状況は、こちらのサイトで確認できます。

そして、HTML5の関係で記述が必要なのが、HTML5の新要素をブロックレベル要素にすること。

一部のブラウザでは新要素(headerとか)のデフォルトdisplayがブロックレベルになっていないことがあるとのことで、スタイルシートに新要素をブロックレベル要素にする記述を忘れないようにする。

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{
display:block;
}

今度は、CSS3をIE8以下に対応させないとというわけで、PIE.htcというのを使う。DL後解凍し、適当なディレクトリ内に設置、適用したいセレクタのスタイルシートに下記の文を追加し、ファイル自体はurlのパス(絶対パス推奨)にて読み込む。

behavior:url("PIE.htc");
position:relative;

主な追加機能は、
・border-radius(ボックスに角丸をつける)
・box-shadow(ボックスに陰影をつける)
・border-image(境界線に画像を使う)
・multiple background images(背景に最大4つの画像を使用できる)
・linear-gradient as background image(背景にグラデーションをつける)

2012年12月19日8:51 PM | カテゴリー: CSS2,3,HTML4,5 | コメント(0)

コメントを残す

メールアドレスが公開されることはありません。