Comments
Description
Transcript
HTML5プロフェッショナル認定試験 レベル1 ポイント解説無料セミナー
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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
2
© LPI-Japan 2014. All rights reserved.
アジェンダ
•
•
•
•
HTML5プロフェッショナル認定試験 試験概要
これだけは覚えておくべきHTML5の仕様
これだけは覚えておくべきCSS3の仕様
これだけは覚えておくべきその他の基礎知識
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
3
© LPI-Japan 2014. All rights reserved.
HTML5プロフェッショナル認定試験
試験概要
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
4
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
5
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
6
© LPI-Japan 2014. All rights reserved.
レベル1試験概要
所要時間
90分（機密保持契約とアンケートの時間を含む）
試験問題数
約60問
有意性の期限
5年間
受験料
￥15,000（税抜）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
7
© LPI-Japan 2014. All rights reserved.
レベル1の出題構成
Webの基礎知識
30%
CSS3
要素
20%
37%
レスポンシブWebデザイン
10%
オフラインWebアプリケーション（概要とマニフェスト）
3%
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
8
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
9
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
10
© LPI-Japan 2014. All rights reserved.
これだけは覚えておくべき
HTML5 の 仕様
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
11
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
12
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
13
© LPI-Japan 2014. All rights reserved.
HTML5文書の
全体構造
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
14
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
15
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
16
© LPI-Japan 2014. All rights reserved.
HTML5で
削除された要素
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
17
© LPI-Japan 2014. All rights reserved.
HTML5で削除された要素1
要素名
要素のあらわすもの・役割
acronym
頭字語（各単語の頭文字を続けてできた略語）
applet
Javaアプレット
basefont
基準フォントの種類・色・サイズの指定
big
大きな文字
center
中央揃え
dir
ディレクトリ・リスト
font
フォントの種類・色・サイズの指定
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
18
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
19
© LPI-Japan 2014. All rights reserved.
HTML5で
変更された要素
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
20
© LPI-Japan 2014. All rights reserved.
HTML5で役割や意味が変更された要素1
要素名
要素のあらわすもの・役割
b
注目してほしい部分を示す。強調や重要などの意味合いを示すもの
ではない。キーワードや製品名部分などに使用する。
cite
その部分が作品のタイトルであることを示す（HTML4では出典や
参照先を意味していた）。人名には使用しない。
dl
用語解説型リスト。HTML4ではdefinition Listの略だったが、
HTML5ではdescription Listの略。定義の意味はなくなった。
hr
段落単位での内容の区切りを示す。セクションの中で、話題や場面
が変わる部分などで使用することを想定。
i
一般に慣習としてイタリックで表記される部分。生物の学名や船の
名前、言語の種類が異なっている部分などに使用する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
21
© LPI-Japan 2014. All rights reserved.
HTML5で役割や意味が変更された要素2
要素名
要素のあらわすもの・役割
s
その部分を取り消したことを示す。すでに正しくない情報となって
しまった部分や、無関係となった部分などに使用。
small
メインコンテンツには含まれない部分において、一般に小さな文字
で掲載される部分。Copyrightの情報などに使用。
strong
その部分が重要であることを示す。入れ子にすることで、重要さの
度合いを高めることができる。
u
中国語の固有名詞とそうでない部分を区別したり、スペルが間違っ
ている部分を示したい場合などに使用。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
22
© LPI-Japan 2014. All rights reserved.
HTML5で
追加された要素
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
23
© LPI-Japan 2014. All rights reserved.
セクションを示す要素
要素名
要素のあらわすもの・役割
section
章や節のようなセクションを示す（他のセクション要素が適当でな
いセクションにはこれを使用する）。
article
ニュースの記事やブログの記事のように、内容がそれだけで完結し
ているセクションを示す。ブログの各コメントにも使用する。
aside
メインコンテンツには含まれていない部分のセクションを示す。広
告やリンクのリスト、補足記事などのセクションに使用する。
nav
グローバル・ナビゲーションなど、主要なナビゲーションであるこ
とを示す。主要でないナビゲーションには使用しない。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
24
© LPI-Japan 2014. 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/
25
© LPI-Japan 2014. All rights reserved.
ページ内の構造を示す要素
要素名
要素のあらわすもの・役割
header
Webページのいわゆるヘッダー部分を示す要素。一般に、ロゴ画像
や検索フォーム、ナビゲーションなどを含む部分。
main
Webページのメインコンテンツ部分を示す要素。各ページで共通す
るロゴ画像・検索フォーム・ナビゲーション・著作権情報などは含
めない。
footer
そのfooter要素のあるセクションに関する情報を入れる要素。下
にあっても上にあってもＯＫ。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
26
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
27
© LPI-Japan 2014. All rights reserved.
ルビ関連の要素
要素名
要素のあらわすもの・役割
ruby
ルビをふる範囲全体
rb
ruby base text → ルビをふる漢字部分 ※新要素
rt
ruby text → ルビ・ふりがな
rtc
ruby text container → rt要素のグループ ※新要素
rp
ruby parentheses → ルビ未対応用のカッコ
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
28
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
29
© LPI-Japan 2014. All rights reserved.
ルビ関連の要素
<ruby> <rb>女満別</rb>
<rt>めまんべつ</rt>
</ruby>
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
30
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
31
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
32
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
33
© LPI-Japan 2014. All rights reserved.
図表・図版を示す要素
要素名
要素のあらわすもの・役割
figure
メインコンテンツから参照される図表・図版（写真やソースコード
なども含む）
figcaption
figure要素のキャプション
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
34
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
35
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
36
© LPI-Japan 2014. All rights reserved.
その他の要素
要素名
要素のあらわすもの・役割
details
特定の操作（▶をクリックなど）で表示される詳細情報
※at risk
summary
details要素で最初から表示させる見出しや説明などの情報
※at risk
dialog
インタラクティブな操作のためのダイアログボックスやウィンドウ、
インスペクタなど ※at risk
template
内容をスクリプトで挿入する範囲 ※新要素
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
37
© LPI-Japan 2014. 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/
38
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
39
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
40
© LPI-Japan 2014. 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/
41
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
42
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
43
© LPI-Japan 2014. 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/
44
© LPI-Japan 2014. 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/
45
© LPI-Japan 2014. All rights reserved.
セレクタとは？
スタイルの適用先を示す部分がセレクタ
div#wrapper {
width: 900px;
padding: 1em;
・・・
}
セレクタ {
プロパティ: 値;
プロパティ: 値;
・・・
}
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
46
© LPI-Japan 2014. All rights reserved.
属性セレクタ
CSS2.1
CSS3
[属性名]
[属性名^="開始文字列"]
[属性名="属性値全体"]
[属性名$="終了文字列"]
[属性名 ="属性値の一つ"]
[属性名*="含まれる文字列"]
[属性名¦="属性値の-の前"]
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
47
© LPI-Japan 2014. All rights reserved.
CSS2.1とCSS3の疑似要素の書式の違い
CSS2.1
CSS3
:first-letter
: :first-letter
:first-line
: :first-line
:before
: :before
:after
: :after
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
48
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
49
© LPI-Japan 2014. All rights reserved.
CSS3の疑似クラス1
:first-child
最初の要素に適用 CSS2.1
:first-of-type
最初の要素に適用（同一要素）
:last-child
最後の要素に適用
:last-of-type
最後の要素に適用（同一要素）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
50
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
51
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
52
© LPI-Japan 2014. All rights reserved.
CSS3の疑似クラス3
:only-child
一人っ子の要素に適用
:only-of-type
一人っ子の要素に適用（同一要素）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
53
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
54
© LPI-Japan 2014. All rights reserved.
CSS3の疑似クラス5
:target
「#⃝⃝⃝」リンクのジャンプ先に適用
:root
ルート要素（html要素）に適用
:empty
内容が空の要素に適用
:not( セレクタ )
「セレクタ」に該当しない要素に適用
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
55
© LPI-Japan 2014. 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/
56
© LPI-Japan 2014. All rights reserved.
CSS競合時の優先順位について
CSSの表示指定が競合した場合の優先度はセレクタ
で決められる
セレクタを使用しない「style属性」による指定は最
優先される
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
57
© LPI-Japan 2014. All rights reserved.
セレクタによる優先順位の計算方法
セレクタに含まれる次のものをそれぞれカウントして3桁の数字を作成
その3桁の数字が大きなものほど優先順位が高くなる
IDセレクタの数
属性関連セレクタの数
要素関連セレクタの数
（クラスセレクタ、属性セレクタ、 （タイプセレクタ、疑似要素の数）
疑似クラスの数）
※ユニバーサルセレクタ（ * ）はカウントしない
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
58
© LPI-Japan 2014. All rights reserved.
:not( ) 疑似クラス
:not(セレクタ)
•
•
:not( )自体は疑似クラスとしてはカウントしない
( )内のセレクタだけを普通のセレクタとしてカウント
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
59
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
60
© LPI-Japan 2014. All rights reserved.
セレクタによる優先順位の計算の例2
#logo
div#logo
body 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
61
© LPI-Japan 2014. 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/
62
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
63
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
64
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
65
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
66
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
67
© LPI-Japan 2014. 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/
68
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
69
© LPI-Japan 2014. All rights reserved.
transformプロパティ
transform: rotate(45deg);
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
70
© LPI-Japan 2014. All rights reserved.
transformプロパティ
transform: translate(100px, 50px);
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
71
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
71
© LPI-Japan 2014. All rights reserved.
transformプロパティ
transform: scale(2.0);
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
72
© LPI-Japan 2014. All rights reserved.
transformプロパティ
transform: scale(2) rotate(45deg);
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
73
© LPI-Japan 2014. 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/
74
© LPI-Japan 2014. All rights reserved.
Demo
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
75
© LPI-Japan 2014. 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/
76
© LPI-Japan 2014. All rights reserved.
Demo
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
77
© LPI-Japan 2014. 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/
78
© LPI-Japan 2014. 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/
79
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
80
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
81
© LPI-Japan 2014. All rights reserved.
メディアクエリの書式
メディア and (メディア特性 : 値)
メディア and (メディア特性 : 値) and (メディア特性 : 値) …
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
82
© LPI-Japan 2014. All rights reserved.
メディアクエリの書式
not メディア and (メディア特性: 値) …
※条件を逆にする
only メディア and (メディア特性: 値) …
※古いブラウザ対策
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
83
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
84
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
85
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
86
© LPI-Japan 2014. 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/
87
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
88
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
89
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
90
© 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
91
© LPI-Japan 2014. All rights reserved.
キャッシュマニフェストの指定方法
∼
<!DOCTYPE html>
<html lang="ja" manifest="⃝⃝⃝.appcache">
</html>
••
•
拡張子
MIMEタイプ
エンコーディング
.appcache
text/cache-manifest
UTF-8
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
92
© LPI-Japan 2014. All rights reserved.
Open the Future with HTML5.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
93
© LPI-Japan 2014. All rights reserved.