「HTML5／CSS3」の版間の差分
編集の要約なし |
編集の要約なし |
||
| 3行目: | 3行目: | ||
<div id="manual"> | <div id="manual"> | ||
==HTML5 概要== | ==HTML5 概要== | ||
1999年に勧告されたHTML4.01の後継にあたる。FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、<br> | 1999年に勧告されたHTML4.01の後継にあたる。FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、<br>様々な要素を追加・廃止、そして一部定義変更もしている。<br> | ||
2012年3月頃に正式に勧告される予定である。 | 2012年3月頃に正式に勧告される予定である。 | ||
==HTML4.01と異なる点== | ==HTML4.01と異なる点== | ||
<p> | <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> | |||
また、DTDが存在しないためDOCTYPE宣言が簡略化された。記述方法は以下の項目を参照。</p> | また、DTDが存在しないためDOCTYPE宣言が簡略化された。記述方法は以下の項目を参照。</p> | ||
<br> | <br> | ||
=== | ===【head要素内記述】=== | ||
head要素内の記述はかなりシンプルになる。<br> | head要素内の記述はかなりシンプルになる。<br> | ||
'''<!DOCTYPE html>'''<br> | '''<!DOCTYPE html>'''<br> | ||
| 78行目: | 78行目: | ||
'''・mark''' | '''・mark''' | ||
<p>テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。</p> | <p>テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。</p> | ||
'''・wbr''' | |||
<p>英文やURL表記などのアルファベットで、折り返し可能な文字がない連続したテキストの場合指定した幅に収まらなくなり、<br> | |||
IEやSafari、Chromeでは折り返されずにはみ出てしまう。<br> | |||
FirefoxやOperaでは折り返されるが、折り返し位置が各々のブラウザの判断によるので適切でない位置で折り返す場合がある。<br> | |||
それを解決するために、折り返してもかまわない箇所にこのwbr要素を指定する。</p> | |||
'''・time''' | '''・time''' | ||
| 110行目: | 116行目: | ||
'''・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> | |||
<br> | <br> | ||
==CSS3 概要== | ==CSS3 概要== | ||
事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。<br> | 事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。<br> | ||
2010年9月8日 (水) 16:31時点における版
2010年代のWeb制作に欠かせなくなるであろう、HTML5とCSS3についてまとめてみる。
HTML5 概要
1999年に勧告されたHTML4.01の後継にあたる。FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、
様々な要素を追加・廃止、そして一部定義変更もしている。
2012年3月頃に正式に勧告される予定である。
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が属性化
<title>●●●</title>
<link rel="stylesheet">←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
・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要素はボールド表記が一般的なテキストに用いることができるようになった。
が、特に用いる機会はあまりなさそうである。
CSS3 概要
事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。
しかし、一部プロパティやセレクタはすでに様々なブラウザでの実装が進んでいる。が、IEでの実装具合は言うまでもない。
CSS2.1と異なる点
新プロパティや新セレクタが登場し、CSS2.1では実装できなかった角丸や細かいセレクタ設定などが可能となった。
また、従来はJSを用いないと実装出来なかったこともこのCSS3では一部実装可能となっている。
新プロパティ
（編集中）
新セレクタ
・: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