# Web制作のためのHTML5入門

## 掲載サンプル一覧

# はじめにお読みください

- サンプルの一部に、html5shiv.js（★）やSelectivizr（☆）ライブラリを使用しているものがあります。これらのライブラリはサンプルデータには含まれていません。別途ダウンロードしてご利用ください。

- html5shiv.js ダウンロードページ
- Selectivizr ダウンロードページ

- 確認するためにWebサーバーにアップロードする必要があったり、MIMEタイプを設定する必要があったり、何らかの条件があるサンプルには「！」が付いています。「！」をクリックすると条件を確認することができます。
- サンプルによっては、フォルダの中に「readme.txt」があります。そちらも参考にしてください。
- 各サンプルの詳細な動作状況は、comp.xlsをご覧ください。
- 第1章にサンプルはありません。

# HTML5 に移行しよう

- 2-1 HTML5のサンプルc2-01.html
- 2-1 html5shiv.jsを使用するc2-02.html★
- 2-2 articleの使用例c2-03.html
- 2-4 sectionの使用例1　記事の節に使う例c2-04.html
- 2-4 sectionの使用例2　内容のまとまりとして使う例c2-05.html
- 2-4 nav、asideの使用例c2-06.html
- 2-4 hgroupの使用例c2-07.html
- 2-4 addressの使用例c2-08.html

# 基本のページレイアウトでHTML5に慣れよう

- 3-1 基本のセットc3-basic.html★
- 3-2 2コラムレイアウトc3-2col.html★
- 3-3 3コラムレイアウト（CSS2.1版）c3-3col.html★
- 3-3 3コラムレイアウト（CSS3版）c3-3col.html★
- 3-4 フォトギャラリーレイアウトc3-gallery.html★☆
- 3-5 フォームc3-form.html★
- 3-6 リキッドレイアウトc3-liquid.html★
- 3-7 スマートフォン向けレイアウトc3-phone.html

# メタデータ

- 4-2 ドキュメント全体の言語コードと文字コードを指定するc4-lang.html
- 4-3 文中の言語コードを一時的に変更するc4-lang2.html
- 4-4 meta要素の記述例c4-meta.html
- 4-5 マイクロデータ埋め込み前c4-microdata-before.html
- 4-5 マイクロデータc4-microdata-after.html
- 4-6 メディアクエリc4-mediaquery.html
- 4-6 @mediaルールとメディアクエリの使用例c4-mediaquery2.html
- 4-7 スマートフォンに最適化するc4-touch.html

# ボックスの整形とレイアウト

- 5-1 CSS3のカラー指定c5-color.html★
- 5-2 角丸四角形とドロップシャドウc5-box.html
- 5-3 border-radiusの応用c5-radius.html
- 5-4 トランスフォームc5-transforms.html
- 5-5 グラデーションc5-gradient.html
- 5-6 テーブルを整形するc5-table.html
- 5-7 マルチコラムレイアウトc5-mcl.html

# グラフィックとインタラクション

- 6-1 複数背景c6-background.html
- 6-2 トランジションc6-transitions.html
- 6-3 アニメーションc6-animation.html
- 6-4 アニメーションをJavaScriptで制御c6-animationjs.html
- 6-5 SVGc6-svg.html
- 6-6 canvasの基本図形c6-canvas-basic.html
- 6-7 canvasアニメーションc6-canvas-animation.html

# 高度化するテキスト表現

- 7-1 フレージング要素c7-phrasing.html
- 7-2 リンクによってアイコンを変えるc7-linkicons.html
- 7-3 :target 擬似クラスの利用c7-target.html
- 7-4 ナンバリングc7-counter.html
- 7-5 Webフォントc7-webfonts.html！
- 7-6 テキストシャドウc7-shadow.html

# オーディオ/ビデオを再生しよう

- 8-1 オーディオを再生するc8-audio.html！
- 8-1 オーディオを再生する（MP3）c8-mp3.html！
- 8-1 オーディオを再生する（OGG）c8-ogg.html！
- 8-2 ビデオを再生するc8-video.html！
- 8-2 ビデオを再生する（H.264）c8-mp4.html！
- 8-2 ビデオを再生する（OGV）c8-ogv.html！
- 8-2 ビデオを再生する（WebM）c8-webm.html！
- 8-3 ビデオをキービジュアルに使うc8-keyvideo.html★！
- 8-4 オーディオコントローラc8-controller.html！

# 強化されたフォーム機能をマスターしよう

- 9-1 input要素c9-input.html
- 9-2 バリデーション（1）c9-validation1.html
- 9-3 バリデーション（2）c9-validation2.html
- 9-3 querySelectorAll()とgetElementsByTagName()c9-querySelectorAll.html
- 9-4 UIステート擬似クラスc9-uistate.html
- 9-5 fieldsetをまとめてオン／オフc9-fieldset.html

# Webアプリケーションに挑戦しよう

- 10-1 インタラクティブWebアプリケーション（1）c10-app.html★！
- 10-2 インタラクティブWebアプリケーション（2）c10-app.html★！
- 10-2 インタラクティブWebアプリケーション（2）sessionStoragec10-app.html★！
- 10-3 外部コントローラc10-app.html★！
- 10-3 外部コントローラc10-controller.html！
- 10-4 オフラインc10-offline.html！
- 10-5 キャッシュを更新c10-offline.html！