大阪裕香 インターネットアカデミー
HTML5&OSS-DB Festival ~2014 Spring~
日時 2014年04月11日（金）
主催 LPI-Japan
1.W3C標準の正しいマークアップを知ろう
HTML5認定試験は広義のHTML5が範囲となる
シンプルになった文字コード宣言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet"href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- THe rest is content -->
</body>
</html>
追加された要素
<header>, <footer>, <nav>, <article>, <section>, <aside>,
<time>, <figure>, <figcaption>, <command>, <datalist>,
<mark>, <meter>, <output>, progress>,
<ruby>, <rt>, <rp>, <time>, <wbr>, <canvas>,
<audio>, <video>, <source>, <details>, <keygen>
<header>や<section>などでよりセマンティックなマークアップが可能になった。
いくつかの疑問
<article>内に<section>を入れることができるか？→YES
<section>内に<article>を入れることができるか？→YES
<article>内に<nav>を入れることができるか？→YES
<figure>内に必ず<figcaption>を入れるべきか？→NO
input要素のtype属性に追加された値
<input type="**">
- search値：検索キーワード入力用
- tel値：電話番号入力用
- url：URL入力用
- email値：メールアドレス入力用
- datetime値：日付と時間をセットするためのコントロール
- date値：日付をセットするためのコントロール
- month値：年月をセットするためのコントロール
- week値：週をセットするためのコントロール
- time値：時間をセットするためのコントロール
- number値：数値をセットするためのコントロール
- range値：数値をセットするためのコントロール（選択できる数値の範囲を設ける）
- color値：色をセットするためのコントロール
廃止された要素
<basefont>, <big>, <center>, <font>, <s>, <strike>, <tr>,
<frame>, <frameset>, <noframes>, <acronym>, <applet>,
<isindex>, <dir>
この章のまとめ
- 「広義のHTML5」を理解しよう
- 新しく追加された要素、廃止された要素を覚えよう
- セマンティックなマークアップを理解しよう
- インプット要素の新しい属性値とその特徴を理解しよう
2.HTML5関連技術①〜レスポンシブWebデザインとCSS3
レスポンシブWebデザイン
様々なデバイスからのブラウズに対応する動的なデザイン
長所
- ワンソースで全てのデバイスに対応できる
- 更新やサイトの運営が楽になる
- Googleが推奨している
短所
- 専門サイトを作る場合に比べると各デバイスの最適化が難しい
- 設計を失敗するとモバイル環境で重くなる
レスポンシブWebデザインとCSS3
Media Queries(メディアクエリ)
画面サイズなど、デバイスの持つ特徴を利用して、スタイルシートを適用させるための仕組み
その他 画像の代替機能
Webフォント、ドロップシャドウなど、画像でしか表現できなかったデザインの設定が可能に
Media Queries(メディアクエリ)
<link rel="stylesheet"
media="only screen and (min-width:768px)" href="table.css" >
媒体特性は様々な種類があるので、細かく把握しよう
例：width, height, device=wdth, device-height, orientationなど
CSS３で追加されたセレクタ
属性セレクタ
属性値によって場合分けができるセレクタの追加
例：img[src$="gif"]{width:300px;}
擬似クラス
大幅に追加
例：td:nth-child(odd) {font-weight:bold;}
追加されたセレクタは、用途を含めて全て覚えよう
追加されたプロパティ
- text-shadow : 文字に対するドロップシャドウ
- box-shadow : ボックスに対するドロップシャドウ
- linear-gradient : 背景色のグラデーション（線形）
- border-radius : 角丸
- transform : 回転
- transration : 変化
新しいプロパティは、値の設定方法も細かく覚えよう
その他レスポンシブ関連技術
- viewportの設定
例：width, height, initial-scale, minimum-scale...
- Webフォント
- フルードグリッドなど。
この章のまとめ
- CSS3からの新しいプロパティやセレクタを覚えよう
- レスポンシブWebデザイン関連技術を覚えよう
3.HTML5関連技術②〜JavaScript API
オフラインWebアプリケーション
Application Cache(アプリケーションキャッシュ)
HTMLやCSS，JavaScriptをローカル環境に保存しておき、
オフラインの状態でもアプリケーションを実行できる仕組み。
Web Storage
ブラウザ内臓で用意された簡易的なデータストア
セッションストレージ
ブラウザが開いている間、そのタブのみ有効
ローカルストレージ
オリジン単位で永続的にデータを維持。
別々のウインドウ/タブ間でもデータを共有できる。
データサイズの上限などの特徴と、メソッド・プロパティなどの文法を覚えよう
この章のまとめ
- JavaScript(HTML5関連)を理解しよう
- 特に、オフラインWebアプリケーションは要チェック
最後に
本日の内容以外にも出題範囲はある。
詳しい試験概要は、LPI-Japan公式サイトをチェック
http://html5exam.jp/outline/