HTML5レベル1ポイント解説セミナー【セミナーメモ】

大阪裕香 インターネットアカデミー

HTML5&OSS-DB Festival ~2014 Spring~

日時 2014年04月11日（金）
主催 LPI-Japan


### 1.W3C標準の正しいマークアップを知ろう

HTML5認定試験は広義のHTML5が範囲となる

#### シンプルになった文字コード宣言

````html
<!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>
````

#### 追加された要素

````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値：色をセットするためのコントロール

廃止された要素

````html
<basefont>, <big>, <center>, <font>, 
, <strike>, <tr>,
<frame>, <frameset>, <noframes>, <acronym>, <applet>,
<isindex>, <dir>
````

#### この章のまとめ

- 「広義のHTML5」を理解しよう
- 新しく追加された要素、廃止された要素を覚えよう
- セマンティックなマークアップを理解しよう
- インプット要素の新しい属性値とその特徴を理解しよう

### 2.HTML5関連技術①〜レスポンシブWebデザインとCSS3

#### レスポンシブWebデザイン
様々なデバイスからのブラウズに対応する動的なデザイン
**長所**


- ワンソースで全てのデバイスに対応できる
- 更新やサイトの運営が楽になる
- Googleが推奨している

**短所**

- 専門サイトを作る場合に比べると各デバイスの最適化が難しい
- 設計を失敗するとモバイル環境で重くなる

#### レスポンシブWebデザインとCSS3

**Media Queries(メディアクエリ)**
画面サイズなど、デバイスの持つ特徴を利用して、スタイルシートを適用させるための仕組み

**その他　画像の代替機能**
Webフォント、ドロップシャドウなど、画像でしか表現できなかったデザインの設定が可能に

#### Media Queries(メディアクエリ)

````html
<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/](http://html5exam.jp/outline/)