LPI-Japan主催

HTML5プロフェッショナル認定試験
レベル1 ポイント解説無料セミナー
2014年8月

講師: 鈴木雅貴(NTTソフトウェア株式会社)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

自己紹介• 鈴木雅貴(すずきまさたか)
ᵒ NTTソフトウェア株式会社• HTML5アカデミック認定校

ᵒ HTML5推進室• 主にCSSと開発環境まわり

ᵒ HTML5アカデミック認定校 セミナー講師
ᵒ 『HTML5プロフェッショナル認定試験 レベル1 教科書』執筆• Kindle, Kobo, Kinoppy, 紙書籍で販売中

ᵒ レベル1はβ試験にて認定取得• 個人で日本語組版周り仕様の翻訳
ᵒ http://suzukima.github.io/css-ja/• アヒル好きThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

本日お話すること• 試験についてᵒ 試験概要ᵒ 試験範囲• 試験範囲のポイント解説

ᵒ Webの基礎知識
ᵒ 要素
ᵒ CSS3ᵒ レスポンシブWebデザイン
ᵒ オフラインWebアプリケーション• 学習の進め方
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

3Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

試験についてThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

試験概要• 公式サイトに情報があります

ᵒ http://html5exam.jp/outline/• JavaScriptは出ません

ᵒ ただ、JavaScriptが何なのかや、使い方などは範囲に含まれるので、知っておいた方がよいでしょう

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

5Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

試験範囲• 公式サイトに情報があります、が…

ᵒ http://html5exam.jp/outline/objectives.html#lv1

長っThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

6
Copyright© 2014, NTT Software Corporation. All rights reserved.

試験範囲は広い• 時間も限られていますので、本日は広い試験範囲を学習する上でのとっかかりとなる情報とポイントを持って帰ってもらうことを目的とします• (X)HTML4.01/CSS2.1までも試験範囲には含まれますが、ここでの解説は一部を除き省略させていた
だきます

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

7

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

7
Copyright© 2014, NTT Software Corporation. All rights reserved.

1. Webの基礎知識
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

Webの基礎知識について• 出題構成: 30%

ᵒ http://html5exam.jp/outline/objectives.html#lv1_
11• 一見HTML5と関係が薄いように思えますが、
HTML5によって、デザイナ/コーダ・Webプログラ
マ・サーバ/ネットワークエンジニアは、自分の担当部分だけでなく自らの領域を越えた知識やスキルが必要とされています

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

9Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

ポイント• Webサイトがどのような仕組みでWebブラ
ウザに表示されるかを把握
ᵒ IP, DNS, TCP, HTTP

• プロキシ2種• DBとSQLThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

10

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

Webサイト
表示の仕組みThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

登場人物など• PC: 略• Webブラウザ: PCやスマホ上で動作する、Webサイト閲覧用ブラウザ(以降ブラウザ)• サーバマシン: サーバアプリケーションが動作するコンピュータ機器• Webサーバ: サーバマシン上でWebサイトを提供するサーバソフト
ウェア• ざっくり概要で説明します
ブラウザ

WebサーバPC

サーバマシン
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

12

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

まず対象のWebサーバへアクセスしたい• 対象のWebサーバをどう識別する?
ᵒ ネットワーク上には無数のサーバが存在• IPアドレスを使う

ᵒ 192.0.43.10のような数字の羅列
ᵒ IPアドレスを住所代わりにして目的のサーバにデータを送信
ᵒ この仕組み(機器同士の通信)を規定しているのがIP(Internet Protocol)
ᵒ IPは情報を目的地まで届けるためのプロトコル
123.456.789.123へ!

ブラウザ

PC
13

Webサーバ

サーバマシン
192.40.43.10
The HTML5 Logo is licensed under Creative Commons Attribution
3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
Copyright© 2014, NTT Software Corporation. All rights reserved.

君はIPアドレスを覚えているのか？
• 普段IPアドレスを入力してませんよね• DNS(Domain Name Service)を使う
ᵒ "example.com"のようなドメイン名と呼ばれる名前を付け、IPア
ドレスと紐づけて覚えやすくする(この仕組みがDNS)
ᵒ DNSサーバに聞けば紐づいたIPアドレスがわかる(名前解決)ᵒ 詳しくはJPNICの「ドメイン名のしくみ」
https://www.nic.ad.jp/ja/dom/system.html
example.comは?

DNSサーバ

ブラウザ

Webサーバ

192.0.43.10ですPC
14

サーバマシン
example.com
192.0.43.10へ!
The HTML5 Logo is licensed under Creative Commons Attribution
3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
192.0.43.10
Copyright© 2014, NTT Software Corporation. All rights reserved.

Webサーバはどれですか？
• Webサーバ以外にもサーバプログラムがᵒ サーバマシンにはSSHなどのサーバプログラムも動作しており、IP
アドレスだけではWebサーバを識別できない• ポート番号を使う
ᵒ サーバごとに既定のポート番号を指定(Webサーバは80番)
ᵒ このあたりのアプリケーション間通信の仕組みを規定しているのがTCP(Transmission Control Protocol)
ᵒ TCPはIPを利用し通信路を確立、そのうえで情報をやりとりする
ᵒ TCPにはエラーチェックや再送など、情報を確実に送る仕組みがある
ブラウザ

通信路確立
PC

15

80

Webサーバ(80)サーバマシン
example.com
192.0.43.10:80へ!
192.0.43.10
The HTML5 Logo is licensed under Creative Commons Attribution
3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
Copyright© 2014, NTT Software Corporation. All rights reserved.

ポート番号、指定してますか？
• 普段はポート番号を入力しないですよね• URLで通信プロトコル(ポート番号)を指定しているᵒ "http://example.com/"のhttp://で、HTTP(HyperText
Transfer Protocol)を使っての通信を宣言している
ᵒ HTTPは80番ポートを使用する(前述のWebサーバは80番と同意)、
80番ポートを指定したことになる• これでブラウザとWebサーバが無事つながった
http://example.com/へ!
ブラウザ

通信路確立
PC
16

80

Webサーバ(80)サーバマシン
example.com
The HTML5 Logo is licensed under Creative Commons Attribution
3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
192.0.43.10
Copyright© 2014, NTT Software Corporation. All rights reserved.

つながったのでコンテンツのデータを取得• HTTPでコンテンツを取得する
1. 確立されたTCP通信路上で、ブラウザからWebサーバへ、
x.htmlをくださいというリクエストを送信する
2. Webサーバはブラウザへレスポンスとしてx.htmlの中身を返す
3. TCPで確立した通信路を閉じる
4. ブラウザはx.htmlを表示する
http://example.com/x.html

x.htmlください
ブラウザ

見えた!

17

x.htmlですPC

Webサーバ(80)x.htmlサーバマシン
example.com
192.0.43.10
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
Copyright© 2014, NTT Software Corporation. All rights reserved.

HTTPリクエストメッセージのメソッド• HTTPメッセージはヘッダとボディに分かれる

ᵒ ヘッダはリクエストやレスポンスがどのようなものかを示す
ᵒ ボディはメッセージのデータ(ない場合もある)• リクエストで使用可能なメソッド(ヘッダに書かれる)
メソッド名

説明

GET

サーバから指定URIのリソースを取得

POST

クライアントからサーバへデータを送信
送信後サーバからデータが送られることもある

PUT

サーバの指定URIにデータを保存

HEAD

GETと同様だがヘッダのみ取得

OPTIONS

指定URIがサポートするメソッドを取得

DELETE

指定URIのリソース削除

TRACE

サーバまでのネットワーク経路チェック

CONNECT

TCPトンネル接続(プロキシ利用時のSSLトンネリングなどに使う)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

HTTPレスポンスメッセージのステータスコード• レスポンスのヘッダに、リクエストの結果がどうだったかの情報が、3ケタの数字で書かれている(ステータスコード)
ステータスコード

概要と代表例

1xx

サーバ側の情報
100: Continue

2xx

成功200: OK

3xx

転送
301: Moved Parmanently / 304: Not Modified

4xx

クライアントからのリクエストエラー
400: Bad Request / 401: Unauthorized / 403: Forbidden / 404: Not Found

5xx

サーバでのリクエスト処理エラー
500: Internal Server Error / 503: Service unavailable

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

19

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

プロキシ
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

プロキシ2種• プロキシはWebブラウザ等クライアントとWebサーバとの通信を中継• Webプロキシ(クライアント側に配置)
ᵒ クライアントのインターネット直接続防止
ᵒ キャッシュによる速度向上• リバースプロキシ(Webサーバ側に配置)
ᵒ Webサーバのインターネットからの直接続防止
ᵒ Webサーバの負荷分散処理
内部ネットワーク
クライアント(webブラウザ)

外部ネットワーク
Webプロキシ

内部ネットワーク
Webサーバリバースプロキシ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

21

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

DB
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

データベース• データベース(DB)とはᵒ 集めたデータを管理するシステム• 正確にはDBMS(DataBase Management System)のことであるが、データベースと略されることが多い

ᵒ Webアプリケーションでは、Webサーバで画面生成やビジネスロジックを実行し、実行結果などのデータはデータベースで管理というパターンが一般的
ᵒ 現在の主流はデータを表に似た形式で管理し、それらをリレーションと呼ばれる構造で連結可能にしたリレーショナルデータベース(RDB)• SQL

ᵒ リレーショナルデータベースを操作する言語の1つ
ᵒ データ定義言語(Data Definition Language: DDL)、データ操作
言語(Data Manipulation Language: DML)、データ制御言語(Data Control Language: DCL)の3つに分けられる
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

23

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

SQL• 主なDDL
命令

概要

CREATE

テーブルや制約条件を定義

DROP

テーブルなどを削除• 主なDML
命令

概要

SELECT

レコードを抽出INSERT

レコードを挿入DELETE

レコードを削除UPDATE

レコードを更新• 主なDCL
命令

概要

BEGIN

トランザクション開始を宣言

COMMIT

トランザクション終了を宣言

ROLLBACK

トランザクションの取り消し
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

24

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

2. 要素The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

要素について• 出題構成: 37%ᵒ http://html5exam.jp/outline/objectives.html#lv1_
13• HTML5はもちろんのこと、HTML4.01以前も対象となっていますThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

26

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

学習のポイント• HTML4.01を押さえたうえで、5への変更点を学ぶ• 何が変わったの？

ᵒ 定型句がシンプルになっている
ᵒ 要素に意味を持たせられるようになっている
ᵒ スタイル的な機能は排除されている
ᵒ 新しいインタフェースや機能が使えるようになっている

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

27

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

定型句がシンプルに• 文書型宣言
HTML4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

HTML5<!DOCTYPE html>• 文字エンコーディング
HTML4.01 Transitional<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5(一例)<meta charset="UTF-8">• 他にもありますが、いろいろ楽になりました
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

28

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

要素に意味を持たせられるように• セクションを明示する要素によりアウトラインを意識した作成が可能に• アウトラインとはᵒ HTML文書では目次のようなもの
ᵒ アウトラインのイメージ
1. あああ2. いいい1. いいいのあああ
2. いいいのいいい• セクションとはᵒ 文書の一区分ᵒ アウトラインでは一階層を形成

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

29

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

セクションを明示する要素• 以下の要素でセクションが明示される
要素名

説明

section

一般的なセクションを表し、見出しとセットで使用

article単体で完結できるセクション(1フィードに含める内容)

aside

あるコンテンツに関係しているが、切り離せるもの
サイドバー、広告など

nav

主要なナビゲーション

body

body

• セクション明示はないが関連する要素
要素名

説明

h1~h6

セクションの見出し

headerセクションのヘッダ

footerセクションのフッタ

address

直近祖先のセクションに関する連絡先
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

30

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

アウトライン生成の例• 以下のHTMLがあったとする<body><h1>Apples</h1><p>Apples are fruit.</p><section><h2>Taste</h2><p>They taste lovely.</p><section><h3>Sweet</h3><p>Red apples are sweeter than green ones.</p></section></section><section><h2>Color</h2><p>Apples come in various colors.</p></section></body>• アウトラインを確認してみよう

demoᵒ validator.nu http://validator.nu/

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

31

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

意味を持たせられるメリット• 構造がページの理解の助けとなるような人々に大きな利点をもたらす
ᵒ いわゆるアクセシビリティの向上• これがオープンなプラットフォームとして提供されているのが大きなポイントᵒ 誰でも使える！

• 構造はこうしなければダメ！という答えがあるわけではない
ᵒ 構造には作成者の主張が反映される
ᵒ 判断の参考になるものとして HTML5 DoctorのHTML5
Sectioning Element Flowchartがある

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

32

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

スタイル的な機能の排除• HTML５の要素からは、要素および属性によるスタイル指定機能は排除されている• スタイル指定は基本CSSでやることにᵒ 廃止された要素例: big, center, font, strike, tt• 排除された理由は以下
ᵒ アクセシビリティの低下
ᵒ メンテナンスコストの増加• <font color="">を各ページ変更するより外部CSS変更の方が楽ᵒ 文書サイズの増大• 残ったのはstyle要素および属性• スタイル的機能の要素の一部は機能を変えて再定義されているのもポイントᵒ b, i, hr, s, small, u
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

33

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

新しいインタフェースや機能• フォームのinput要素で使えるtype属性が大幅増加• HTMLだけでマルチメディアコンテンツを再生できるaudio要素/video要素• プラグインを使用せずビットマップ画像を描画できるcanvas要素
demo
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

34

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

他のポイント• HTML4.01からHTML5での変更点を押さえておくᵒ 新規追加された要素
ᵒ 変更となった要素・属性
ᵒ 削除された要素・属性• 各要素のカテゴリを把握しておくᵒ http://www.w3.org/TR/html5/dom.html#kinds-ofcontent
ᵒ http://www.w3.org/TR/html5/index.html#element-content-categories
ᵒ できればコンテンツモデルも覚えておけるとよいですが、なかなか大変です• http://www.w3.org/TR/html5/index.html#elements-1
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

35

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

3. CSS3
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

CSS3について• 出題構成: 20%ᵒ http://html5exam.jp/outline/objectives.ht
ml#lv1_12• CSS3はもちろんのこと、CSS2.1以前も対象となっていますThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

37

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

学習のポイント• CSS2.1を押さえたうえで、3への変更点を学ぶ• CSS2.1でのポイント
ᵒ カスケードᵒ ボックスモデル• CSS3で何が変わったの？

ᵒ 画像が必要だった修飾がCSSで可能に
ᵒ 便利セレクタの大幅追加
ᵒ 簡単にマルチカラムレイアウト実現
ᵒ CSSのみで変形、アニメーション実現

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

38

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

カスケードThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

カスケード• カスケード処理

ᵒ 継承などで1つの要素に対し複数の指定が起こりうるが、基本的に優先度は直接指定>継承(近い指定の方が強い)
ᵒ それが同じ場合の優先度判断をするのがカスケード処理• 優先順位づけルールその1: CSSの種類

ᵒ 文章作成者CSS>ユーザCSS>ブラウザ標準CSS• ユーザCSSは、利用者がWebブラウザに対して指定するCSS• ブラウザ標準CSSは、Webブラウザの持つデフォルトのCSS

ᵒ ただし、CSSの値に”!important”をつけると最優先される
例: pの文字サイズ指定に!importantを使用する
p { font-size: 1em !important; }まとめると!important付きユーザCSS > !important付き文書作成者CSS > 文章
作成者指定CSS > ユーザ指定CSS > ブラウザ標準CSSThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

40

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

カスケード• 優先順位づけルールその2: セレクタタイプ

ᵒ CSSの種類が同じである場合、セレクタをタイプ別に分類し、それぞれの個数を数え、点数(詳細度)を算出し、高い方を優先する• セレクタのタイプ
タイプ

対象

A

style属性に記述したCSS(前述したように基本おすすめしません)

B

IDセレクタC

クラスセレクタ、属性セレクタ、疑似クラス

D

要素セレクタ、疑似要素• 詳細度の算出
詳細度は個数を連結した”A.B.C.D”と書くとわかりやすい
Aが0つ、Bが1つ、Cが2つ、Dが1つの場合の詳細度は”0.1.2.1”
比較方法は後述
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

41

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

カスケード• 詳細度からの優先度算出

ᵒ A>B>C>Dの順で優先度が高い
ᵒ 優先度が高いセレクタタイプの点数が高い方が優先される

詳細度からの優先度算出の例#id { 装飾A }ul li.class { 装飾B }ui ol+li { 装飾C }→0.1.0.0→0.0.1.2→0.0.0.3

この場合の優先度順は装飾A>装飾B>装飾Cとなり、装飾Aが適用される

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

42

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

カスケード• 優先順位づけルールその3: 出現順

ᵒ 詳細度による優先度も同じ場合、後に出現したCSSが優先される

出現順からの優先度の例#id { 装飾A }#id { 装飾B }この場合は後に出現した装飾Bが適用される

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

43

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

ボックスモデル
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

ボックスモデルとボックスサイズ算出• 文書内の全要素は四角形の領域を形成

ᵒ コンテンツ領域、padding(ボックス内側の余白)、border(境界線)、
margin(ボックス外側の余白)の4つから成り立つ
marginborderpadding
コンテンツ領域(テキスト・画像)• ボックスサイズの算出

ᵒ コンテンツ領域の幅/高さ(width/height)+padding+borderᵒ プロパティbox-sizingの値をborder-boxにすると、ボックスサイズがwidth/heightで指定した値となる• padding/borderを考慮しコンテンツ領域のサイズを自動算出
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

45

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

CSS3変更点
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

CSS3で可能になった修飾の例• ボックスの角丸
ᵒ border-radiusプロパティ• グラデーション
ᵒ linear-gradient()/radial-gradient()• ボックスに影ᵒ box-shadowプロパティ• テキストに影ᵒ text-shadowプロパティ

demo• CSSだと瞬時に変更できて便利
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

47

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

便利セレクタの大幅追加(以下は一部)• 属性セレクタに前方/後方/部分一致が追加

ᵒ [attr^="val"], [attr$="val"], [attr*="val"]• 結合子に隣接セレクタ"+"が追加• 構造を利用した疑似クラスが大幅追加

ᵒ :nth-child(), nth-of-type(), last-childなど• CSSによる修飾がしやすくなっています

demo

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

48

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

簡単にマルチカラムレイアウト• Multi-column Layout Moduleで、複数段組みレイアウトを簡単に実現可能ᵒ column-count, coloum-gapプロパティなど• Flexible Box Layout Moduleで、floatを使わずにボックスを横並びにできるᵒ display: flexとflex-directionプロパティなど• CSSによるレイアウトの自由度が増しています

demo
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

49

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

CSSで変形、アニメーション• transformプロパティでボックスを移動・変形できるᵒ translate(), rotate(), scale(), skew()など• transition関連プロパティで、要素の変化を滑らかにできる
ᵒ 例えば、:hoverでの変化を滑らかにするなど• animation関連プロパティで、要素の変化を連続して行える@keyframesを指定するのが特徴

demo
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

50

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

4. レスポンシブ
WebデザインThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

レスポンシブWebデザインについて• 出題構成: 10%ᵒ http://html5exam.jp/outline/objectives.html#lv1_
14• タイトルはレスポンシブWebデザインですが、ス
マートデバイスに特化した内容も盛り込まれているので要注意

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

52

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

学習のポイント• レスポンシブWebデザインがどういうものかを押さえる• 実現方法を押さえる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

53

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

レスポンシブWebデザインとは• 多種多様なデバイスが登場し続ける状況の中、デバ
イスごとに対応サイトを開発するのはコストがかかり、また将来登場する端末への対応も不明• そこで、レスポンシブWebデザインと呼ばれるWeb
サイト開発手法が登場ᵒ 広い意味では利用中であるユーザの状況や環境に合わせ、そのユーザにより良い体験を提供しようという考え方
ᵒ 手法を表す場合には、1つのHTMLで、デバイスの特性(主に画面横幅)に応じてレイアウトやデザインを変更する手法を指す

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

54

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

デバイス特性に応じてレイアウトを変更する方法• レスポンシブWebデザインでは、デバイス特性を利用してCSSを切り替えるMedia Queriesを利用し、デバイスごとにレイアウトを変更する
CSS

スマートフォン

demo

タブレット

HTML

CSS

CSS

PC

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

55

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

メリットとデメリット• メリットᵒ 将来登場するデバイスも見越して対応可能
ᵒ URLが同じとなるため、SEO的に有利
ᵒ リダイレクトが発生しないため読み込み時間を短縮可能
ᵒ HTMLが１つで済むのでコストを削減できる(可能性)• デメリットᵒ 設計・製造の難易度が高い• 逆にコスト高になることもᵒ モバイル向けには動画や画像も切り替える必要• モバイルは回線が不安定で画面は小さい

ᵒ 画面フローの変更には対応できない
ᵒ スマホ用にPC向けサイトを表示できない
ᵒ HTML/CSSのサイズが増加し、ページ表示や動作が重くなる可能性
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

56

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

レスポンシブWebデザインの実現手法• Media Queries(前述)• Fluid Gridᵒ 画面サイズにあわせてグリッドの幅を変更する• Fluid Imageᵒ 画面サイズに合わせて画像サイズを変更する• これ以外にもあるが基本はこの3つ• フレームワークをベースに作ることも多い

demo
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

57

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

5. オフラインWeb
アプリケーション(概要とマニフェスト)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

オフラインWebアプリケーションについて• 出題構成: 3%ᵒ http://html5exam.jp/outline/objectives.html#lv1_
15

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

59

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

学習のポイント• 概要と• マニフェスト

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

60

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

オフラインWebアプリケーションとは• ブラウザがオフラインでも静的コンテンツを閲覧可能なWebアプリ
ケーション• ブラウザは、キャッシュマニフェストというファイルを読み取り、キャッシュマニフェストに指定されたコンテンツをローカルに保存⇒この仕組みによりオフライン閲覧が可能
クライアント（Webブラウザ）

サーバ
クライアントからのリクエスト

ファイルダウンロード
一部コンテンツはローカルに保存
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

61

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

メリットとデメリット• メリットᵒ ブラウザがオフライン状態でも、Webアプリケーションを閲覧させることが可能ᵒ (2回目のアクセス以降)ローカルファイルはネットワーク経由のファ
イルより速く読み込まれる
ᵒ 全てのファイルをサーバから取得しないため、サーバ負荷の軽減が可能• デメリットᵒ サーバ側のファイルを更新した場合、ユーザのローカルキャッシュ
ファイルも更新が必要
ᵒ キャッシュマニフェストの記述を誤った場合、変更ファイルが更新されないことがある
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

62

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

実現のために必要な作業• Webサーバの設定

ᵒ ".manifest"のMIMEタイプを"text/cache-manifest"にᵒ これがないとキャッシュマニフェストファイルが認識されない• キャッシュマニフェストファイルの作成

ᵒ どのファイルをキャッシュする/しないを設定する
ᵒ 書き方は後述• キャッシュ対象HTMLファイルでのmanifest属性指定

ᵒ html要素のmanifest属性に利用するキャッシュマニフェストファ
イルのパスを指定
ᵒ HTMLファイルのみでよい(CSS/JavaScript等は不要)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

63

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

キャッシュマニフェストファイルの記述方法
CACHE MANIFEST# 先頭文字を#で始めることにより、コメントを記述可能# 本例ではパスをキャッシュマニフェストからの相対パスで記載# ここはCACHE:セクション# このセクションにはローカルキャッシュするファイルを記載
index.html
app.jsNETWORK:# このセクションにはキャッシュしないファイルを記載
submit.cgi
FALLBACK:# このセクションには代替ファイルを記載/ offline.html
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

64

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

最後に: 学習の進め方

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

学習の進め方• 実際に試してみよう

ᵒ JSFiddleやJS Binならブラウザから書いてすぐ確認できる
ᵒ 特にCSSは動かして確認することで理解が深まる• 仕様書を見よう

ᵒ CSSのプロパティなどはそうするのが確実
ᵒ 全部を見る必要はありません• 暗記も必要ᵒ 合格ラインは70%であることも考慮して効率的に• 受験中にあせらない心構えを

ᵒ 70%なので少々わからなくても平気The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

66

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

役に立つ情報源など• Mozilla Developers Network（MDN）の Web
technology for developersᵒ https://developer.mozilla.org/ja/docs/Webᵒ ここからHTMLやCSSの技術情報が見られる
ᵒ かなり日本語化されています• W3C CSSプロパティ一覧

ᵒ http://www.w3.org/Style/CSS/all-propertiesᵒ プロパティに関連する仕様とその標準化進行状況がわかる• 資格関連情報

ᵒ 公式サイト http://www.html5exam.jp/
ᵒ Twitter @HTML5Certᵒ Facebook https://www.facebook.com/html5exam
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

67

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

67
Copyright© 2014, NTT Software Corporation. All rights reserved.

ふりかえり: 本日お話したこと• 試験についてᵒ 試験概要ᵒ 試験範囲• 試験範囲のポイント解説

ᵒ Webの基礎知識
ᵒ 要素
ᵒ CSS3ᵒ レスポンシブWebデザイン
ᵒ オフラインWebアプリケーション• 学習の進め方
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

68

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

68
Copyright© 2014, NTT Software Corporation. All rights reserved.

おまけ
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

ベンダプレフィックス• CSSで標準化の進む機能がブラウザで先行実装された場合、プロパティ
や値の先頭にベンダプレフィックスと呼ばれる特定の接頭語を付ける必要がある• 例えば、Firefoxのベンダプレフィックスは以下-moz-プロパティA: 値;

ᵒ どのようなベンダプレフィックスがあるかはベンダ固有の話なので、試験にはでないと思われます• 現状は次のようになっている

ᵒ MozillaやGoogleは今後ベンダプレフィックスをつけないと表明
ᵒ ベンダプレフィックスは標準化がある程度進むと外すことが推奨
ᵒ ただ昔のブラウザを対象にすることはある• 現状はベンダプレフィックスあり/なしを併記しておくのがよいでしょう
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

70

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

ブラウザでの対応状況調査方法• 各ブラウザにおける要素やCSS機能の対応状況、ベンダプレフィック
スの有無などは頻繁に変更される
ᵒ 自分で調べているとつらい• caniuseで調査するとよい
ᵒ http://caniuse.com/• 使い方は検索フォームで使いたい機能を検索するか、一覧から選• ぱっと調べるには非常に便利です• 試験には出ません

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

71

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.

Open the Future with HTML5.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

72

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2014, NTT Software Corporation. All rights reserved.