「HTML5／CSS3」を編集中

2010年代のWeb制作に欠かせなくなるであろう、HTML5とCSS3についてまとめてみる。

<div id="manual">
==HTML5 概要==
1999年に勧告されたHTML4.01の後継にあたる。FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、<br>様々な要素を追加・廃止している。<br>
2012年3月頃に正式に勧告される予定である。

==HTML4.01と異なる点==
前述した通り、様々な要素が追加・廃止されている。※以下は、2010年2月23日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。<br>
廃止要素：'''basefont'''、'''big'''、'''center'''、'''font'''、'''s'''、'''strike'''、'''tt'''、'''u'''、'''frame'''、'''frameset'''、'''noframes'''、'''acronym'''、'''applet'''、'''isindex'''、'''dir'''<br>
新要素については次項を参照されたい。要素の追加・廃止によってマークアップがより厳格になったため、注意が必要である。<br>
また、DTDが存在しないためDOCTYPE宣言が簡略化され '''&lt;!DOCTYPE html&gt;''' となった。

==新要素==
<p>特に「セクショニング」と「埋め込みコンテンツ」は実務的なニーズが高いとされている。<br>
※以下は、2010年2月23日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。</p>
<br>
===【セクショニング】===
'''・section'''
<p>div要素の区分け的存在。見出しを付けられるような内容ごとに、このsection要素で区切ることが出来る。<br>
コーディングの都合で区切る場合などは、従来通りdiv要素を用いる。</p>

'''・nav'''
<p>従来の&lt;div id="navi"&gt;等の代替として使用できる。nav要素の中にul要素を用いるのが一般的のようである。<br>また、パンくずリストやページネーション等に用いるのも効果的。</p>

'''・header'''
<p>従来の&lt;div id="header"&gt;の代替として使用できる。また、ドキュメント内に1つしか書けないということはないので、セクションの先頭に用いることもできる。</p>

'''・footer'''
<p>従来の&lt;div id="footer"&gt;の代替として使用できる。また、ドキュメント内に1つしか書けないということはないので、セクションの最後に用いることもできる。</p>

'''・aside'''
<p>メインコンテンツではないが、それと直接関連のある内容をマークアップする際に用いる。<br>
例えば[http://www.dokidokivisual.com/ きららのTOPページ]であれば、「うごうご4コマ」「Web限定連載」の部分にこれを用いるのが適していると言えそうである。</p>

'''・article'''
<p>他の部分と切り離しても、ひとつの文書やページとして体裁が成り立つ部分に用いる、とされている。<br>が、この定義の解釈は難しく、誤った使い方をしてしまいがちなので注意が必要である。</p>

'''・hgroup'''
<p></p>
<br>
===【グルーピング】===
'''・figure'''
<p></p>
<br>
===【埋め込みコンテンツ】===
'''・video'''
<p>文字通り、動画を埋め込むための要素。従来のやり方ではFlashが必要であったりしたが、video要素では不要になった。<br>
video要素には様々な属性が存在する。自動再生させる'''autoplay'''、ページ読み込みと同時にバッファを開始させる'''autobuffer'''、<br>
万が一動画が読み込まれなかった場合に画像を表示させる'''poster'''など。<br>
ただ、このvideo要素にはコーデックやIE対策など、様々な問題点が指摘されているため、実用できるようになるにはまだ時間がかかるとされている。</p>

'''・audio'''
<p>文字通り音楽を埋め込むための要素だが、ブラウザ間でサポートしているコーデックに差があるため、実装する際はやや複雑を要する。<br>
詳細については[http://www.html5.jp/html5doctor/native-audio-in-the-browser.html html5doctorの記事]を参照されたい。</p>

'''・source'''
<p>他のメディア要素と組み合わせて使用する。例えば、audio要素の中にsource要素を用いて音楽ファイルをロードする、など。</p>

'''・canvas'''

'''・embed'''
<p></p>
<br>
===【テキストレベル】===
'''・mark'''
<p>テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。</p>

'''・time'''

'''・ruby／rt／rp'''
<p></p>
<br>
===【フォーム】===
'''・meter'''
<p>最大値のある数量に用いる。体重や長さなど、最大値が明確にならない数量には適していない。<br>
meter要素にはいくつかの属性がある。実際の値となる'''value'''、最小の許容値を示す'''min'''、最大の許容値を示す'''max'''など。<br>
例：&lt;meter value="1" min="1" max="20"&gt;20件中1件目&lt;/meter&gt;</p>

'''・datalist'''

'''・keygen'''

'''・output'''

'''・progress'''
<p></p>
<br>
===【インタラクティブ】===
'''・details'''

'''・summary'''

'''・command'''

'''・menu'''

'''・device'''
<p></p>
<br>

==CSS3 概要==
事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。<br>
しかし、一部プロパティやセレクタはすでに様々なブラウザでの実装が進んでいる。が、IEでの実装具合は言うまでもない。

==CSS2.1と異なる点==
（編集中）

==新プロパティ対応表==
（編集中）

==新セレクタ対応表==
（編集中）

==新しい発想==
前述の通り、IEはCSS3に殆ど対応していない。そこで、Web Designing 2010年4月号に以下のような考え方が掲載されていたので紹介する。<br>
IEユーザーにはローリテラシーユーザーが多く、一方でFirefoxやSafari、Chrome、Operaのユーザーには、ハイリテラシーユーザーが多いという傾向がある。<br>
そのため、前者にはCSS2.1による最低限のビジュアルデザインを提供し、後者にはCSS3によるビジュアルデザインとインタラクション（よりリッチなユーザー体験）<br>を提供しようという考えだ。<br>
今後この考え方が普及することも考えられる。

==資料==
このページを作成するのに参考にしたページ等をリストアップ。
===【Webサイト】===
<p>[http://www.html5.jp/html5doctor/index.html HTML5.JP ＞ html5doctor]</p>
<p>[http://www.apple.com/html5/ HTML5 Showcase] - AppleがHTML5・CSS3などのWeb標準で構築したサイト</p>
<br>
===【雑誌】===
・Web Designing 2010年4月号 特集「実践・CSSコーディングの新常識」　公式サイト：[http://book.mycom.co.jp/wd/ http://book.mycom.co.jp/wd/]

</div>