LPI-Japan主催

HTML5 プロフェッショナル認定試験
レベル1 ポイント解説 無料セミナー
講師：大 藤 幹（株式会社クリーク・アンド・リバー社 認定講師）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

主な著書

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

アジェンダ••••HTML5プロフェッショナル認定試験 試験概要
これだけは覚えておくべきHTML5の仕様
これだけは覚えておくべきCSS3の仕様
これだけは覚えておくべきその他の基礎知識

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

3Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

HTML5プロフェッショナル認定試験

試験概要
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

4Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

2つのレベルHTML 5 Level.1
Markup Professional

マルチデバイスに対応した静的なWebコンテンツを HTML5を使ってデザイン・作成できる。

HTML 5 Level.2

Application Development Professional

システム間連携や最新のマルチメディア術に対応したWebアプリ
ケーションや動的Webコンテンツの開発・設計ができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

5Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

対象範囲HTML/HTML5
マークアップLevel.1
Level.2

ビジビリティ
（CSS3など）

パフォーマンス

Level.1
レスポンシブWebデザイン

ユーザビリティ

オフライン
Webアプリケーション

マルチメディアJavaScript
プログラミング

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

レベル1試験概要

所要時間90分（機密保持契約とアンケートの時間を含む）

試験問題数

約60問

有意性の期限5年間

受験料￥15,000（税抜）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

7

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

レベル1の出題構成
Webの基礎知識

30%

CSS3
要素

20%
37%

レスポンシブWebデザイン

10%

オフラインWebアプリケーション（概要とマニフェスト）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

83%Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

認定証・認定カード
認定証

E
L
P

M
A
S

S

認定カード

認定者ロゴ（名刺用）
E

PL

M
SA

E
L
P
M
A

E

PL

M
SA

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

9Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

試験の情報オフィシャルサイト

http://www.html5exam.jp/
Twitter@html5Cert
Facebook

https://www.facebook.com/html5exam
受験予約

http://www.pearsonvue.com/japan/Registration/
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

10

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

これだけは覚えておくべき

HTML5 の 仕様

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

11

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

2月4日付けで追加された新要素•••

template要素

内容をスクリプトで挿入する範囲

rb要素

ruby base text

rtc要素

ruby text container※HTML5の要素は合計111種類となった

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

12

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

template要素の使用例<table><tr><th>製品名</th><th>サイズ</th><th>色</th></tr><template id="row"><tr><td></td><td></td><td></td></tr></template></table>※http://www.w3.org/TR/html5/scripting-1.html#the-template-element
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

13

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

HTML5文書の全体構造

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

14

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

HTML5文書の全体構造<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>○○○</title></head><body></body></html>The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

15

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

スタイルシートとスクリプトのデフォルト値<link rel="stylesheet" href="style.css"><style>・・・</style>type="text/css"<script>
・・・</script>

type="text/javascript"

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

16

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

HTML5で削除された要素The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

17

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

HTML5で削除された要素1
要素名

要素のあらわすもの・役割

acronym

頭字語（各単語の頭文字を続けてできた略語）

appletJavaアプレット

basefont

基準フォントの種類・色・サイズの指定

big

大きな文字

center中央揃え

dir

ディレクトリ・リスト

font

フォントの種類・色・サイズの指定
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

HTML5で削除された要素2
要素名

要素のあらわすもの・役割

frame

フレームの内容を指定

frameset

フレームの区切り方の定義

isindex

1行の入力フィールドnoframes

フレームが表示できない環境用の内容

strike

取消線を引いて表示

tt

等幅フォントで表示
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

19

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

HTML5で変更された要素The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

20

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

HTML5で役割や意味が変更された要素1

要素名

要素のあらわすもの・役割b

注目してほしい部分を示す。強調や重要などの意味合いを示すものではない。キーワードや製品名部分などに使用する。

cite

その部分が作品のタイトルであることを示す（HTML4では出典や参照先を意味していた）。人名には使用しない。

dl

用語解説型リスト。HTML4ではdeﬁnition Listの略だったが、HTML5ではdescription Listの略。定義の意味はなくなった。

hr

段落単位での内容の区切りを示す。セクションの中で、話題や場面が変わる部分などで使用することを想定。

i

一般に慣習としてイタリックで表記される部分。生物の学名や船の名前、言語の種類が異なっている部分などに使用する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

21

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

HTML5で役割や意味が変更された要素2

要素名

要素のあらわすもの・役割s

その部分を取り消したことを示す。すでに正しくない情報となってしまった部分や、無関係となった部分などに使用。

small

メインコンテンツには含まれない部分において、一般に小さな文字で掲載される部分。Copyrightの情報などに使用。

strong

その部分が重要であることを示す。入れ子にすることで、重要さの度合いを高めることができる。

u

中国語の固有名詞とそうでない部分を区別したり、スペルが間違っている部分を示したい場合などに使用。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

22

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

HTML5で追加された要素The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

23

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

セクションを示す要素

要素名

要素のあらわすもの・役割

section

章や節のようなセクションを示す（他のセクション要素が適当でないセクションにはこれを使用する）。

articleニュースの記事やブログの記事のように、内容がそれだけで完結しているセクションを示す。ブログの各コメントにも使用する。

aside

メインコンテンツには含まれていない部分のセクションを示す。広
告やリンクのリスト、補足記事などのセクションに使用する。

nav

グローバル・ナビゲーションなど、主要なナビゲーションであることを示す。主要でないナビゲーションには使用しない。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

24

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

暗黙のセクション

セクションのタグがなくても、見出しのタグがあれば、そこにセクションがあるものと認識する。
見出しの階層が前の見出しと同じか高ければ、前のセクションを終了して新しいセクションを開始する。
見出しの階層が前の見出しよりも低ければ、今のセクションの中でサブセクションを開始する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

25

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

ページ内の構造を示す要素

要素名

要素のあらわすもの・役割

header

Webページのいわゆるヘッダー部分を示す要素。一般に、ロゴ画像
や検索フォーム、ナビゲーションなどを含む部分。

main

Webページのメインコンテンツ部分を示す要素。各ページで共通するロゴ画像・検索フォーム・ナビゲーション・著作権情報などは含めない。

footerそのfooter要素のあるセクションに関する情報を入れる要素。下にあっても上にあってもＯＫ。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

26

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

テキスト関連の要素

要素名

要素のあらわすもの・役割

bdi

双方向テキストの中の分離・独立（isolate）された範囲。

mark

テキストの特定の部分を目立つようにして（ハイライト表示にして）注目してもらいたい場合に使用。

time

コンピュータが読み取り可能な形式の日付・時刻をdatetime属性の値または要素内容で示す。

data

要素内容をコンピュータが読み取り可能な形式にしたデータをvalue属性（必須）の値で示す。

wbr

英単語の途中など、通常は行の折り返しが行われない範囲において、改行可能な位置を示す。空要素。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

27

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

ルビ関連の要素

要素名

要素のあらわすもの・役割

ruby

ルビをふる範囲全体

rb

ruby base text → ルビをふる漢字部分 ※新要素

rtruby text → ルビ・ふりがな

rtcruby text container

rpruby parentheses → ルビ未対応用のカッコ→ rt要素のグループ ※新要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

28

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

ルビ関連の要素

め

ま ん べ つ女満別

r t (ruby text)要素
r b (ruby base text)要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

29

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

ルビ関連の要素<ruby><rb>女満別</rb><rt>めまんべつ</rt></ruby>The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

30

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

ルビ関連の要素<ruby>
女<rb>満</rb><rb>別</rb><rt>め</rt><rt>まん</rt><rt>べつ</rt></ruby>The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

31

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

ルビ関連の要素<ruby>
女<rb>満</rb><rb>別</rb>
めま ん べ つ

女満別
me

man

betsu

<rt>め</rt><rt>まん</rt><rt>べつ</rt><rtc><rt>me</rt><rt>man</rt><rt>betsu</rt></rtc></ruby>The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

32

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

ルビ関連の要素<ruby><rb>女満別</rb><rp>（</rp><rt>めまんべつ</rt><rp>）</rp></ruby>

女満別（めまんべつ）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

33

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

図表・図版を示す要素

要素名

要素のあらわすもの・役割

ﬁgure

メインコンテンツから参照される図表・図版（写真やソースコードなども含む）

ﬁgcaptionﬁgure要素のキャプション

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

34

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

音声や動画などを組み込む要素
要素名

要素のあらわすもの・役割

audio

音声データを組み込む要素。音声データのURLをsrc属性に指定。

video

動画データを組み込む要素。動画データのURLをsrc属性に指定。

source形式の異なる複数のデータを指定したい場合に使用。

track

同期させるテキスト・トラック（字幕など）を指定する要素。

embed

プラグインを使用するデータを組み込むための要素。

canvas

ビットマップの動的グラフィックを表示。JavaScriptで制御。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

35

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

フォーム関連の要素

要素名

要素のあらわすもの・役割

meter

ある範囲のどの位置かを示すフォーム部品（メーター）

progress

タスクの進行状況を示すフォーム部品（プログレスバー）

datalist

input要素の選択肢（サジェスト機能のように入力候補を表示）

output他のフォーム部品からの計算結果を表示させるフォーム部品※at risk

keygen

公開鍵暗号における公開鍵・秘密鍵のペアを生成するフォーム部品
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

36

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

その他の要素

要素名

要素のあらわすもの・役割

details

特定の操作（▶をクリックなど）で表示される詳細情報※at risksummary

details要素で最初から表示させる見出しや説明などの情報※at risk

dialog

インタラクティブな操作のためのダイアログボックスやウィンドウ、
インスペクタなど ※at risk

template

内容をスクリプトで挿入する範囲※新要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

37

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

属性関連の追加と変更The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

38

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

グローバル属性1
属性名

値

id

固有の名前

class

種類を示す名前

title

補足情報

lang

言語コード

style

CSSの「プロパティ: 値;」

accesskey

ショートカットキー

tabindex

タブキーによる移動の順序

dir

文字表記の方向（ltr/rtl/auto）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

39

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

グローバル属性2
属性名値

contenteditable

編集の可・不可（true/false）

draggable

ドラッグの可・不可（true/false/auto）

dropzone

ドロップ時の挙動（copy/move/link）

spellcheck

スペルチェックをするかどうか（true/false）

translate

ローカライズの時に翻訳するかどうか（yes/no）

hidden

非表示（指定するとtrue/指定しないとfalse）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

40

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

カスタムデータ属性とは？

データを格納するにふさわしい要素や属性がない場合に作成できる独自の属性
サイトの内部のスクリプトなどで利用することを想定して用意されたもの※サイトの外部から利用するためのものではない
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

41

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

カスタムデータ属性の使い方•••

属性名は必ず「data-」ではじめる「data-」のあとに1文字以上必要
どの要素にいくつでも、任意の値で指定可能※ http://www.w3.org/TR/html5/dom.html#global-attributes
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

42

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

カスタムデータ属性の使用例<ol><li data-length="11m32s">弦楽四重奏曲第1番</li><li data-length="08m55s">弦楽四重奏曲第2番</li><li data-length="22m04s">弦楽四重奏曲第3番</li><li data-length="13m46s">弦楽四重奏曲第4番</li><li data-length="30m00s">弦楽四重奏曲第5番</li></ol>※各曲の長さをdata-length属性であらわした例※曲の長さで並べ替えることなどが可能となる
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

43

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

これだけは覚えておくべき

CSS3 の 仕様

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

44

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

セレクタ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

45

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

セレクタとは？
スタイルの適用先を示す部分がセレクタ

div#wrapper {width: 900px;
padding: 1em;
・・・}

セレクタ {
プロパティ: 値;
プロパティ: 値;・・・}

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

46

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

属性セレクタ

CSS2.1

CSS3

[属性名]

[属性名^="開始文字列"][属性名="属性値全体"][属性名$="終了文字列"][属性名~="属性値の一つ"][属性名*="含まれる文字列"][属性名|="属性値の-の前"]

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

47

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

CSS2.1とCSS3の疑似要素の書式の違い

CSS2.1

CSS3:ﬁrst-letter: :ﬁrst-letter:ﬁrst-line: :ﬁrst-line:before: :before:after: :after

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

48

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

セレクタの組み合わせ

CSS2.1

CSS3

セレクタA セレクタB

セレクタA ~セレクタB※Aの中に含まれるB※Aよりも後にあるB

セレクタA >セレクタB※Aの子要素であるB

セレクタA +セレクタB※Aの直後にあるB

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

49

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

CSS3の疑似クラス1:ﬁrst-child

最初の要素に適用 CSS2.1:ﬁrst-of-type

最初の要素に適用（同一要素）:last-child

最後の要素に適用:last-of-type

最後の要素に適用（同一要素）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

50

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

CSS3の疑似クラス2※「nth」は「◯th」、つまり「4th」や「5th」のような「n番目」の意味:nth-child( 式 )前からn番目に適用:nth-last-child( 式 )後ろからn番目に適用:nth-of-type( 式 )前からn番目に適用（同一要素）:nth-last-of-type( 式 )後ろからn番目に適用（同一要素）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

51

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

:nth-◯◯◯の式の説明:nth-child( 7 )7番目の要素に適用:nth-child( 2 n + 1 ):nth-child( 2 n + 0 )奇数番目の要素に適用（an+b形式）:nth-child( odd ):nth-child( even )奇数番目の要素に適用（キーワード）

偶数番目の要素に適用（an+b形式）

偶数番目の要素に適用（キーワード）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

52

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

CSS3の疑似クラス3:only-child

一人っ子の要素に適用:only-of-type

一人っ子の要素に適用（同一要素）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

53

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

CSS3の疑似クラス4:disabled

disabled状態の要素に適用:enabled

disabled状態ではない要素に適用:checked

checked状態の要素に適用

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

54

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

CSS3の疑似クラス5:target「#◯◯◯」リンクのジャンプ先に適用:root

ルート要素（html要素）に適用:empty

内容が空の要素に適用:not( セレクタ )「セレクタ」に該当しない要素に適用

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

55

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

セレクタによる

優先順位

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

56

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

CSS競合時の優先順位についてCSSの表示指定が競合した場合の優先度はセレクタで決められるセレクタを使用しない「style属性」による指定は最優先される

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

57

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

セレクタによる優先順位の計算方法
セレクタに含まれる次のものをそれぞれカウントして3桁の数字を作成
その3桁の数字が大きなものほど優先順位が高くなる

IDセレクタの数

属性関連セレクタの数

要素関連セレクタの数（クラスセレクタ、属性セレクタ、 （タイプセレクタ、疑似要素の数）
疑似クラスの数）※ユニバーサルセレクタ（ * ）はカウントしない
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

58

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

:not( ) 疑似クラス:not(セレクタ)••:not( )自体は疑似クラスとしてはカウントしない( )内のセレクタだけを普通のセレクタとしてカウント

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

59

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

セレクタによる優先順位の計算の例1

div.inner

div.inner

ID

属性

要素

ID

属性

要素

ID

属性

要素

0

0

1

0

1

0

0

1

1

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

60

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

セレクタによる優先順位の計算の例2#logo

div#logobody div#logo

ID

属性

要素

ID

属性

要素

ID

属性

要素

1

0

0

1

0

1

1

0

2

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

61

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

色と半透明の指定方法

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

62

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

RGBA

rgb( Red, Green, Blue )不透明度

rgba( Red, Green, Blue, Alpha )The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

63

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

color: rgba( 255, 255, 255, 0.0 );color: rgba( 255, 255, 255, 0.2 );color: rgba( 255, 255, 255, 0.4 );color: rgba( 255, 255, 255, 0.6 );color: rgba( 255, 255, 255, 0.8 );color: rgba( 255, 255, 255, 1.0 );The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

64

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

HSLA

hsla( Hue, Saturation, Lightness, Alpha )
明 度

不透明度

0

0%

0%

0.0

〜

〜

360

100%

100%

1.0

〜

彩 度

〜

色 相

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

65

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

Color Circle

330

0

30

300

60

270

90

240

120
210

180

150

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

66

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

#box01{ opacity: 0.1 };#box02{ opacity: 0.2 };#box03{ opacity: 0.3 };#box04{ opacity: 0.4 };#box05{ opacity: 0.5 };#box06{ opacity: 0.6 };#box07{ opacity: 0.7 };#box08{ opacity: 0.8 };#box09{ opacity: 0.9 };#box10{ opacity: 1.0 };The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

67

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

回転・移動・拡大縮小

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

68

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

transformプロパティ

transform: rotate(45deg);transform: translate(50px);
transform: scale(1.5);
・・・
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

69

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

transformプロパティ

transform: rotate(45deg);

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

70

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

transformプロパティ

transform: translate(100px, 50px);

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

71

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

transformプロパティ

transform: translate(100px, 50px);= position: relative; left: 100px; top: 50px;

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

71

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

transformプロパティ

transform: scale(2.0);

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

72

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

transformプロパティ

transform: scale(2) rotate(45deg);

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

73

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

トランジション

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

74

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

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

75

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

アニメーション

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

76

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

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

77

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

これだけは覚えておくべき

その他の基礎知識

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

78

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

メディアクエリ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

79

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

従来のメディアの指定方法
HTML<link media="screen" ・・・ ><style media="screen" ・・・・・・</style>>CSS@media screen {・・・}
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

80

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

メディアクエリとは？
HTML<link media="screen かつ、幅が600px以上" ・・・<style media="screen かつ、幅が1024px以下"
・・・</style>

>

・・・

>

CSS

@media screen かつ、画面が縦長の状態 {・・・}
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

81

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

メディアクエリの書式

メディア and (メディア特性 : 値)

メディア and (メディア特性 : 値) and (メディア特性 : 値) …

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

82

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

メディアクエリの書式

not メディア and (メディア特性: 値) …
※条件を逆にする

only メディア and (メディア特性: 値) …
※古いブラウザ対策

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

83

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

メディア特性とその値（抜粋）メディア特性

説

明

値

width

表示領域の幅（スクロールバーも含む）

実数＋単位

min-width

表示領域の最小の幅（スクロールバーも含む）

実数＋単位

max-width

表示領域の最大の幅（スクロールバーも含む）

実数＋単位

height表示領域の高さ（スクロールバーも含む）

実数＋単位

device-width

出力メディアの画面の幅

実数＋単位

min-device-width

出力メディアの画面の最小の幅

実数＋単位

max-device-width

出力メディアの画面の最大の幅

実数＋単位

resolution

出力メディアの解像度

実数＋単位

orientation

縦長・縦横同じ（portrait）／横長（landscape）

portrait, landscape

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

84

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

解像度を示す単位

dpi

dots per inch

dpcm

dots per centimeter

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

85

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

メディアクエリの使用例<link media="screen and (max-width: 1000px)" … >※表示領域の幅が1000px以下の時に適用<link media="only screen and (min-width: 500px)
and (max-width: 1000px)" … >※表示領域の幅が500px以上、1000px以下の時に適用

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

86

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

オフラインWebアプリケーション

キャッシュマニフェスト

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

87

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

オフラインWebアプリケーションとは？

Webアプリケーション（Webサイト）を
オフラインでも動作させる仕組み※http://www.w3.org/TR/html5/browsers.html#offline
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

88

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

キャッシュマニフェストとは？

キャッシュするファイル、キャッシュしないファイル、
その他関連情報の指示ファイル（テキスト形式）※http://www.w3.org/TR/html5/browsers.html#manifests
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

89

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

キャッシュマニフェストの内容の例１
CACHE MANIFEST

必ず1行目に記述

CACHE:
styles/default.css
images/background.png

キャッシュさせて使うファイルを指定

NETWORK:
comm.cgi

常にネットから取得するファイルを指定

FALLBACK:
offline.html

取得失敗時の代替ファイルを指定

SETTINGS:
fast

キャッシュ（モード）の設定
キャッシュを使う（デフォルト）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

90

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

キャッシュマニフェストの内容の例２
CACHE MANIFEST#この行はコメントですstyles/default.css
images/background.png
NETWORK:*SETTINGS:
prefer-online「#」で始まる行はコメント省略すると「CACHE:」「CACHE:」で指定されていない
ファイル全部
可能ならネットからファイルを取得

FALLBACK:
offline.html
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

91

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

キャッシュマニフェストの指定方法〜<!DOCTYPE html><html lang="ja" manifest="◯◯◯.appcache"></html>•••拡張子
MIMEタイプ
エンコーディング

.appcachetext/cache-manifest
UTF-8
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

92

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

Open the Future with HTML5.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

93

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.