pellion arts and crafts

ものすごく乱暴に、HTML5を勉強してみたわ。

白状するわ。
実際このページコーディングしてみたけど、たぶんいろいろ間違ってるのよ。でもいいの。わたしってそんな女よ。
だいいち、まだHTML5のHの字にも至ってないくらいのとこまでしか、勉強できてないわ。
今からよ。成長期なのよ。 (2010.07.07)

てっとりばやくHTML5を導入してみるために何をすればよいか書いてみたわ。

doctype宣言を、シンプルにするのよ。

DOCTYPE 宣言は下記のように書けばそれでOK。これを変更するだけでまあ、ほとんどHTML5になったも同然よ。

<!DOCTYPE html>

このままではIEではうまく表示できないから、JSを読み込ませるのよ。

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>

リセットCSSもHTML5仕様に変更しようかしら。

世の中にはたくさん偉い人がいるから、わたし横着するわ。ぶっちゃけgoogleからDLすると便利よ。

たぶんこれで、OKよ。

でもあんまり他人を信用しすぎてもいけないのよ。どうでもいいけど、「たぶん」って便利な言葉ね…

上へ ▲▲▲

要素について勉強するわ。

新しい要素について。

HTML5で追加されたのは以下の要素よ。

  • section

    「一般的なドキュメント・セクションやアプリケーション・セクション」を表す要素だそうよ。わかりにくいわ。
    「セクションの例としては、章や、タブ付きダイアログ・ボックス内の各種ページや、論文の番号付きセクションがあげられるでしょう。
    ウェブサイトのホームページは、イントロダクション、新着記事、連絡先情報といったセクションに分けられるでしょう。」ですって。イメージは少しわいたわ。

    使いどころは、少なくともh1~h6の見出しが含まれるようなカコミ…ってとこかしらね。ここが参考になったのよ。
    でもそれだけを考えて使いはじめると、正直ページの中がsectionだらけになっちゃうわ。困ったものよ。
    実際、無理して使う必要はないんですってよ。
    語弊を恐れずに言えば、divつかっときゃいいのよ…たぶんね…。

    あと、気をつけて!やっちゃいけないのはメインコンテンツ全体をsectionで囲むことね。そういうときはdivでいいんですって。偉い人が言ってたわ。

  • article

    これはまだしもわかりやすいわ。ブログのエントリや新聞記事とかよ。
    仕事でブログをつくるときはこれを使うようにするわ。ここがくわしくて参考になるわ。

    articleの使いどころは「ドキュメント、ページ、サイトの独立した部分を形成する構成です。これはフォーラムの投稿、雑誌や新聞の記事、
    ウェブログのエントリ、ユーザーが投稿したコメント、その他コンテンツの独立した項目が考えられます。」
    って書いてあるから、「独立した部分」ってのがキーポイントみたいね。ちょっとだけ間違いそうだわ。気をつけなくっちゃ…

  • aside

    これまた使いどころが難しい子よ。要するに補足記事に使うみたいなの。
    「その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表し、
    コンテンツから分離されたものとして見なすことができます。」
    ですって。わざとわかりにくく書いてるんじゃないかしらと疑ってしまうわ。でもこれが訳文ってものね。

    いろんなページを観てみたけれど、具体的にはたとえば、メインのコンテンツの脇に
    微妙に関係あるバナーとかがあるエリアを設けることがあるじゃない、ああいうのをasideで囲んだりしているみたい。

  • hgroup

    これは要するに複数の見出しをまとめる要素ね。タイトルと小見出しとか、よくセットで使うものね。

  • header

    しのごのいわずに<div id="header">をこれに置き換えれば今のところ大きな問題はなさそうよ。

  • footer

    しのごのいわずに<div id="footer">をこれに置き換えれば今のところ大きな問題はなさそうよ。

  • nav

    「navi」じゃないのよ。「nav」よ。当然ね。大事なナビゲーションを囲むのよ。大事じゃないナビゲーションは囲まないで。
    グローバルナビの他に目次的なものとか、あとは前へ/次へボタン、パンくずリストなんかもnavに入れるとよいらしいわ。

  • figure , figcaption

    figureって、挿絵ってことね。これ、画像とかビデオとかに、キャプションを入れるときに使うことがほとんどな気がするの。
    たとえば<figure>~</figure>の中に画像1枚とfigcaption要素で囲んだ文章を入れれば、画像とキャプション文章のセットが出来るわ。よくある使い方よね。

  • mark

    これは、仕事でよく使うかどうかは微妙ね…でも理解してないと赤っ恥をかきそうだわ。
    ていうか、まとめるわ。
    ・markは「ここ見て!注目!」ってハイライトさせるとこ。
    ・iは「代替の声」
    ・bは「意味的に区別したいテキスト」
    ・emは「強勢・トーンを変えて言いたいとき。」
    ・strongは「強い重要性」エラーとか警告メッセージとか。
    ・citeは「引用や参考文献一覧のタイトル」
    ・dfnは「用語の定義」
    ・varは「数学的な変数」

  • 他にも、新しい要素が追加されているのよ。でも正直いま時間がないの。今日の勉強はここまでよ。 肝心のcanvasがどこいったのよって感じね。

廃止された要素

basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir はもうないの。リストラされたのよ。

上へ ▲▲▲

上へ ▲▲▲