2010-03-06
HTML5 基礎知識
HTML5を書くための基礎知識をメモ
HTML5の雛形
<!DOCTYPE html> <html> <head> <title>HTML5 基礎知識</title> <meta charset="UTF-8"> </head> <body> </body> </html>
HTML5の新要素
文章構造に関するもの
| section | 汎用的なセクション。文章のアウトラインを構成する。 |
| article | セクションの一種で、Webページから独立したコンテンツを表す。 |
| aside | セクションの一種で、外側のセクションに対する補足情報を表す。 |
| nav | セクションの一種で、外側のセクションに対するナビゲーションメニューを表す。 |
| footer | セクションのフッター。 |
| header | セクションのヘッダー。 |
| hgroup | 複数の見出し(h1-h6)をまとめる。 |
外部コンテンツの埋込み
| figure | キャプションを伴うような内容のものを文章中に埋め込む際に使用。 |
| video | 動画プレーヤ。 |
| audio | 音声プレーヤ。 |
| source | video/audioに対して、リソースのURLやタイプを指定する。 |
| canvas | ビットマップキャンバス。 |
| embed | プラグインで実行するコンテンツの埋め込み。 |
フォーム
| keygen | 公開鍵暗号式のキーペアを作成する。 |
| output | 画面出力されるフォーム要素。 |
| progress | 進捗状況を表す(プログレスバー)。 |
| meter | メーター。 |
テキスト・その他
| mark | Webページの意図とは異なる文脈での強調。 |
| ruby/rt/rp | 感じの読みがななどを表す「ルビ」を指定する。 |
| time | 日付や時刻を表す。 |
| command | メニューから実行されるコマンド。 |
| details | ユーザーが任意で展開したり閉じたり出来るような詳細情報。 |
| datalist | オートコンプリートの候補など、データのリストを保持するのに用いられる。 |
HTML5で廃止された要素
Webブラウザ上ではエラーとならずに処理がされる(後方互換性のため)
| 要素名 | 説明 | 代替手段 |
|---|---|---|
| applet | Javaアプレットの埋込 | 代わりにembed/object要素を使用してください。 |
| acronym | 略語やイニシャルを表す | 代わりにabbr要素を使用してください。 |
| dir | ディレクトリ一覧を表す | 代わりにul要素を使用してください。 |
| frame | フレーム | iframeとCSSを使うか、サーバーサイドでコンテンツを結合してください。 |
| frameset | フレームセット | |
| noframes | フレームに対応していないブラウザ向けのコンテンツ | |
| isindex | サーバー入力するテキスト入力欄 | formとテキストフィールドの組み合わせを用いてください。 |
| listing | 内容をそのまま出力 | pre要素とcode要素を代わりに使用してください |
| xmp | 内容をそのまま出力 | |
| noembed | embedが使えない場合の代替要素 | フォールバックが必要な場合は、object要素を使用してください。 |
| plaintest | 内容をそのまま出力 | MIMEタイプ"text/plain"を用いてください。 |
| rb | ルビ対象の文字列を指定 | ルビ対象の文字列は、ruby要素内に直接記述してください。 |
| basefont | 基準フォントを指定 | CSSを代わりに用いてください。 |
| big | テキストサイズを大きく見せる | |
| blink | 文字を点滅させる | |
| center | 内容を中央寄せで出力する | |
| font | フォントを指定 | |
| marquee | 文字をスクロールさせる | |
| s | 取り消し線 | |
| spacer | スペースを挿入する | |
| strike | 取り消し線 | |
| tt | 等幅フォントを仕様 | |
| u | テキストに下線を引く | |
| bgsound | 効果音を鳴らす | audio要素を代わりに用いてください。 |
HTML5のコーディングTIPS
古いブラウザで新要素を使用するには
新しい要素が意図した通りに表示されるよう、CSSで表示を調整します。
address, article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
以下の要素は非表示になるべきなので、CSSで調整します。
[hidden], command, datalist, menu[type=context], rp, source{ display: none; }
完全にHTML5の環境として表示をリセットする場合にはHTML5のレンダリング仕様に従うと良いです。
IE対応
こちらで公開されているJSを用いることでIEにもhtml5の要素の存在を覚えさせるということをします。
Google codeで公開されている
http://html5shiv.googlecode.com/svn/trunk/html5.js
を読み込みます。
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
HTML5の機能が実装されているかを調べるには
HTML5の機能はブラウザによって実装レベルがまちまちです。
そのために実装されているのか、どうかを把握しておく必要があります。
- CSS3も含め、ブラウザごとに機能が使えるのかどうかのリファレンスになっています - http://a.deveria.com/caniuse/
- HTML5と関連APIについて詳しく記述してあります - Comparison_of_layout_engines
プログラムの実行中にブラウザがHTML5の機能を持っているのかを調べたい場合もあります。
例えば「Web Storageが使えるならば、ストレージに、なければクッキーに保存する」といった処理を行う場合など。
Modernizrというライブラリを用いて判定することができます。
if (Modernizr.localstorage){ // Take advantage of local storage that is persistent // between tabs on the same site and can store MBs of data } else { // resort to cookies as best you can }
使い方の詳細はこちらから。
HTML5を意識した開発をする場合には、必須のライブラリです。
現在のHTML5簡単スタート
現状HTML5をはじめようとしたらこんな感じ。
<!DOCTYPE html> <html> <head> <title>HTML5 基礎知識</title> <meta charset="UTF-8"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://hebita.jp/js/modernizr-1.1.min.js"></script> <style type="text/css"> address, article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } [hidden], command, datalist, menu[type=context], rp, source{ display: none; } </style> </head> <body> </body> </html>
これで、可能な限り古いブラウザをサポートしつつ、HTML5の機能を引き出すHTMLが書けることとなります。
参考書
- 作者: 白石俊平,株式会社あゆた
- 出版社/メーカー: 日経BP社
- 発売日: 2010/02/25
- メディア: 単行本（ソフトカバー）
- 購入: 15人 クリック: 621回
- この商品を含むブログ (54件) を見る
リンク
- HTML5 canvas基礎 - canvasの基礎的な使い方
- HTML5 canvas関連API - canvasエントリーで取り上げているAPIの解説や使い方
- canvas サンプル集 - canvasのサンプル
Permalink | コメント(6) | トラックバック(11) | 00:31 
徹底解説HTML5マークアップガイドブック
トラックバック - http://d.hatena.ne.jp/hebita164/20100306/1267889468
