新しい HTMLと CSS の学習
1
Contents
■ HTML5 概要・・・・・
Lesson1: HTML５とは？・・・・・・・・
5
Lesson2: 以前の HTML からの変更点
・HTML５基本の書き方。・・・・・・・・・・・・ ・
5
・HTML５DOCTYPE 宣言。・・・・・・・・・・・・
6
・HTML 要素と文字のエンコーディング ・・・・・・
6
・HTML5 が対応していない IE など
ブラウザへ新要素への対応・・・・
7
・HTML５に対応するリセット CSS の導入 ・・・・・
7
・HTML５基本の書き方まとめ・・・・・・・・・・ ・
7
Lesson3: HTML5 新要素・・・・・・・・・・
9
・HTML５新しいコンテンツ要素。・・・・・・・・・
9
・HTML５で廃止された要素・・・・・・・・・・・・
11
・HTML5 のマークアップチェックポイント ・・・・・
11
2
Lesson４: ページのアウトラインを考える・・
12
・アウトラインの確認。・・・・・・・・・・・・・・
13
Lesson5: 新しい要素を使ってみる（レイアウト編）
14
・header 要素・・・・・・・・・・・・・・・・・・
14
・hgroup 要素・・・・・・・・・・・・・・・・・・
16
・nav 要素 ・・・・・・・・・・・・・・・・・・・
20
・article 要素 ・・・・・・・・・・・・・・・・・
22
・section 要素 ・・・・・・・・・・・・・・・・・
24
・aside 要素 ・・・・・・・・・・・・・・・・・・
26
・form の新しい属性・・・・・・・・・・・・・・・
29
Lesson6: 新しい要素を使ってみる（機能・動的要素編）
4
・video 要素・・・・・・・・・・・・・・・・・・
40
・audio 要素・・・・・・・・・・・・・・・・・・
43
・canvas 要素 ・・・・・・・・・・・・・・・・・・・
44
・canvas 要素を使って図形を描く・・・・・・・・・
45
Lesson７: CSS と CSS3 ・・・・・・・・
52
・拡張子の種類 ・・・・・・・・・・・・・・・・・
52
3
Lesson8: HTML5 新しいタグと CSS3 の連携
54
Lesson９: CSS3 新しい機能を使ってみる・・
56
・角丸(border-radius)・・・・・・・・・・・・・・
56
・画像枠(border-image)・・・・・・・・・・・・・・
57
・変形(transform)・・・・・・・・・・・・・・・・
58
・変形(background-clip)・・・・・・・・・・・・・
59
・背景画像のサイズ(background-size)・・・・・・・
60
・背景や文字の透過(opacity)・・・・・・・・・・・・
61
・枠にシャドーを掛ける(box-shadow)・・・・・・・
61
・文字にシャドーを掛ける(text-shadow)・・・・・・
62
Lesson10: CSS3 と HTML５でアニメーション
63
・アニメーションとは・・・・・・・・・・・・・・
63
・Transition の内容・・・・・・・・・・・・・・・
63
・サンプル記述例(角丸アニメーション)・・・・・・・
64
・サンプル 2 応用(ローテーションの回転)・・・・・・
66
・サンプル３応用(テキストシャドウと傾斜)・・・・・
67
・Animation の内容・・・・・・・・・・・・・・・
68
・サンプル記述例(DIV の枠が拡大する)・・・・・・・
68
4
・サンプル 2 応用(文字が 1 文字づつ表示)・・・・・・
71
演習 1：HTML5・CSS3・JS
（canvas で描画ページを作る）
72
Lesson11: API の基礎・・・・・・・・・・・
77
演習 2：API の実装（Google map API を実装する）
78
5
Lesson1: HTML５とは？
現在、2014 年までの正式勧告を目指して策定が行われている HTML 言語の改訂版。改訂の主要目的のひとつとして人間にも 読解可能でコンピューターやディバイス（ウェブブラウザ、 構文解析器など）にも矛盾せず理解されるとともに最新の マルチメディアをサポートする言語に向上することである。 HTML5 で作成されたサイトは、昨年末辺りから、現在までかなり増えてきています。 グーグルの特設サイトや海外のサイトなどで、かなり難しい内容をテストしていてHTML5 は難しい と感じるかもしれません。 確かにいきなり動的なサイトやAPI 関連をいきなりやるのはかなり大変です。 それより現状は、ほとんどの人ですぐ必要になる通常のページをどうマークアップするかが大切で、 既存のｈｔｍｌ・Xhtml をどのように 変更・更新するかだとおもいます。 構造の考え方が全く変わりましたが、マークアップだけでしたらXHTML と HTML5 はいままで xhtml で マークアップしていた人にとっては簡単に乗り換えられるとおもいます。Lesson2:以前の HTML からの変更点
HTML5 の基本の書き方
XHTML から５への移行は徐々に行われており、各ブラウザーも順次環境を整えている状況です。 そんな中で、大きな違いは、多くの新しいタグが加わり、タグの記述が変わってくることです。 構造面では、今までのxhtml ではブロックレベル要素とインライン要素という分類に分けていましたが、 HTML5 ではそれは無くなり、代わりに『コンテンツ・モデル』という、メタデータ、フロー、セクシ ョン、ヘッディング、フレージング、エンベッド、インタラクティブというコンテンツの種類が定義さ れています。 これは、レイアウト要素というより、内容に合わせて要素を変え、SEO などの検索エンジンに配慮した ページ作成を目的にしていると考えるといいようです。 基本的には XHTML→HTML5 の移行は数個の新規タグと知識があればすぐに移行できるとおもいます。 そこで HTML5 の基本の記事から XHTML から HTML5 への移行の際のタグの違いをまとめて簡単な構成を作 成してみましょう。6 ただし正式な勧告がまだな状態の HTML5 なので現段階（2012.02.01）での考えたマークアップなので、書 き方や、内容に変更などが出る可能性があることはご承知願います。 XHTML1.0 と HTML5 の基本の HTML の違いを覚えましょう。 HTML5 と XHTML の DOCTYPE 宣言 XHTML1.0 と比べて、HTML5 では非常にシンプルになっていて、これで標準モードでレンダリングされ HTML5 に準拠したページになります。 HTML 要素と文字のエンコーディング XHTML1.0 では html 要素に xmlns 属性が必要でしたが、HTML5 では lang 属性を記述して言語を 指定しています。続いてエンコーディングの指定方法ですが、HTML5 でもエンコーディング指定をするのは 変わりませんが短くなりました。 HTML5 が対応していない IE などブラウザへ新要素への対応 IE6 から IE8 は HTML5 の新要素に対応していないのでスタイルシートを適応することができないようです。
7 そこで、JavaScript を用いて新たに要素を作成します。 document.createElement(‘新しい要素’); を使い指定するか、すべての新しい要素分を 作成するのは大変なので、Remy Sharp 氏が公開した『html5.js』というライブラリをインポートすることで 一部は解決することができるようです。 HTML5 に対応したリセット CSS の導入 最後にHTML5 用のリセット CSS を読み込みます。こちらもいろいろリセット CSS が公開されていますが ここではGoogle の提供するリセット CSS を標準として、html5doctor のリセット CSSを 『http://code.google.com/p/html5resetcss/downloads/list』 からダウンロードして使います。 上記のリセットは利用しているサイトも多く、数バージョンがあります。 ここでは1.6.1.css を 利用してみましょう。 ＊リセットCSS とは、ブラウザ初期設定でのデザイン表示の違いを解消するために、各ブラウザの 初期設定をクリアするためのCSS になります。
HTML5 の基本の書き方のまとめ
HTML5 の記述例 1 01<!DOCTYPE html> 02<html lang="ja"> 03<head> 04<meta charset="UTF-8"> 05<title>サイトのタイトル</title>06<link rel="stylesheet"type="text/css" href="css/html5reset.css" /> 07<!--[if lt IE 9]> 08<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 09<![endif]--> 10</head> 11<body> 12
8 13//ここにサイトに表示するコンテンツ内容を記述 14 15</body> 16</html> XHTML1.0 の記述例
01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> 05<link rel="stylesheet"type="text/css" href="reset.css" />
06<title>サイトのタイトル</title> 07</head> 08<body> 09 10//ここにサイトに表示するコンテンツ内容を記述 11 12</body> 13</html> ※reset.css は任意 ※既存のコードをそのまま使用する場合は「html5.js」や「html5reset.css」を使う必要はありません。 このように上の4 行を変えるだけで一応？HTML5 で宣言されたコードになります。
9
Lesson3: HTML5 新要素
現在の仕様において、完全に新しく導入されたコンテンツ要素は： article … 「記事」を表すセクション要素 aside … 補助的な情報を表すセクション要素 footer … セクションのフッタ header … セクションのヘッダ hgroup … 見出し要素(h1 - h6) をまとめるための要素 nav … ナビゲーションリンクを表すセクション要素 section … 汎用的なセクション要素 figure … キャプション付きのフロー要素。図表等の埋め込みが主な用途 source … video/audio 内で使用され、リソースの URL や MIME タイプの指定を行う video … 動画埋め込みに使用する要素 audio … 音声埋め込みに使用する要素 canvas … JavaScript で操作可能なグラフィック要素 output … 出力フォーム details … ユーザが必要に応じて参照可能な詳細情報を表す要素 menu … ツールバーや右クリック時などのメニューを表す要素
bb … ブラウザの特殊な機能(Mozilla Prism のような Web アプリのスタンドアローン化など)
を呼び出すコマンドボタン(Browser Button の略)
command … ユーザによって呼び出されるコマンドボタン。menu とともに用いられる datagrid … 2 次元のグリッド
10 datalist … データのリストを定義するための不可視の要素。option タグを用いて個々の データを指定する dialog … 対話形式のテキストを表す。dt 要素と dd 要素を用いて、発言者と発言内容を表す progress … プログレスバー meter … メーター time … 日付を表す要素 mark … 他の部分から参照されている、という意味合いが強いテキストの強調また、 s ruby/rt/rp(ルビ要素)と embed(オブジェクトの埋め込み)は、ブラウザ固有の 実装が進んでいた要素であるが、今回正式に仕様の一部となった ※ 上記が現段階で追加される要素になっていますが、今後のテスト状況で利用方法や マークアップの形式など変更される場合があります。
汎用される内容はこの後詳しく説明していきますので、今はこのリストの内容が
追加されるということと、簡単な説明を覚えておくと良いと思います。
HTML 5 で廃止された要素
以下の要素は、HTML 5 では廃止されている。 acronym applet basefont bgsound big blink center dir font frame frameset isindex listing marquee nobr noembed noframes plaintext s spacer strike tt u wbr xmp11 ＊廃止になったからといって、今まで使っていたタグが急に見れなくなったりする訳ではなく、 あくまでも非推奨という内容が多い。
●HTML5 のマークアップチェックポイント
HTML では、マークアップの際のタグで、閉じタグを必要とせず、省略できる記述があります。 空要素とも呼ばれたりしていますが、XHTML では、空要素もタグの最後に /> をつけて 閉じることが推奨されました。HTML５では終了タグを必要としていたものでも、省略できたり 完全に開始タグから省略できるものも存在します。 基本の考え方は、１）閉じタグを書いてはいけない要素 ２）閉じタグを省略できる要素 ３）完全にタグを省略できる要素 に分かれると言う考えでいいでしょう。 1.閉じタグを書いてはいけない要素
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、 track、wbr 2.閉じタグを省略できる要素
li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th 3.完全にタグの記述を省略できる要素
html、head、body、colgroup、tbody 「閉じタグを書いてはいけない要素」は、特別にタグで囲まずに空要素の閉じタグ「/>」のみで 記述することが可能です。例えば「<br></br>」と書くのは誤りですが、XHTML の形式 「<br/>」と書くのは認識されています。また、HTML4 の「<br>」という書き方も可能です。 「完全に記述を省略できる要素」は、省略したとしても、要素は存在することをちゃんと 理解してください。例えば「<body>」タグは省略できますが、データー上は存在しますので、 「document.body」には常にアクセスできます。ただし、html や、head・body などは マークアップ上、省略しない方がソースのメリハリも付くので良いと思います。12
Lesson4: ページのアウトラインを考える
HTML5 のコーディングを考えるとき、Section という要素の使い方と、 それを利用した、アウトライン構造が重要視されているように思います。 レイアウト上の問題だけでなく、新しいHTML5 での、コンテンツモデルという 表現上の考え方でも必要な知識だと思います。 ●アウトラインとは：
今までのHTML では、DIV を使って入れ子にしたり、 ｈ１～６の タグを使い分けて構造上ではなく、表現とタグを使った形式上のアウトラインになっている という感覚だったと思います。 これが、HTML5 の中では、レイアウトにも、それぞれの枠に意味合いができ、記述する 内容によって利用する要素が変わってきます。 その中でも、Section 要素は、ページのアウトラインを作る上で、必要な要素になります。 簡単にいえば、本と同じで、まずタイトルがあり、目次があり、内容がある。 そうした流れをHTML の中で作成する意識です。 例：【
XHTML1.0 の場合】
XHTML では、見出しの要素がそのままアウトラインの意識に変わります。 しかしこの場合表示の大きさなどの変更で使われる内容もアウトラインと取られてしまいます。 1 <h1>HTML5 の学習</h1> 2 <h2>HTML5 で作るアウトライン</h2> 3 <p>HTML5 でアウトラインを考えると、ページを色々見やすくできます。</p> 4 <h3>HTML5 のアウトライン概要</h3> 5 <p>HTML5 では、内容を決める色々な要素があります。<br> 6 その中でもSECTION 要素は、アウトラインを作る大切な要素です</p> 7 <h4>SECTION 要素</h4>> 8 <p>SECTION は、ページの中の内容を項目ごとに仕分けし、<br> 9 表示させるために重要な役割を持ちます。</p>【
HTML5 の場合】
01 <h1>HTML5 の学習</h1> 02 <section> 03 <h2>HTML5 で作るアウトライン</h2> 04 <p> HTML5 でアウトラインを考えると、ページを色々見やすくできます。</p> 05 <section> 06 <h3>HTML5 のアウトライン概要</h3>13 07 <p>HTML5 では、内容を決める色々な要素があります。<br> 08 その中でもSECTION 要素は、アウトラインを作る大切な要素です</p> 09 <section> 10 <h4>SECTION 要素</h4>> 11 <p>SECTION は、ページの中の内容を項目ごとに仕分けし、<br> 12 13 表示させるために重要な役割を持ちます。</p> 14 </section><!—h4 見出しの Section 終了--> 15 </section><!—h3 見出しの Section 終了--> 16 </section> <!—h2 見出しの Section 終了--> HTML５では、Section を入れ子にすることで、どの内容の部分が一番大枠になるのかを、 しっかり理解させることができます。 また、見出しの要素 h を入れることで、セクショニングタグの タイトルとして意識することも出来ます。また、ｈ要素をheader タグで囲むことも出来ます。 ＊セクショニングタグとは、記事や内容の記述を定義するタグで、種別する記述で、おもに、 article,section,nav,aside 等で、見出しやフッターの範囲を指定すると捉えてもいいでしょう。
アウトラインの確認
上記内容のソースをhttp://gsnedders.html5.org/outliner/ にあるHTML 5 Outlinerを使い、 実際に確認してみたいと思います。 どちらの結果も下記のようになります。 しかし最初のXHTML の場合は、ｈの見出しタグの大きさ（数字）に よって識別されているだけで、入れ子（ネスティング）という意識ではありません。14
Lesson5: 新しい要素を使ってみる（レイアウト編）
header 要素の特徴
header 要素は、ページやセクションのヘッダーを表す場合に使用しますが利用の要点をまとめると： header 要素はページ内に複数使うことができます。 header 要素は見出し要素を含むことを想定していますが、無い場合でも間違えではありません。 header 要素はセクショニング・コンテンツではないため、アウトラインに現れることはありません。 header 要素内に header 要素、footer 要素を使うことはできません。
header 要素は通常『ページ目次・サイトロゴ・検索フォーム』などを入れて使用します。 header 要素のマークアップ方法 XHTML1.0 や HTML4 でのコーディングでは、ページのヘッダーを表す場合に div 要素に id 名を ”header”と付けてコーディングしていました。header 要素を簡単に言ってしまえば、これに変わる 要素として単一のタグとして使用することができ、ヘッダーとしての意味をより強めることができます。 また、header 要素の特徴の 1 つでセクションのヘッダーとしてページ内に複数使用することができます。 例えば、下のページを参考にしてみましょう。
【
header 要素を複数使った例】
01 <header> 02 <hgroup> 03 <h1>HTML5 の学習</h1> 04 <h2>HTML5 の Header 要素 </h2> 05 </hgroup> 06 <nav> 07 <ul> 08 <li>HOME</li> 09 <li><a href="#">Tutorial</a></li> 10 <li><a href="#">Question</a></li> 11 </ul> 12 </nav> 13 </header> 14 <article> 15 <section> 16 <header>15 17 <h1>『header 要素』 / HTML5 新しい要素</h1> 18 <p>ページや Section のヘッダーを書き込むエリアの要素</p> 19 </header> 20 <article> 21 <h2>header 要素の利用、</h2> 22 <p>CSS を使ったりして、看板やヘッダーを表示させます。</p> 23 </article> 24 </section> 25 </article> 上記の中の、1～12 行目に書かれている header 要素はページのヘッダー（見出し）を表し、 14～17 行目の header 要素は記事のヘッダー（見出し）を表しています。 このように各セクションのヘッダー（見出し）を表すためにheader 要素を使うことができます。
header 要素のアウトライン
header 要素はセクショニング・コンテンツではないので、アウトラインには現れません。 ただし、ｈの要素を入れるとアウトラインとして認識されます。。【
header 要素のアウトラインを確認】
01 <header> 02 <h1>HTML5 の学習</h1> 03 <p>HTML5 header 要素</p> 04 </header> 05 <section> 06 <h1>『header 要素』 / HTML5 新しい要素</h1> 07 <article> 08 <h2>header 要素</h2> 09 <p>セクションのヘッダーを表す場合に使用します。</p> 10 </article> 11 </section> 1.”Untitled Section” 1. 『header 要素』 / HTML5 新要素一覧 1. header 要素(上記と同列のセクショニング要素。 同列のセクションが増えると１・２ １・３となる。)16 header 要素だけでは、セクショニング・コンテンツとして成り立たず、h1~6 の要素や、hgroup 等の 見出しタグが入って初めて、セクションとしてアウトライン表示されます。 上記アウトラインの１ヘッダー要素は、p の段落しか記述していないので、最初の段落『HTML5 の学習』 部分をh1 のタグに変更してみてください。下記のようになると思います。 1. HTML5 の学習 1. 『header 要素』 / HTML5 新要素一覧 1. header 要素(上記と同列のセクショニング要素。 同列のセクションが増えると１・２ １・３となる。) header 要素の注意事項：
最後にheader 要素の中に header 要素と footer 要素を記述することはできません。
hgroup 要素
セクションの見出しを表し、見出し要素のh1～h6 要素をグループ化します。 hgroup 要素の特徴 見出しと関連する小見出しや副題をグループ化して使用するhgroup 要素ですが、使用時に 注意しなければならないポイントがあります。 hgroup 要素内には、h1～h6 要素以外の要素を使用することができません。 hgroup 要素内の見出し要素は、レベルが最も高い要素以外はアウトラインに現れません。 hgroup のマークアップ方法 サンプルソースを書きながら確認していきたいと思います。【間違ったマークアップの例 】
01 <article> 02 <header> 03 <hgroup> 04 <h1>HTML5 の学習</h1> 05 <p>HTML5 の Header 要素 </p> 06 </hgroup>17 07 <nav> 08 <ul> 09 <li>HOME</li> 10 <li><a href="#">Tutorial</a></li> 11 <li><a href="#">Question</a></li> 12 </ul> 13 </nav> 14 </header> 前記の【間違ったマークアップの例 】では、hgroup 要素内に p 要素が存在しています。 hgroup 要素は h1～h6 要素以外の要素を入れることができないので、この記述は間違えになります。
【正しいマークアップの例
】
01 <article> 02 <header> 03 <hgroup> 04 <h1>HTML5 の学習</h1> 05 <h2>HTML5 の Header 要素 </h2> 06 </hgroup> 07 <nav> 08 <ul> 09 <li>HOME</li> 10 <li><a href="#">Tutorial</a></li> 11 <li><a href="#">Question</a></li> 12 </ul> 13 </nav> 14 </header> 【正しいマークアップの例 】では、hgroup 要素内に h1・h2 等 h の見出し要素のみ存在しているので、 この記述が正しいことを確認できます。 次に、hgroup 要素のアウトラインですが、h 系の要素がある場合は hgroup で囲めばよいのかと 考えがちですが、しかし、hgroup 内の見出し要素は最もレベルが高い見出しの要素以外は、アウトライン 表示から除外されます。また、header 要素の中に入れて利用することもありますが、hgroup が header に代わる場合もあります。
18 【hgroup 要素を使用しない例 】 01 <section> 02 <h1>HTML5 でサイトをつくろう</h1> 03 <section> 04 <h2>HTML5 と Wordpress の情報ブログ</h2> 05 <p>HTML5 を 1 から勉強し始めました。・・・</p> 06 <p>2014 年の勧告時に置いていかれないように、このブログで・・・</p> 07 </section> 08 <section> 09 <h2>当ブログについて</h2> 10 <p>このブログは学習した内容をまとめて、・・・</p> 11 </section> 12 </section> 【前記ソースのアウトライン 】 1.Untitled Section 1. HTML5 でサイトをつくろう 1. HTML5 と Wordpress の情報ブログ 2. 当ブログについて ページのテーマであるh1 要素『HTML5 でサイトをつくろう』の副題として利用したい h2 要素『HTML5 と Wordpress の情報ブログ』を hgroup 要素でグループ化しない場合、 副題のh2 要素『HTML5 と Wordpress の情報ブログ』は同じ h2 要素『当ブログについて』と 同一レベルで認識されます。 続いて、hgroup 要素を使い h1 要素『HTML5 でサイトをつくろう』と h2 要素『HTML5 と Wordpress の情報ブログ』をグループ化した場合について考えてみます。
19 【hgroup 要素の使用例 】 01 <section> 02 <hgroup> 03 <h1>HTML5 でサイトをつくろう</h1> 04 <h2>HTML5 と Wordpress の情報ブログ</h2> 05 </hgroup> 06 07 <p>HTML5 を 1 から勉強し始めました。・・・</p> 08 <p>2014 年の勧告時に置いていかれないように、このブログで・・・</p> 09 10 <section> 11 <h2>当ブログについて</h2> 12 <p>このブログは学習した内容をまとめて、・・・</p> 13 </section> 14 </section> 【上記ソースのアウトライン 】 1.Untitled Section 1. HTML5 でサイトをつくろう 1. 当ブログについて hgroup 要素を使用した今回のソースでは、副題であった h2 要素『HTML5 と Wordpress の情報ブログ』 がアウトラインに表示されずh1 要素『HTML5 でサイトをつくろう』のみが採用されています。このことから、 hgroup 要素内では最も見出しレベルが高い要素が採用され、それ以外はアウトラインから除外されている ことが確認できます。 hgroup 要素に関しては以上になります。
20
nav 要素
ページ内などのグローバルナビボタンなどのナビゲーションリンクを伴うセクションのこと。nav 要素の特徴
nav 要素は、
サイトやページの主要なナビゲーションに使用しなければなりません。
すべてのリンクグループに
nav 要素を使ってはいけません。
例えば、
nav 要素はサイトにとって主要ナビゲーションであるグローバルナビゲーション等に
使います。ページフッター内に設置されているナビゲーション等には
nav 要素を使わずに
footer 要素で対応します。
この先には何があるのか、サイト内のページ構成や、進む方向を示す有効な表示を
作ることで、クライアントの使い勝手をより快適にする意図があります。
nav 要素のマークアップ基本
5 つのメニュー『ホーム, ニュース, 商品一覧, 会社案内, お問い合わせ』のグローバルナビを例に、 nav 要素の使用方法を確認したいと思います。 1 <nav> 2 <ul> 3 <li><a href="#">ホーム</a></li> 4 <li><a href="#">ニュース</a></li> 5 <li><a href="#">商品一覧</a></li> 6 <li><a href="#">会社案内</a></li> 7 <li><a href="#">お問い合わせ</a></li> 8 </ul> 9 </nav> 従来どおりul 要素で各ページへのリンクナビゲーションをマークアップし、それを nav 要素で囲むことで 上記のリンクの集まりが主要なナビゲーションであることを表すことができます。 nav 要素はセクショニング・コンテンツに属していますので新たなセクションを作りますが、デフォルトで Navigation 等(UA によって異なる)の見出しを持っているので得に見出しをつける必要は無いようです。＊UA（User Agent）ここでは、ブラウザなどユーザーの為に WEB ページを表示させるプログラム
21
nav 要素のマークアップ応用 (複数のナビゲーション)
ブログサイトのようにサイドエリアに複数のナビゲーション・リンクがある場合は、それぞれの ナビゲーション・リンクをそれぞれnav 要素でマークアップしてグループ分けするより、全体を 1 つの nav 要素でマークアップして、section 要素などで仕分けするほうがページ内の整理がつきやすく、 SEO 上の対応にも良いと思われます。 下記の例では中のグループを section 要素でマークアップし階層化してみました。。 【nav 要素の中に SECTION で用途を分けた 2 種類のリンクメニューを囲んだ場合の例 】 01 <nav> 02 <section> 03 <h2>カテゴリー一覧</h2> 04 <ul>05 <li><a href="#">HTML5 基礎</a></li> 06 <li><a href="#">HTML5 新要素一覧</a></li> 07 <li><a href="#">HTML5 記述練習</a></li> 08 <li><a href="#">CSS3 の基本</a></li> 09 <li><a href="#">jQeury の基本</a></li> 10 <li><a href="#">WordPress</a></li> 11 </ul> 12 </section> 13 <section> 14 <h2>リンク一覧</h2> 15 <ul>
16 <li><a href="#">HTML5 関連</a></li> 17 <li><a href="#">CSS</a></li>
18 <li><a href="#">Javascript</a></li> 19 <li><a href="#">WordPress</a></li>
20 <li><a href="#">WordPress プラグイン</a></li> 21 <li><a href="#">CG</a></li>
22 </ul> 23 </section> 24 </nav>
22
article 要素
独立したコンテンツ（読み物・記事など）として成り立つ自己完結したものを表現する枠。article 要素を使ってみる
サイトのニュースや情報とは具体的になんでしょう。例えば、 商店なら”新作が入荷しました!”、イベント関係なら”サイン会・ コンサート・ダンスイベント” 等の開催情報になるかと思います。 では、架空のカフェの広告記事データーを使って、サンプルを 記述してみます。article 要素の中に article 要素が入る場合(入れ子にする)
01<article> 02 <h1>Café Torino</h1> 03 <p>当店オリジナルブレンドコーヒーに、 04 ブルーマウンテンとコナエメラルド<br /> 05 が期間限定でラインアップします。</p> 06 07 <section> 08 <h2>３つの高級豆を使ったニューブレンド、５月３１日まで</h2> 09 <dl> 10 <dt>マウンテンブレンド：ブルーマウンテンブレンド</dt> 11 <dd>Special Price: ３６０円</dd> 12 <dt>オーシャンブレンド：コナブレンド</dt> 13 <dd>Special Price: ３６０円</dd> 14 <dt>スペシャル：コナコーヒー・エメラルド</dt> 15 <dd>Special Price: ４８０円</dd> 16 </dl> 17 </section> 18</article>架空店舗の新サービス（Cafe Torino）を article 要素で 記述してみました。この部分はタイトルと内容があり一つの
記事として成り立っているのでRSS 配信しても
23
article 要素の中に article 要素を入れた場合は、外側の article 要素に直接関連した記事でないといけません。 例えば、ブログのコメントなどがこれにあたると考えられているようです。 01 <article> 02 <section> 03 <header> 04 <h1>『article 要素』 / HTML5 新要素一覧 </h1> 05 </header> 06 <p>ここでは新要素を組み合わせて、article を入れ子にします。 </p> 07 <section> 08 <h2>article 要素とは</h2> 09 <p>独立したコンテンツです。・・・・・・・・・。</p> 10 </section>
11 <footer>HTML5 Study Memo</footer> 12 </section> 13 <section> 14 <h2>コメント</h2> 15 <article> 16 <header> 17 <h3>A さんのコメント</h3> 18 </header> 19 <p>一つ目の投稿：文章をここに。</p> 20 </article> 21 <article> 22 <header> 23 <h3>B さんのコメント</h3> 24 </header> 25 <p>二つ目の投稿：文章をここに。</p> 26 </article> 27 </section> 26 </article> 27 外側のarticle 要素で関連を持つ（この場合投稿記事）をまとめて、A と B さんのコメントをそれぞれ article 要素で囲っています。ブログのコメントは RSS 等フィードの対象にもなることから、 article 要素の中に article 要素を使用することが可能となります。 この要素は、コーディングする本人が、文章や、文字列をどう考えるかで変わってくると思います。 記述内容を一部の文章と考えるのか、記述部分が、単独で成り立つ情報と考えるのかということです。 それぞれの価値観なので、決してどちらが正解というわけではありません。
24
section 要素
文章や、スクリプトの構造をまとめ、ひとつのコンテンツ（文章または、アプリケーション）を構成する要素section 要素の特徴
・章や節といった単位で扱うので、セクション内容を表すh1～h6 の見出しが基本伴います。 ・コンテナ要素ではありませんので、レイアウト目的に使用することは進められていません。 ・スタイリング・レイアウトに使う要素が必要になった場合はdiv 要素が推奨されています。section 要素内の見出しについて
【間違ったマークアップの例
】
【間違ったマークアップ例 】では、 最初のセクションに h1 の見出しがありますが、その後のセクションには見出し要素がなく、 p 要素や span 要素のみでマークアップされてしまっています。 01 <section> 02 <h1>HTML5 でサイトをつくろう</h1> 03 <p>このサイトの目的は・・・</p> 04 <section> 05 <p>HTML5 の新要素について</p> 06 <p>新たに追加された要素には・・・</p> 07 <section> 08 <p>section 要素とは<br /> 09 <span>一般的なセクションを表します。</span></p> 10 </section> 11 </section> 12 </section>25
【正しいマークアップの例
】
01 <section> 02 <h1>HTML5 でサイトをつくろう</h1> 03 <p>このサイトの目的は・・・</p> 04 <section> 05 <h2>HTML5 の新要素について</h2> 06 <p>新たに追加された要素には・・・</p> 07 <section> 08 <h3>section 要素とは</h3> 09 <p>一般的なセクションを表します。</p> 10 </section> 11 </section> 12 </section> 上記ソース 2 つの違いは、各セクションごとに h1～h6 の見出し要素があるかどうかです。 【正しいマークアップ例 】の方は、 各セクション毎に見出し要素があることで、記事の内容に、きちんと章や節を表せています。section 要素と div 要素の用途別理解
HTML5 では、Section 要素を DIV の代わりに使ってレイアウトをするという理解をしている人もいますが、 実際には、中に書かれている内容によって、実際は決めるものであり、レイアウトで利用はしません。 例えば、２カラムのレイアウトがあって、横に並べるような場合、下記のように記述するのは間違いです。26
コンテンツの内容によってはありえるかもしれませんが、横並びにして、見せる意識がレイアウトと
考えるほうが自然なので、この場合は、2 カラムレイアウトに div 要素に float：left をそれぞれかけて、
この後にsection 要素・article 要素などコンテンツに合った要素を使用してレイアウトするのが SEO の
対応上も正しい記述といえるでしょう。
下記の例が上記の内容を書き換えたものになります。
状況に合わせて、これをWrapper や、Container などで纏めると良いでしょう。
HTML5 では、レイアウトの新要素に section や、article 等の要素を使う訳ではなく、従来通りの DIV レイアウトに、コンテンツを記述する際にその内容に合わせたセクショニングタグの利用が
必要になると考えるべきで、ここまで学習した ・article ・section ・aside ・nav 等、大きく分けて ４要素がそれに値し、その中で、・header ・footer 等の指定をしていく考えがわかりやすいでしょう。
aside 要素
メインコンテンツとは関連性が薄く、補足的なコンテンツや広告などの表示に使います。aside 要素の特徴
aside 要素は、メインコンテンツとは関連性の低い『補足記事・サイドバー・広告・ブログロール』 などに使用しますが、メインコンテンツの中で使う場合と、外で使う場合で意味が変わってくるので 注意する必要があります。 例えば、メインコンテンツの中で使う場合はメインコンテンツに何かしら関連がなくてはなりません。 逆にメインコンテンツの外で使う場合はサイトや、ページ全体に関連性があることを示します。 また、aside 要素はセクショニング・コンテンツの１つになります。 nav 要素のグループ化や、 広告要素の表示エリアだったりします。 しかし、他のセクショニングコンテンツと違い、見出しが<div>
<section>
div に float:left; を CSS で設定し、section の中に内容を書き込む。</section>
</div>
<div>
<section>
div に float:left; を CSS で 設定し、section の中に内容を 書き込む。</section>
</div>
27 無い場合でもデフォルトで Sidebar 等の見出しを持っているので無理に見出しをつける必要は 無いようです(UA によって異なる)。
aside 要素をメインコンテンツの中で使用
01 <article> 02 <h1>HTML5 の学習</h1> 03 <section> 04 <h2>新しい要素 『aside』</h2> 05 <p>aside 要素は HTML5 の新要素の一つで、本文の 06 補足情報などメインコンテンツの中では書き込みます。</p> 07 <aside> 08 <h3>HTML5 新要素一覧</h3> 09 <p>『article』『section』・・・・・</p> 10 </aside> 11 </section> 12 </article> 上記は、ブログ記事の補足情報をaside 要素でマークアップした例です。 上記補足情報をaside 要素でマークアップしても問題ないかを確認していきます。 まず、記事内で出てきた｢HTML5 新要素｣という単語の補足説明を行っているので 記事との関連性があることがわかります。次にaside 要素内の文章を切り離した場合、 記事内容はaside 要素についての説明なので HTML5 新要素一覧の 補足情報が無くても成り立ちます。 記事に関連性が有る文章でその補足部分だけ切り離した場合でもその 記事が成り立っていることから、補足記事をaside 要素でマークアップしても問題ないと判断できます。aside 要素をメインコンテンツの外で使用
サイドバーエリアにあるバナー広告をaside 要素でマークアップした例を考えてみます。 1 <aside> 2 <ul>3 <li><img src="./banner01.gif" alt="HTML5 関連の広告 01 です。" /></li> 4 <li><img src="./banner02.gif" alt="HTML5 関連の広告 02 です。" /></li> 5 <li><img src="./banner03.gif" alt="HTML5 関連の広告 03 です。" /></li> 6 </ul>
28 上の画像はサイトの大まかなレイアウトを表し、『広告エリア』のソースをその下に記述しました。 広告エリア内のバナー画像をaside 要素でマークアップした例です。 広告などの情報が、メインコンテンツ外側でaside 要素を使用しマークアップできるかを確認したいと思いま す。 通常、バナー広告はメインコンテンツに直接的に関わらないので、メインコンテンツ内に aside 要素を使用し てのマークアップには適していません。そこで今回のサンプルでは、コンテンツエリアの外側、上の画像のよ うにサイドバーエリアに出してマークアップしています。 バナー広告はページから切り離してもページに問題が起こるとは考えにくいのでメインコンテンツから切り離 すことができる要素だとすぐにわかります。また、広告は間接的にサイトやページに関連していることから、 上記のバナー広告はメインコンテンツの外側で aside 要素でマークアップしても問題ないことが分かります。
29
Form の新しい属性
search
<input type="search" name=”search”/>
type 属性の値に「search」を指定すると、検索ボックスになります。 検索ボックスの機能は type="text"のテキストボックスと変わりませんが、
Mac 版 Chrome や Safari など一部のブラウザーでは角丸の入力フォームに変化します。 iPhone では、ソフトウェアキーボードの右下のボタンが「検索」に変化します。
tel
<input type="tel" name="tel" />
type 属性の値に「tel」を指定すると、電話番号の入力欄になります。
見た目は通常のテキストボックスと変わらず、入力内容が電話番号のみに制限されてもいません。 正規の電話番号表現はハイフンを入れたりカッコが入ったりして決めかねている結果です。
iPhone ではソフトウェアキーボードがテンキーに変わるので、番号を入力しやすくなります。
url
<input type="url" name="url" />
「url」を指定すると、URL の入力欄になります。
IE/Safari 等以外のブラウザでは、url 以外の内容を入力して 送信しようとするとエラーが表示されます。
30
<input type="email" name="email" />
「email」を指定すると、メールアドレスの入力欄になります。 IE/Safari 等以外のブラウザではメールアドレス以外の内容を 入力して送信しようとするとエラーが表示されます。
iPhone ではソフトウェアキーボードに「@」マークが表示されるので便利です。
multiple 属性を記述すると、複数のメールアドレスをカンマ区切りで入 力できるようになります。 <input type="email" name="email" multiple="multiple" />
datetime
<input type="datetime" name="datetime" />
「datetime」を指定すると、グローバル日時（UTC：協定世界時で記述した日時）の入力欄になりま す。 対応しているブラウザーでは年月日と時分を入力するコントロールが表示されます。たとえば Opera では、年月日を入力するカレンダーと、日時を入力するステップアップ・ダウンボタン付き入力ボッ クスが表示されます。 min 属性と max 属性を使うと、ユーザーが選択可能な期間を指定できます。 たとえば、ショッピングサイトの配達指定で、「3 日後以降 1 か月以内」といった制限を付けたい場 合に利用できます。
<input type="datetime" name="datetime" min="2012-7-20T00:00Z" max="2012-05-24T00:00Z" />
31
step 属性
に数値を指定すると、時分の入力の刻みを指定できます。単位は秒で、「60」で 1 分刻みになるので、5 分刻みにしたいときは 「300」と指定します。
<input type="datetime" name="datetime" min="2012-04-25T00:00Z"
max="2012-05-24T00:00Z" step="300" /> 現状は未対応のブラウザが多くテキストエリアと機能も余り変わらないので、 早期対応が熱望されているタグの一つです。
POINT
datetime はタイムゾーンが UTC で設定されているため、送信の時間は日本時間から 9 時間前になり ます。日本時間を扱うときには、この後の datetime-local が適しています。date
<input type="date" name="date" />
「date」を指定すると、年月日の入力欄になります。
対応しているブラウザーでは年月日を入力するコントロールが表示されます。Opera では、datetime と同じ形のカレンダー型コントロールが利用できます。
<input type="date" name="date" min="2012-04-25" max="2012-05-24" step="7" /> min 属性と max 属性で期間を指定できる点や、step 属性で刻みを指定できる点も datetime と同様 です。step 属性の値の単位は日で、「1」を指定すると 1 日刻みになります。
month
<input type="month" name="month" />
「month」を指定すると、年月の入力欄になり、対応しているブラウザーでは年月を入力するコント ロールが表示されます。
Opera では datetime と同様のカレンダー型のコントロールが利用できます。
min 属性や max 属性、step 属性を指定できます。min 属性と、値が 12 の step 属性を同時に指定す ると、min 属性で指定した月のみを選択できるようになります。たとえば、min="2012-04" step="12"とすると、2012 年 4 月、2013 年 4 月、2014 年 4 月……といった具合に、毎年 4 月の みが選択できるようになります。
32
week
<input type="week" name="week" />
「week」を指定すると、週の入力欄になります。対応しているブラウザーでは週を入力するコント ロールが表示されます。Opera では、datetime などと同様のカレンダー型のコントロールが利用で きます。
week の値は西暦と週の組み合わせで構成されます。たとえば、「2012-W04」は 2012 年の 4 週 目、「2099-W34」は 2099 年の 34 週目という意味です。min 属性や max 属性、step 属性も指定 できます。
<input type="week" min="2012-W04" max="2099-W34" step="1" />
time
<input type="time" name="time" />
「time」を指定すると、時分秒の入力欄になります。対応しているブラウザーでは時分秒を入力する コントロールが表示されます。Opera では、datetime と同様のステップアップ・ダウンボタン付き 入力ボックスが利用できます。
以下のように min 属性と max 属性も指定できます。
<input type="time" name="time" min="00:00" max="15:00" />
デフォルトでは時間と分のみの入力できますが、step 属性の値を「1」などにすることで、秒も入力 できるようになります。step 属性の単位が秒であり、初期値が「60」なので、59 以下の値にすれば 秒刻みで入力できることになります。
<input type="time" name="time" min="00:00" max="15:00" step="1" />
さらに、step 属性を「0.1」などにすると、Opera ではミリ秒も入力できるボックスになります。 <input type="time" name="time" min="00:00" max="15:00" step="0.01" />
datetime-local
<input type="datetime-local" name="datetime-local" /> 「datetime-local」は、タイムゾーンを持たない datetime です。 min 属性／max 属性／step 属性の扱いも、datetime と同様です。 <input type="datetime-local" name="datetime-local"
33
number
<input type="number" name="num" />
「number」を指定すると、数値の入力欄となります。対応しているブラウザーでは
ステップアップ・ダウンボタン付き入力ボックスのコントロールが表示され、クリックする ことで数値を上下に変更できます。
min 属性／max 属性／step 属性を使用すると、それぞれ最小値・最大値・数値の刻みを指定できま す。
<input type="number" name="num" min="5" max="100" step="5" />
min 属性／max 属性／step 属性それぞれの値を小数点以下にすることで、 小数点以下の値も扱えるようになります。
<input type="number" name="num" step="0.1" />
<input type="number" name="num" max="0.09" step="0.01" /> <input type="number" name="num" min="0.05" step="0.05" />
step で小数点以下の値を指定していない場合、手動で小数点以下の値を入力するとエラーになります。
range
<input type="range" name="range" />
「range」を指定すると、数値の入力欄になります。入力できる値が数値なのは number と同様で すが、range の場合は、 数値の正確性は重要ではない 指定できる数値は上限と下限の範囲が必須 値の未指定（空）はできない という点が違います。 対応しているブラウザーでは、number よりも シンプルなコントロールで表示されます。 Opera や Chrome では、スライダーで表示されます。 数値の範囲は min 属性と max 属性で指定しますが、値を省略した場合は 初期値である「0」と「100」が設定されます。
34
入力値の初期値は value 属性で指定しますが、value 属性もしくはその値を省略した場合は初期値 である「min 属性値＋(max 属性値－min 属性値)÷2」が設定されます。たとえば、min 属性値が 0 で max 属性値が 100 の場合、「0＋(100-0)÷2」で、50 となります。
ユーザーがスライダーを操作せずに送信した場合、値は空ではなく、value 属性に指定した初期値が 送信されます。
step 属性を使うと、数値の刻みを指定できます。省略した場合は、初期値である 1 が設定されます。 <input type="range" name="range" value="20" min="0" max="100" step="5" />
通常は整数のみ指定できますが、min 属性／max 属性／step 属性の値を小数点以下にすることで、 小数点以下の値も扱えるようになります。
<input type="range" name="range" step="0.1" />
<input type="range" name="range" max="0.09" step="0.01" /> <input type="range" name="range" min="0.05" step="0.05" />
また、初期値が必ず設定されるので、入力を必須とする required 属性は指定できません。
color
<input type="color" name="color" />
「color」を指定すると、色指定の欄になります。
対応しているブラウザーでは色を入力するコントロールが表示されます。
color は range と同じく、値を空にできません。ユーザーが何も選択せずに送信ボタンを 押した場合、初期値である#000000 が送信されます。そのため、入力を必須とする required 属性も指定できません。
35
autocomplete
<form action="#" method="post" autocomplete="off"> <input type="text" autocomplete="on" />
<input type="text" autocomplete="off" />
autocomplete 属性は、その名の通りオートコンプリート機能の有効／無効を 指定するものです。値は on か off で指定します。
autocomplete 属性は、input 要素に記述するとフォームパーツごとにオート コンプリートの有効／無効を指定できます。form 要素に記述するとその中身の フォームパーツをまとめて指定できます。
input 要素の autocomplete 属性を省略すると、親要素である form 要素の autocomplete 属性が適 用されます。form 要素の autocomplete 属性も省略されている場合は、初期値である on が適用さ れます。そのため、セキュリティ上の理由などでオートコンプリートを機能させたくない場合は、明 示的に off を指定する必要があります。
dirname
<dt>dirname 属性</dt>
<input type="text" name="text" dirname="example.dir" />
dirname 属性は、フォームパーツに入力された文字列の書式方向（左から右に書く文字列か、右か ら左に書くテキスト化）を指定します。対応しているブラウザーでは、サーバーに送信する値に書式 方向を示すクエリを追加します。たとえば、サーバーに送られる値が、 text=Hello だった場合、dirname 属性の値に「example.dir」を指定すると、サーバーに送られる値は text=Hello&example.dir=ltr となります。 最後の「ltr」（Left to Roght)という部分が書式方向を示すクエリで、英語や横書きの日本語のよ うな「左から右」を表しています。アラビア語や縦書きの日本語のような「右から左」に記述する書 式の場合は、「rtl」となります。
36
list
<input type="search" name="q" placeholder="検索ワード" list="search_word_suggest" /> list 属性は、フォームパーツをサジェスト候補と紐付けるために使用します。サジェストを定義す る datalist 要素と組み合わせて使うので、詳しくは後述の datalist 要素の項目を参照してください。 コントロールはオートコンプリートと似ていますが、list 属性は Web ページの制作者側があらかじ め候補を定義しておくものです。
required
<input type="text" required="required" />
required 属性を指定すると、その要素は入力が必須になります。空欄のまま送信すると、対応して いるブラウザーではエラーが表示されます。required 属性は論理属性なので、値は省略するか、属性 名と同じ名前を記述します。
pattern
<input type="text" pattern="(070|080|090)-[0-9]{4}-[0-9]{4}" title="ハイフンも含めて携 帯電話番号を入力してください" /> pattern 属性には、フォームパーツの値をチェックするための正規表現を指定します。 正規表現とは、文字列のパターン（形式）を表現するための記述方法です。たとえば、次のような パターンがあるとします。 最初に 0 から 9 までの数字 次に a から z までのアルファベット さらに 0 から 9 までの数字 最後に A から Z までのアルファベット この場合、以下のような文字列がこのパターンにマッチします。 0a9Z 3c8F 9g3U このパターンを正規表現で表すと、次のようになります。 [0-9][a-z][0-9][A-Z] もう少し具体的な例として、携帯電話の番号をパターン化してみます。
37 最初に 070 か 080 か 090 次にハイフンを 1 つ 続いて 4 桁の任意の数字 さらにハイフンを 1 つ 最後に 4 桁の任意の数字 となります。 このパターンを正規表現で表すと、次のようになります。 (070|080|090)-[0-9]{4}-[0-9]{4} このような、文字列のパターン（形式）を記述できるのが、正規表現です。 ポイント 正規表現の文法は、プログラミング言語によって細かな違いがあります。HTML5 で使われる正規表 現は、JavaScript と同じものです。 上記は単純な正規表現の説明ですが、実際には様々なバリエーションが使えます。 JavaScript の正規表現を探してみるといいでしょう。 参考サイト：http://html5pattern.com/。 HTML5 の pattern 属性では、属性値を正規表現で記述することで、そのフォームパーツに 入力された値をチェックできます。マッチしなければエラーが表示され、対応している ブラウザでは title 属性の値がヒントとして表示されます。 ただし、title 属性の値には、エラー用の説明を入れるのではなく、あくまでそのフォーム パーツを説明する内容を記述しましょう。title 属性の値は、マウスオーバー時にツール チップとして表示されることもあり、エラー専用の属性ではありません。
max,min
<input type="datetime" name="datetime" min="2012-04-25T00:00Z"
max="2012-05-24T00:00Z" />
<input type="number" name="num" min="5" max="100" />
max 属性と min 属性は、フォームパーツに入力可能な最大値と最小値を指定します。値は、フォ ームパーツのタイプに合わせた形式で記述します。
38
step
<input type="number" name="num" value="" step="5" /> <input type="time" name="time" value="" step="60" />
step 属性は、指定された値を「ステップ」（単位・刻み）として、フォームパーツへの入力を許可し ます。たとえば、タイプが number の input 要素に対して step 属性の値を 5 とすると、入力可能な 値は 0,5,10,15,20...のように、0 からスタートして 5 刻みとなります。
step 属性は min 属性を組み合わせることで、入力可能な最小値である「ステップベース」を指定 できます。
<input type="number" name="num" value="" min="5" step="5" />
min 属性の値を 5 にすると、ステップベースは 5 になります。そのため、入力可能な値は 5,10,15,20... となり、0 は含まなくなります。min 属性を指定しない場合は、ステップベースにはそれぞれの初期 値が適用されます。 ステップに入力可能な数を越えた値を送信しようとすると、対応しているブラウザーではエラーが 表示されます。
placeholder
<input type="search" name="q" placeholder="検索ワード" />
placeholder 属性は、ユーザーの助けになるような短いヒントを指定します。短いヒントとは、単 語・フレーズのサンプルや、予想される形式の簡単な説明のことです。仕様書には、長いヒントを指 定したい場合には title 属性が適切であると書かれています。 これまでは JavaScript を使って実装するケースが見られましたが、placeholder 属性に対応してい るブラウザーでは、placeholder 属性の値がフォームパーツのデフォルトテキストとして表示され、 テキスト入力を開始するとデフォルトテキストは消えます。
autofocus
<input type="search" name="q" autofocus="autofocus" />
autofocus 属性をフォームパーツに指定すると、ページが表示された瞬間にその要素にフォーカス します。autofocus 属性は同一ページ内のフォームパーツに 1 つだけ指定できます。
39 ポイント オートフォーカスの仕組みは、現在でも検索サイトなどで見かけますが、必ずしも便利とは言えない 面があります。たとえば、普段、スペースキーでページスクロール操作をしているユーザーの場合な ど、ユーザーが期待した結果にならないことがあります。
form
<form action="./" method="post" id="sampleForm"> ... 省略...
</form>
<input type="submit" form="sampleForm" />
フォームパーツに form 属性を指定し、その値を form 要素の id 属性値と同じにすると、両者を関 連付けることができます。これにより、対応しているブラウザーでは、form 要素の外にフォームパ ーツを記述しても、正常に動作させることができます。
40
Lesson6: 新しい要素を使ってみる（機能・動的要素編）
メディア関連の要素
HTML5 のメディア 新要素とは、一般的に、video 要素と、audio 要素を指します。
video 要素
video 要素は Flash などのプラグインや、Youtube などの iflame を使用することなく動画を
ウェブ・ページに表示することができます。 しかし、未だIE8 までは、対応しておらず、 JS など補助的なデーターが必要になることから動画コンテンツはまだ Flash や、動画サイトの iflame を使ったものが多いようです。
Video の再生
video 要素をただ再生するには src 属性に再生する動画ファイルを指定するだけです。 試しにsrc 属性に MP4 形式のファイルを指定しブラウザでの表示確認をしてみましょう。1 <video src=”images/sample.mp4” controls></video>
また、controls 属性を指定することで再生・停止ボタンなどのインターフェースを 表示することができます。
41
video 要素の主な属性
属性 説明 src 再生したい動画ファイルへのパスを指定します。 poster 動画が再生可能になる前に、動画のサムネイルのように表示しておく画像ファイルを用意し ておいて、その画像をタグの中で指定します。 preload 動画ファイルの読み込みを値によって制御します。 『’none’』の時は動画の再生時まで読込まない。 『’metadata’』の時は動画ファイルのメタ情報のみ先に読込む。 『’auto’』・・・動画ファイルを先に読み読込んで、自動再生。 ※これらの指定は今のところ完全に制御されるものではなく、ＵＡによって違いがあるよう です。またautoplay 属性が指定されているときは無視されます。 autoplay 動画ファイルが再生可能になった場合に、自動で再生を行うかを指示する論理属性。 loop 再生が終了後に、再び最初から再生するかを指示する論理属性。 controls 再生や停止ボタンなどのユーザーインターフェースの表示を指示する論理属性。 source Video 要素の中に、複数のデーターを記述し、出力可能なデータータイプを提示する属性。 width 値をセットすることで動画の横幅を指定できます。 height 値をセットすることで動画の縦幅を指定できます。コーデックの問題対応
ＵＡの種類によっては、表示されるビデオデーターに制限があったりします。 その際には、属性のposter などを使った一時的に画像を表示させておく処置をすることは できますが、根本的な解決ではなく、ＶＩＤＥＯとしての機能は使えないこともあります。 その際、まずは、複数のvideo ソースと、エラーメッセージを読み込ませることも可能です。 ※ コーデックとは、PC の様々なデーターの形式（符号化）の違いによる 表示処理と、対応ソフトなどの問題で、ここでは、VIDEO 形式と、AUDIO の データー圧縮形式の違いのことを言う。 WebM ファイル - Vp8 動画コーデックと Vorbis 音声コーデック .MP4、3ogv、MOV ファイル - H.264、MP4 動画コーデック、AAC 音声コーデックを通常サポート
.AVI - 多くのカメラでこの形式を出力、通常は MJPEG 動画コーデックと PCM 音声コーデック
