「HTML5／CSS3」の版間の差分

提供：Wiki@KDS
ナビゲーションに移動 検索に移動
← 古い編集
編集の要約なし
編集の要約なし
 
(3人の利用者による、間の12版が非表示)
3行目: 3行目:
<div id="manual">
<div id="manual">
==HTML5 概要==
==HTML5 概要==
1999年に勧告されたHTML4.01の後継にあたる。FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、<br>様々な要素を追加・廃止している。<br>
1999年に勧告されたHTML4.01の後継にあたる。<br>
2012年3月頃に正式に勧告される予定である。
FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、<br>様々な要素を追加・廃止、そして一部定義変更もされている。<br>
2011年5月26日にW3Cより最終草案が公開された。正式勧告は2014年を目標としている。


==HTML4.01と異なる点==
==HTML4.01と異なる点==
前述した通り、様々な要素が追加・廃止されている。※以下は、2010年2月23日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。<br>
<p>前述した通り、様々な要素が追加・廃止・定義変更されている。※以下は、2010年2月23日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。<br>
廃止要素：'''basefont'''、'''big'''、'''center'''、'''font'''、'''s'''、'''strike'''、'''tt'''、'''u'''、'''frame'''、'''frameset'''、'''noframes'''、'''acronym'''、'''applet'''、'''isindex'''、'''dir'''<br>
廃止要素：'''basefont'''、'''big'''、'''center'''、'''font'''、'''s'''、'''strike'''、'''tt'''、'''u'''、'''frame'''、'''frameset'''、'''noframes'''、'''acronym'''、'''applet'''、'''isindex'''、'''dir'''<br>
新要素については次項を参照されたい。要素の追加・廃止によってマークアップがより厳格になったため、注意が必要である。<br>
新要素については次項を、定義変更された要素については次々項を参照されたい。要素の追加・廃止によってマークアップがより厳格になったため、注意が必要である。<br>
また、DTDが存在しないためDOCTYPE宣言が簡略化され '''&lt;!DOCTYPE html&gt;''' となった。
また、DTDが存在しないためDOCTYPE宣言が簡略化された。記述方法は以下の項目を参照。</p>
<br>
 
===【head要素内記述】===
head要素内の記述はかなりシンプルになる。<br>
'''&lt;!DOCTYPE html&gt;'''<br>
&lt;html lang="ja"&gt;<br>
&lt;head&gt;<br>
&lt;meta''' charset='''"UTF-8"&gt;←charsetが属性化<br>
&lt;meta''' name'''="description" content="●●●"&gt;←属性名がnameに変更<br>
&lt;meta''' name'''="keywords" content="●●,●●"&gt;←┘<br>
&lt;title&gt;●●●&lt;/title&gt;<br>
'''&lt;link rel="stylesheet" src="css/import.css"&gt;'''←type属性が不要になった（scriptについても同様）<br>
&lt;/head&gt;<br>
また、従来meta要素でhttp-equiv属性にContent-Typeを指定したりしていたが、HTML5ではこれらの記述は一切不要になった。<br>


==新要素==
==新要素==
22行目: 37行目:


'''・nav'''
'''・nav'''
<p>従来の&lt;div id="navi"&gt;等の代替として使用できる。nav要素の中にul要素を用いるのが一般的のようである。<br>また、パンくずリストやページネーション等に用いるのも効果的。</p>
<p>従来の&lt;div id="navi"&gt;等の代替として使用できる。nav要素の中にul要素を用いるのが一般的のようである。<br><s>また、パンくずリストやページネーション等に用いるのも効果的。</s> [http://www.cybergarden.net/ 益子さん]によると、主要なナビゲーションのみに用いるのが正しいらしい。</p>


'''・header'''
'''・header'''
35行目: 50行目:


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


'''・hgroup'''
'''・hgroup'''
59行目: 74行目:


'''・canvas'''
'''・canvas'''
<p>JSと組み合わせて使用することによって図を描いたりできる。詳しくは[http://www.html5.jp/canvas/ HTML5.JPの解説ページ]を参照されたい。</p>


'''・embed'''
'''・embed'''
66行目: 82行目:
'''・mark'''
'''・mark'''
<p>テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。</p>
<p>テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。</p>
'''・wbr'''
<p>英文やURL表記などのアルファベットで、折り返し可能な文字がない連続したテキストの場合指定した幅に収まらなくなり、<br>
IEやSafari、Chromeでは折り返されずにはみ出てしまう。<br>
FirefoxやOperaでは折り返されるが、折り返し位置が各々のブラウザの判断によるので適切でない位置で折り返す場合がある。<br>
それを解決するために、折り返してもかまわない箇所にこのwbr要素を指定する。</p>


'''・time'''
'''・time'''
98行目: 120行目:
'''・device'''
'''・device'''
<p></p>
<p></p>
==定義変更要素==
'''・address'''
<p>基本的にはサイト管理者や制作者の連絡先だけとなり、住所や店舗情報に使うのはNGとなった。</p>
'''・em、strong'''
<p>従来はem＝強調、strong＝より強調 であったが、HTML5ではem＝強調（制作者目線）、strong＝重要（ユーザー目線） となった。</p>
'''・small'''
<p>従来は装飾的な意味合いが強く、用いるのにはあまり好ましくないとされていたが、HTML5からは著作権表示や注釈などに用いることが出来るようになった。</p>
'''・i、b'''
<p>これらの要素も用いるのにはあまり好ましくないとされていたが、i要素はイタリック表記、b要素はボールド表記が一般的なテキストに用いることができるようになった。<br>が、日本語サイトでは特に用いる機会はなさそうである。</p>
'''・s'''
<p>非推奨要素であったが、2010年10月19日更新の草案より非推奨ではなくなったので、打ち消し線が気軽に作れるようになった。</p>
'''・u'''
<p>こちらも非推奨要素であったが、2011年5月26日更新の最終草案で非推奨ではなくなった。<br>
が、基本的にCSSを用いるのがベターだと思われるので、使いどころが謎である。</p>
'''・table'''
<p>用いるのは好ましくないとされていたborder属性が気にせず使えるようになり、逆に用いた方が好ましいとされていたsummary属性が非準拠になった。</p>
<br>
<br>
===【空要素】===
'''・wbr'''
<p>英文やURL表記などのアルファベットで、折り返し可能な文字がない連続したテキストの場合指定した幅に収まらなくなり、<br>
IEやSafari、Chromeでは折り返されずにはみ出てしまう。<br>
FirefoxやOperaでは折り返されるが、折り返し位置が各々のブラウザの判断によるので適切でない位置で折り返す場合がある。<br>
それを解決するために、折り返してもかまわない箇所にこのwbr要素を指定する。</p>
<br>
==CSS3 概要==
==CSS3 概要==
事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。<br>
事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。<br>
114行目: 152行目:
新プロパティや新セレクタが登場し、CSS2.1では実装できなかった角丸や細かいセレクタ設定などが可能となった。<br>
新プロパティや新セレクタが登場し、CSS2.1では実装できなかった角丸や細かいセレクタ設定などが可能となった。<br>
また、従来はJSを用いないと実装出来なかったこともこのCSS3では一部実装可能となっている。<br>
また、従来はJSを用いないと実装出来なかったこともこのCSS3では一部実装可能となっている。<br>
すなわち、CSS3の登場によってWebの表現技法が広がったわけである。</p>
すなわち、CSS3の登場によってWebの表現技法が広がったわけである。


==新プロパティ==
==新プロパティ==
（編集中）
いくつかの実装の進んでいないプロパティは以下のように先頭にベンダープリフィックスをつけたプロパティを併記する必要があるので注意。<br>
'''-moz-プロパティ:'''<br>
'''-webkit-プロパティ:'''<br>
<br>
'''・background:rgba(R,G,B,a);'''
<p>バックカラーをRGBで指定できるようになり、かつ不透明度（値は1.0～0.0）も指定できるようになった。</p>
 
'''・opacity:a;'''
<p>こちらはボックス全体の不透明度を指定する。バックカラーだけでなくテキストなどの包含要素も影響する。値は同じく1.0～0.0。</p>
 
'''・text-shadow:x y z c;'''
<p>文字通りテキストにシャドウを付ける。xにはX方向のズレ、yにはY方向のズレ、zにはぼかし距離を、それぞれpx単位の値で指定する。cにはシャドウの色を16進数で指定する。</p>
 
'''・box-shadow:x y z c;'''
<p>こちらはボックスにシャドウを付ける。値の指定方法は text-shadow と同様。
また、このプロパティはベンダープリフィックスが必要となる。</p>
 
'''・border-radius:r;'''
<p>ボックスに角丸を作ることができる。rには角丸の半径をpxで指定。親要素の背景が画像の場合、角丸部分が白抜けになってしまうことがあるので注意。<br>
また、このプロパティもベンダープリフィックスが必要となる。</p>
 
'''・background-image:linear-gradient();'''
<p>ボックスの背景色にグラデーションをつけられる。<br>-moz-と-webkit-で記述法が異なっていたが、2011年初頭頃からwebkitがmozに合わせる形で統一された。<br>
しかし、古いwebkit系ブラウザ（Android2.1の「ブラウザ」など）では統一前の記述でなければ効かないため、両方の記述を併記する必要があるので注意。<br>
［基本（統一後）］<br>
background-image:-moz（webkit）-linear-gradient(グラデ方向, 開始色, 終了色);<br>
グラデ方向はtopで縦方向、leftで横方向。色は16進数で指定する。<br>
［旧webkit］<br>
background-image:-webkit-gradient(linear, 開始位置, 終了位置, color-stop(位置, 色), color-stop(位置, 色));<br>
グラデ方向は開始位置と終了位置の関係で決まる。<br>
縦グラデ：left top, left bottom　横グラデ：left top, right top　斜めグラデ：left top, right bottom<br>
color-stopは、開始色と終了色が必要になるため最低2つは必要で、中間で色を変えたりする場合には3つ以上に増やすことも可能。<br>
位置には0～100%（開始が0で終了が100）、色は16進数で指定する。</p>
 
'''・transform:動作(値);'''
<p>要素の位置移動、拡大縮小、回転、ねじれを指定できる。動作によって値の指定方法が異なるので注意。<br>
位置移動：動作＝translate、値＝X方向の距離, Y方向の距離<br>
拡大縮小：動作＝scale、値＝X方向への倍率, Y方向への倍率（0.1～1.0）<br>
回転：動作＝rotate、値＝回転角度（単位はdeg、マイナスで反時計回り）<br>
ねじれ：動作＝skew、値＝X軸の傾斜角度, Y軸の傾斜角度</p>


==新セレクタ==
==新セレクタ==
124行目: 201行目:
数値以外では、3n+1で3つごと、oddで奇数番目、evenで偶数番目を指定できる。</p>
数値以外では、3n+1で3つごと、oddで奇数番目、evenで偶数番目を指定できる。</p>


==新しい発想==
'''・:nth-of-type( )'''
<p>前述のnth-child( )とほぼ同じ働きをするが、入れ子構造になっている場合では子要素全体で数えるnth-child( )に対し、nth-of-type( )は同じ要素ごとに数える。<br>
例えば、div要素の中にp要素とdiv要素が存在する場合に、'''div:nth-of-type(even)'''とすると、親のdiv要素の中のp要素とdiv要素それぞれで偶数番目に出てくる要素を指定する。<br>
一方、'''div:nth-child(even)'''とすると、親のdiv要素の中全体で数えるので、子のp要素とdiv要素は関係なく偶数番目に出てくる要素を指定することになる。</p>
 
==プログレッシブエンハンスメント==
前述の通り、IEはCSS3に殆ど対応していない。そこで、Web Designing 2010年4月号に以下のような考え方が掲載されていたので紹介する。<br>
前述の通り、IEはCSS3に殆ど対応していない。そこで、Web Designing 2010年4月号に以下のような考え方が掲載されていたので紹介する。<br>
IEユーザーにはローリテラシーユーザーが多く、一方でFirefoxやSafari、Chrome、Operaのユーザーには、ハイリテラシーユーザーが多いという傾向がある。<br>
IEユーザーにはローリテラシーユーザーが多く、一方でFirefoxやSafari、Chrome、Operaのユーザーには、ハイリテラシーユーザーが多いという傾向がある。<br>
137行目: 219行目:
[http://web.g.hatena.ne.jp/keywordlist http://web.g.hatena.ne.jp/keywordlist]
[http://web.g.hatena.ne.jp/keywordlist http://web.g.hatena.ne.jp/keywordlist]
<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/]<br>
 
・Web Designing 2009年11月号 特集「HTML5＆CSS3でWebは変わるのか？」　公式サイト：同上<br>
・実践 Web Standards Design　公式サイト：[http://gihyo.jp/book/2009/978-4-7741-3684-4 http://gihyo.jp/book/2009/978-4-7741-3684-4]
</div>
</div>

2012年2月16日 (木) 18:28時点における最新版

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

HTML5 概要[編集]

1999年に勧告されたHTML4.01の後継にあたる。
FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、
様々な要素を追加・廃止、そして一部定義変更もされている。
2011年5月26日にW3Cより最終草案が公開された。正式勧告は2014年を目標としている。

HTML4.01と異なる点[編集]

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


【head要素内記述】[編集]

head要素内の記述はかなりシンプルになる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">←charsetが属性化
<meta name="description" content="●●●">←属性名がnameに変更
<meta name="keywords" content="●●,●●">←┘
<title>●●●</title>
<link rel="stylesheet" src="css/import.css">←type属性が不要になった（scriptについても同様）
</head>
また、従来meta要素でhttp-equiv属性にContent-Typeを指定したりしていたが、HTML5ではこれらの記述は一切不要になった。

新要素[編集]

特に「セクショニング」と「埋め込みコンテンツ」は実務的なニーズが高いとされている。
※以下は、2010年6月24日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。


【セクショニング】[編集]

・section

div要素の区分け的存在。見出しを付けられるような内容ごとに、このsection要素で区切ることが出来る。
コーディングの都合で区切る場合などは、従来通りdiv要素を用いる。

・nav

従来の<div id="navi">等の代替として使用できる。nav要素の中にul要素を用いるのが一般的のようである。
また、パンくずリストやページネーション等に用いるのも効果的。 益子さんによると、主要なナビゲーションのみに用いるのが正しいらしい。

・header

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

・footer

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

・aside

メインコンテンツではないが、それと直接関連のある内容をマークアップする際に用いる。
例えばきららのTOPページであれば、「うごうご4コマ」「Web限定連載」の部分にこれを用いるのが適していると言えそうである。

・article

他の部分と切り離してもひとつの文書やページとして体裁が成り立つ部分に用いる、とされている。
が、この定義の解釈は難しく、誤った使い方をしてしまいがちなので注意が必要である。
※トップページには存在しないケースも多い。迷ったら「section」を用いる。

・hgroup

その名の通り、見出しをグループ化する要素。多くの場合、ページのタイトルとサブタイトル（タグライン）各々をh1～h6要素でマークアップしたものを
グループ化するのに用いられる。


【グルーピング】[編集]

・figure


【埋め込みコンテンツ】[編集]

・video

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

・audio

文字通り音楽を埋め込むための要素だが、ブラウザ間でサポートしているコーデックに差があるため、実装する際はやや複雑を要する。
詳細についてはhtml5doctorの記事を参照されたい。

・source

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

・canvas

JSと組み合わせて使用することによって図を描いたりできる。詳しくはHTML5.JPの解説ページを参照されたい。

・embed


【テキストレベル】[編集]

・mark

テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。

・wbr

英文やURL表記などのアルファベットで、折り返し可能な文字がない連続したテキストの場合指定した幅に収まらなくなり、
IEやSafari、Chromeでは折り返されずにはみ出てしまう。
FirefoxやOperaでは折り返されるが、折り返し位置が各々のブラウザの判断によるので適切でない位置で折り返す場合がある。
それを解決するために、折り返してもかまわない箇所にこのwbr要素を指定する。

・time

・ruby／rt／rp


【フォーム】[編集]

・meter

最大値のある数量に用いる。体重や長さなど、最大値が明確にならない数量には適していない。
meter要素にはいくつかの属性がある。実際の値となるvalue、最小の許容値を示すmin、最大の許容値を示すmaxなど。
例：<meter value="1" min="1" max="20">20件中1件目</meter>

・datalist

・keygen

・output

・progress


【インタラクティブ】[編集]

・details

・summary

・command

・menu

・device

定義変更要素[編集]

・address

基本的にはサイト管理者や制作者の連絡先だけとなり、住所や店舗情報に使うのはNGとなった。

・em、strong

従来はem＝強調、strong＝より強調 であったが、HTML5ではem＝強調（制作者目線）、strong＝重要（ユーザー目線） となった。

・small

従来は装飾的な意味合いが強く、用いるのにはあまり好ましくないとされていたが、HTML5からは著作権表示や注釈などに用いることが出来るようになった。

・i、b

これらの要素も用いるのにはあまり好ましくないとされていたが、i要素はイタリック表記、b要素はボールド表記が一般的なテキストに用いることができるようになった。
が、日本語サイトでは特に用いる機会はなさそうである。

・s

非推奨要素であったが、2010年10月19日更新の草案より非推奨ではなくなったので、打ち消し線が気軽に作れるようになった。

・u

こちらも非推奨要素であったが、2011年5月26日更新の最終草案で非推奨ではなくなった。
が、基本的にCSSを用いるのがベターだと思われるので、使いどころが謎である。

・table

用いるのは好ましくないとされていたborder属性が気にせず使えるようになり、逆に用いた方が好ましいとされていたsummary属性が非準拠になった。


CSS3 概要[編集]

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

CSS2.1と異なる点[編集]

新プロパティや新セレクタが登場し、CSS2.1では実装できなかった角丸や細かいセレクタ設定などが可能となった。
また、従来はJSを用いないと実装出来なかったこともこのCSS3では一部実装可能となっている。
すなわち、CSS3の登場によってWebの表現技法が広がったわけである。

新プロパティ[編集]

いくつかの実装の進んでいないプロパティは以下のように先頭にベンダープリフィックスをつけたプロパティを併記する必要があるので注意。
-moz-プロパティ:
-webkit-プロパティ:

・background:rgba(R,G,B,a);

バックカラーをRGBで指定できるようになり、かつ不透明度（値は1.0～0.0）も指定できるようになった。

・opacity:a;

こちらはボックス全体の不透明度を指定する。バックカラーだけでなくテキストなどの包含要素も影響する。値は同じく1.0～0.0。

・text-shadow:x y z c;

文字通りテキストにシャドウを付ける。xにはX方向のズレ、yにはY方向のズレ、zにはぼかし距離を、それぞれpx単位の値で指定する。cにはシャドウの色を16進数で指定する。

・box-shadow:x y z c;

こちらはボックスにシャドウを付ける。値の指定方法は text-shadow と同様。 また、このプロパティはベンダープリフィックスが必要となる。

・border-radius:r;

ボックスに角丸を作ることができる。rには角丸の半径をpxで指定。親要素の背景が画像の場合、角丸部分が白抜けになってしまうことがあるので注意。
また、このプロパティもベンダープリフィックスが必要となる。

・background-image:linear-gradient();

ボックスの背景色にグラデーションをつけられる。
-moz-と-webkit-で記述法が異なっていたが、2011年初頭頃からwebkitがmozに合わせる形で統一された。
しかし、古いwebkit系ブラウザ（Android2.1の「ブラウザ」など）では統一前の記述でなければ効かないため、両方の記述を併記する必要があるので注意。
［基本（統一後）］
background-image:-moz（webkit）-linear-gradient(グラデ方向, 開始色, 終了色);
グラデ方向はtopで縦方向、leftで横方向。色は16進数で指定する。
［旧webkit］
background-image:-webkit-gradient(linear, 開始位置, 終了位置, color-stop(位置, 色), color-stop(位置, 色));
グラデ方向は開始位置と終了位置の関係で決まる。
縦グラデ：left top, left bottom　横グラデ：left top, right top　斜めグラデ：left top, right bottom
color-stopは、開始色と終了色が必要になるため最低2つは必要で、中間で色を変えたりする場合には3つ以上に増やすことも可能。
位置には0～100%（開始が0で終了が100）、色は16進数で指定する。

・transform:動作(値);

要素の位置移動、拡大縮小、回転、ねじれを指定できる。動作によって値の指定方法が異なるので注意。
位置移動：動作＝translate、値＝X方向の距離, Y方向の距離
拡大縮小：動作＝scale、値＝X方向への倍率, Y方向への倍率（0.1～1.0）
回転：動作＝rotate、値＝回転角度（単位はdeg、マイナスで反時計回り）
ねじれ：動作＝skew、値＝X軸の傾斜角度, Y軸の傾斜角度

新セレクタ[編集]

・:nth-child( )

( )内には任意の数値などを指定する。例えば p:nth-child(3) とすると、3番目に出てくるp要素を指定することができる。
数値以外では、3n+1で3つごと、oddで奇数番目、evenで偶数番目を指定できる。

・:nth-of-type( )

前述のnth-child( )とほぼ同じ働きをするが、入れ子構造になっている場合では子要素全体で数えるnth-child( )に対し、nth-of-type( )は同じ要素ごとに数える。
例えば、div要素の中にp要素とdiv要素が存在する場合に、div:nth-of-type(even)とすると、親のdiv要素の中のp要素とdiv要素それぞれで偶数番目に出てくる要素を指定する。
一方、div:nth-child(even)とすると、親のdiv要素の中全体で数えるので、子のp要素とdiv要素は関係なく偶数番目に出てくる要素を指定することになる。

プログレッシブエンハンスメント[編集]

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

資料[編集]

このページを作成するのに参考にしたページ等をリストアップ。

【Webサイト】[編集]

HTML5.JP ＞ html5doctor
HTML5 Showcase - AppleがHTML5・CSS3などのWeb標準で構築したサイト
http://web.g.hatena.ne.jp/keywordlist

【雑誌・書籍】[編集]

・Web Designing 2010年4月号 特集「実践・CSSコーディングの新常識」　公式サイト：http://book.mycom.co.jp/wd/
・Web Designing 2009年11月号 特集「HTML5＆CSS3でWebは変わるのか？」　公式サイト：同上
・実践 Web Standards Design　公式サイト：http://gihyo.jp/book/2009/978-4-7741-3684-4

「https://wiki.kohga.tokyo/index.php?title=HTML5／CSS3&oldid=7180」から取得