白状するわ。
実際このページコーディングしてみたけど、たぶんいろいろ間違ってるのよ。でもいいの。わたしってそんな女よ。
だいいち、まだHTML5のHの字にも至ってないくらいのとこまでしか、勉強できてないわ。
今からよ。成長期なのよ。 (2010.07.07)
DOCTYPE 宣言は下記のように書けばそれでOK。これを変更するだけでまあ、ほとんどHTML5になったも同然よ。
<!DOCTYPE html>
IEはいつものごとく、正直ちょっと残念な子よ。IEで要素をスタイルできるよう、headにHTML5 shivを読みこませるわ。googlecodeって、神ね。
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
HTML5で新しく追加されたブロックレベルは、どうもうまく表示されない時があるわ。どのブラウザでも大丈夫なように、スタイルをあてるわよ。
<header>~</header>に中に書いてね。でも別に外部CSSに書いちゃってもかまわないわ。
<style>
article, aside, dialog, figure, footer, header,hgroup, menu, nav, section { display: block; }
</style>
世の中にはたくさん偉い人がいるから、わたし横着するわ。ぶっちゃけgoogleからDLすると便利よ。
でもあんまり他人を信用しすぎてもいけないのよ。どうでもいいけど、「たぶん」って便利な言葉ね…
HTML5で追加されたのは以下の要素よ。
「一般的なドキュメント・セクションやアプリケーション・セクション」を表す要素だそうよ。わかりにくいわ。
「セクションの例としては、章や、タブ付きダイアログ・ボックス内の各種ページや、論文の番号付きセクションがあげられるでしょう。
ウェブサイトのホームページは、イントロダクション、新着記事、連絡先情報といったセクションに分けられるでしょう。」ですって。イメージは少しわいたわ。
使いどころは、少なくともh1~h6の見出しが含まれるようなカコミ…ってとこかしらね。ここが参考になったのよ。
でもそれだけを考えて使いはじめると、正直ページの中がsectionだらけになっちゃうわ。困ったものよ。
実際、無理して使う必要はないんですってよ。
語弊を恐れずに言えば、divつかっときゃいいのよ…たぶんね…。
あと、気をつけて!やっちゃいけないのはメインコンテンツ全体をsectionで囲むことね。そういうときはdivでいいんですって。偉い人が言ってたわ。
これはまだしもわかりやすいわ。ブログのエントリや新聞記事とかよ。
仕事でブログをつくるときはこれを使うようにするわ。ここがくわしくて参考になるわ。
articleの使いどころは「ドキュメント、ページ、サイトの独立した部分を形成する構成です。これはフォーラムの投稿、雑誌や新聞の記事、
ウェブログのエントリ、ユーザーが投稿したコメント、その他コンテンツの独立した項目が考えられます。」
って書いてあるから、「独立した部分」ってのがキーポイントみたいね。ちょっとだけ間違いそうだわ。気をつけなくっちゃ…
これまた使いどころが難しい子よ。要するに補足記事に使うみたいなの。
「その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表し、
コンテンツから分離されたものとして見なすことができます。」
ですって。わざとわかりにくく書いてるんじゃないかしらと疑ってしまうわ。でもこれが訳文ってものね。
いろんなページを観てみたけれど、具体的にはたとえば、メインのコンテンツの脇に
微妙に関係あるバナーとかがあるエリアを設けることがあるじゃない、ああいうのをasideで囲んだりしているみたい。
これは要するに複数の見出しをまとめる要素ね。タイトルと小見出しとか、よくセットで使うものね。
しのごのいわずに<div id="header">をこれに置き換えれば今のところ大きな問題はなさそうよ。
しのごのいわずに<div id="footer">をこれに置き換えれば今のところ大きな問題はなさそうよ。
「navi」じゃないのよ。「nav」よ。当然ね。大事なナビゲーションを囲むのよ。大事じゃないナビゲーションは囲まないで。
グローバルナビの他に目次的なものとか、あとは前へ/次へボタン、パンくずリストなんかもnavに入れるとよいらしいわ。
figureって、挿絵ってことね。これ、画像とかビデオとかに、キャプションを入れるときに使うことがほとんどな気がするの。
たとえば<figure>~</figure>の中に画像1枚とfigcaption要素で囲んだ文章を入れれば、画像とキャプション文章のセットが出来るわ。よくある使い方よね。
これは、仕事でよく使うかどうかは微妙ね…でも理解してないと赤っ恥をかきそうだわ。
ていうか、まとめるわ。
・markは「ここ見て!注目!」ってハイライトさせるとこ。
・iは「代替の声」
・bは「意味的に区別したいテキスト」
・emは「強勢・トーンを変えて言いたいとき。」
・strongは「強い重要性」エラーとか警告メッセージとか。
・citeは「引用や参考文献一覧のタイトル」
・dfnは「用語の定義」
・varは「数学的な変数」
basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir はもうないの。リストラされたのよ。
基本中の基本が学べるわ。タグリファレンスとか、とてもお世話になっているわ。
mitue-linksの矢倉氏のスライドよ。最初HTML5の意味がわからなかったときにすごく役立ったわ。神ね。
ちゃんと日本語で読めるのよ。
mitue-links矢倉氏のスライドよ。
ギャラリーが充実してるわ。
ここもギャラリーが充実してるわ。URLのまんまよ。
バリデータよ。
これちょっと妙だけどアウトラインとってくれるわ。section地獄に陥らないようにね。
何が違うのかってことよ。
2010年6月時点でのドラフトよ。
SEの人がつぶやいているんだから間違いないわ。
天才がたくさんいるわ。
cnetなら安心な気がするの。