「HTML5／CSS3」の版間の差分
編集の要約なし |
編集の要約なし |
||
| 13行目: | 13行目: | ||
※以下は、2010年2月23日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。</p> | ※以下は、2010年2月23日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。</p> | ||
<br> | <br> | ||
=== | ===[セクショニング］=== | ||
'''・section''' | '''・section''' | ||
<p>div要素の区分け的存在。見出しを付けられるような内容ごとに、このsection要素で区切ることが出来る。<br> | <p>div要素の区分け的存在。見出しを付けられるような内容ごとに、このsection要素で区切ることが出来る。<br> | ||
| 34行目: | 34行目: | ||
<p></p> | <p></p> | ||
<br> | <br> | ||
=== | ===［グルーピング］=== | ||
'''・figure''' | '''・figure''' | ||
<p></p> | <p></p> | ||
<br> | <br> | ||
=== | ===［埋め込みコンテンツ］=== | ||
'''・video''' | '''・video''' | ||
<p>文字通り、動画を埋め込むための要素。従来のやり方ではFlashが必要であったりしたが、video要素では不要になった。<br> | <p>文字通り、動画を埋め込むための要素。従来のやり方ではFlashが必要であったりしたが、video要素では不要になった。<br> | ||
| 57行目: | 57行目: | ||
<p></p> | <p></p> | ||
<br> | <br> | ||
=== | ===［テキストレベル］=== | ||
'''・mark''' | '''・mark''' | ||
<p>テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。</p> | <p>テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。</p> | ||
| 66行目: | 66行目: | ||
<p></p> | <p></p> | ||
<br> | <br> | ||
=== | ===［フォーム］=== | ||
'''・datalist''' | '''・datalist''' | ||
| 78行目: | 78行目: | ||
<p></p> | <p></p> | ||
<br> | <br> | ||
=== | ===［インタラクティブ］=== | ||
'''・details''' | '''・details''' | ||
| 106行目: | 106行目: | ||
==資料== | ==資料== | ||
このページを作成するのに参考にしたページ等をリストアップ。 | このページを作成するのに参考にしたページ等をリストアップ。 | ||
=== | ===［Webサイト］=== | ||
<p>[http://www.html5.jp/html5doctor/index.html HTML5.JP ＞ html5doctor]</p> | <p>[http://www.html5.jp/html5doctor/index.html HTML5.JP ＞ html5doctor]</p> | ||
<br> | <br> | ||
=== | ===［雑誌］=== | ||
・Web Designing 2010年4月号 特集「実践・CSSコーディングの新常識」 公式サイト：[http://book.mycom.co.jp/wd/ http://book.mycom.co.jp/wd/] | ・Web Designing 2010年4月号 特集「実践・CSSコーディングの新常識」 公式サイト：[http://book.mycom.co.jp/wd/ http://book.mycom.co.jp/wd/] | ||
</div> | </div> | ||
2010年6月7日 (月) 16:39時点における版
2010年代のWeb制作に欠かせなくなるであろう、HTML5とCSS3についてまとめてみる。
HTML5 概要
1999年に勧告されたHTML4.01の後継にあたる。FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、
様々な要素を追加・廃止している。
2012年3月頃に正式に勧告される予定である。
HTML4.01と異なる点
（編集中）
新要素
特に「セクショニング」と「埋め込みコンテンツ」は実務的なニーズが高いとされている。
※以下は、2010年2月23日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。
[セクショニング］
・section
div要素の区分け的存在。見出しを付けられるような内容ごとに、このsection要素で区切ることが出来る。
コーディングの都合で区切る場合などは、従来通りdiv要素を用いる。
・nav
従来の<div id="navi">等の代替として使用できる。nav要素の中にul要素を用いるのが一般的のようである。
また、パンくずリストやページネーション等に用いるのも効果的。
・header
従来の<div id="header">の代替として使用できる。また、ドキュメント内に1つしか書けないということはないので、セクションの先頭に用いることもできる。
・footer
従来の<div id="footer">の代替として使用できる。また、ドキュメント内に1つしか書けないということはないので、セクションの最後に用いることもできる。
・article
・aside
・hgroup
［グルーピング］
・figure
［埋め込みコンテンツ］
・video
文字通り、動画を埋め込むための要素。従来のやり方ではFlashが必要であったりしたが、video要素では不要になった。
video要素には様々な属性が存在する。自動再生させるautoplay属性、ページ読み込みと同時にバッファを開始させるautobuffer属性、
万が一動画が読み込まれなかった場合に画像を表示させるposter属性など。
ただ、このvideo要素にはコーデックやIE対策など、様々な問題点が指摘されているため、実用できるようになるにはまだ時間がかかるとされている。
・audio
文字通り音楽を埋め込むための要素だが、ブラウザ間でサポートしているコーデックに差があるため、実装する際はやや複雑を要する。
詳細についてはhtml5doctorの記事を参照されたい。
・source
他のメディア要素と組み合わせて使用する。例えば、audio要素の中にsource要素を用いて音楽ファイルをロードする、など。
・canvas
・embed
［テキストレベル］
・mark
テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。
・time
・ruby／rt／rp
［フォーム］
・datalist
・keygen
・output
・progress
・meter
［インタラクティブ］
・details
・summary
・command
・menu
・device
CSS3 概要
事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。
しかし、一部プロパティやセレクタはすでに様々なブラウザでの実装が進んでいる。が、IEでの実装具合は言うまでもない。
CSS2.1と異なる点
（編集中）
新プロパティ対応表
（編集中）
新セレクタ対応表
（編集中）
資料
このページを作成するのに参考にしたページ等をリストアップ。
［Webサイト］
［雑誌］
・Web Designing 2010年4月号 特集「実践・CSSコーディングの新常識」 公式サイト：http://book.mycom.co.jp/wd/