見てみぬ振りのできなくなってきたHTML5とCSS3
ほんの半年前まではまだまだ先のことかな～と漠然としていたものが、ようやく形となって目に見える状態になってきた感があるHTML5。CSS3との組合せでの情報や実装ページなどを見る機会が増えてきました。これまでの頭をリセットして取り掛かるとしますか。
試しに簡単なページを作ってみました。
HTML5 testpage
HTMLソースはこんな感じ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5/CSS3 TEST PAGE</title>
<link href="css3-style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<hgroup>
<h1>HTML5 TEST PAGE</h1>
</hgroup>
</header>
<article>
<p>HTML5 test</p>
</article>
<footer>
Copyright Nutspress
</footer>
</body>
</html>
CSSソースはこれ
/* HTML5の新要素をブロックレベル要素として宣言 */
article, aside, dialog, figure, footer, header, legend, nav, section { display: block;}
header { width:800px; margin:0 auto; padding:0;}
header h1:hover { cursor:pointer; color:#CC0000; text-shadow:0 2px 2px #ccc;}
article { width:800px; margin:0 auto; padding:0;}
footer { width:800px; margin:0 auto; padding:0;}
ドキュメントタイプの書き出しが単純明快。
<div id="～">
というようなブロックでのグループ化を使わないので、コーディングの方も解りやすいです。慣れてしまえば、HTML5でコーディングするのってとても早いような気がします。
CSS3の方も、使えるプロパティが増えているので、やたらと画像を使わなくてもよくなりそうです。
HTML5をスタイルシートで制御する場合の注意点としては、HTML5で新定義されている要素をブロックレベル要素として宣言しておく必要があるところですね。
XHTMLとは主旨が違うので、混同せずに使い分けられるよう勉強せねば！！
Dive Into HTML5
Browser support for CSS3 and HTML5
findmebyIP.com
Visual Cheat Sheet: CSS Compatibility with Internet Explorer 6, 7 and 8
HTML5.JP
HTML5サンプル集
HTML5/CSS3を調べてみる
HTML5, CSS3, JavaScript2.0の気になるサイトリンク
HTML5, CSS3, jQueryを使用して実装する画像ギャラリー
CSS3を使ってレコード盤を緩急つけて回転させるスクリプト -DJ Hero
スタイルシートの実用的なテクニック集：エレメント・CSS3・Tips編
※Web標準ブログ：ミツエーリンクより
HTML5 Japanese Interest Groupへの参加募集の記事が出てます。
Leave a Reply