そろそろhtml5

新要素や変更された仕様も覚えていかないとなあ
ということでまたまた備忘録

★HTML5でのDOCTYPE宣言
<!DOCTYPE html>
だいぶ省略されて大助かり

★ヘッダーやメタデータ
<html lang="ja">
<head>
<meta charset="UTF-8">
のようにメタデータは
base command link meta noscript script style title
で定義する。
属性事態は以前からのものが多いが、書式的に結構省略できるようになったものもある。
<title>ページタイトル</title>
のように大半は以前と変わりなし

★IE8までへの対応
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

★ページデザインに関係する要素や属性
アウトラインについては article aside nav section 等で見出しから内容までの範囲を定義できますが、
あまり興味無いので触れません。
これらの親属性内に scoped 属性とかで部分的な要素を与えたりもできますが、
まだブラウザ側での対応状況的に使わない方が吉。
<section> → 一つのセクションであることを示す
<nav> → ナビゲーションであることを示す
<article> → 記事であることを示す
<aside> → 余談・補足情報のセクションであることを示す
<header> → ヘッダであることを示す
<footer> → フッタであることを示す

フレージングコンテンツに関しては
フレージングコンテンツにならない書き方
<a href="#"><h1>非フレージング・コンテンツ</h1></a>
フレージングコンテンツになる書き方
<h1><a href="#">フレージング・コンテンツ</a></h1>

※自分自身にデザインセンスがなくて必要な機能性を持ったページがちゃんと表示できればいい人であり
デザイン的なことにはあまり興味ないのでここらは一応書いただけですｗ

★コンテンツの分類
<figure> → 図表であることを示す
<figcaption> → 図表のキャプションを示す

★テキストの分類
<time> → 日付や時刻を正確に示す
<mark> → 文書内の該当テキストを目立たせる
<ruby> → ルビをふる
<rt> → ルビのテキストを指定する
<rp> → ルビを囲む記号を指定する
<wbr> → 改行しても良い位置を示す

★エンベディット
html5では今までプラグイン（Flash等）で表示していたような外部コンテンツも標準で表示できます。
<embed> → プラグインデータを埋め込む
●video → 動画を再生する
<video src="sample.mp4" poster="sample.jpg" autoplay controls preload="none">
<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>

属性 説明
src 再生したい映像ファイルへのパスを指定します。
preload 映像ファイルの読み込みを制御します。(autoplay使用時は無効)
none → 再生時まで読込まない。
metadata → メタ情報のみ先に読込む。
auto → 先に読み読込む。
autoplay 再生可能になった場合に、自動で再生を行うかを指示する論理属性。
poster 再生前に表示させる画像ファイルの指定。
controls 再生や停止ボタンなどのユーザーインターフェースの表示を指示する論理属性。

●audio→ 音声を再生する
<audio src="audio/sample.mp3" controls autoplay loop>
><p>音声を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</audio>

iPhone等で埋め込みプレイヤーを使わずに鳴らす場合は
scriptタグ内で
var audio = new Audio("sample.mp3");
function playAudio() {
audio.load();
audio.play();
}
function pauseAudio() {
if (audio) {
audio.pause();
}
}

属性 説明
src 再生したいオーディオファイルへのパスを指定します。
preload オーディオファイルの読み込みを制御します。(autoplay使用時は無効)
none → 再生時まで読込まない。
metadata → メタ情報のみ先に読込む。
auto → 先に読み読込む。
autoplay 再生可能になった場合に、自動で再生を行うかを指示する論理属性。
loop 再生が終了後に、再び最初から再生するかを指示する論理属性。
controls 再生や停止ボタンなどのユーザーインターフェースの表示を指示する論理属性。

●source → 動画や音声などのURLや種類を指定する

属性 説明
src オーディオファイルへのパスを指定します。
type オーディオファイルのMIMEタイプを指定します。
media オーディオのメディアタイプを指定します。

<canvas> → 図形を描く
特に audio video canvas 等の実装はすごく嬉しいです。

★フォーム
html5でかなり追加されました。
<input type="search"> → 検索テキストの入力欄を作成する
<input type="tel"> → 電話番号の入力欄を作成する
<input type="url"> → URLの入力欄を作成する
<input type="email"> → メールアドレスの入力欄を作成する
<input type="datetime"> → 協定世界時による日時の入力欄を作成する
<input type="date"> → 日付の入力欄を作成する
<input type="month"> → 月の入力欄を作成する
<input type="week"> → 週の入力欄を作成する
<input type="time"> → 時間の入力欄を作成する
<input type="datetime-local"> → ローカル日時の入力欄を作成する
<input type="number"> → 数値の入力欄を作成する
<input type="range"> → レンジ入力欄を作成する
<input type="color"> → 色の入力欄を作成する
<input autofocus> → 入力欄にカーソルを当てて自動フォーカスする
<input placeholder> → 入力欄に初期表示する内容を指定する
<input required> → 入力必須であることを示す
<input pattern> → 正規表現で入力値のパターンを指定する
<input min max> → 入力できる最小値と最大値を指定する
<input step> → 入力欄で刻むステップ値を指定する
<input autocomplete> → 入力候補を提示して入力内容を自動補完する
<input multiple> → 複数の値を入力・選択できるようにする
<datalist> → 入力候補となるデータリストを定義する
<keygen> → フォーム送信時にキーを発行する
<output> → 計算結果を示す
<progress> → タスク完了までの進行状況を示す
<meter> → 規定範囲内の測定値を表す

★インタラクティブ
<details> → 備考や操作手段などの詳細情報を示す
<summary> → <details>の内容の要約を示す
<command> → 操作メニューの各コマンドを指定する
<menu> → 操作メニューを作成する

続きは順次追記します

未分類

Posted by boomboom