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

(1)

HTML5

認定試験

1 ン解説無料セ

ー

2017

年

4 月

LPI Japan

主催

講師：伊藤

眞

(2)

1.HTML5

認定試験概要

1-1. HTML5

試験

1-2. HTML5

資格取得

意義

1-3. HTML5

1 範囲概要

(Ver2.0)

1-4.

受験向け学習方法

2. 項目解説

2-1. 1.2.3 CSS

ー

2-2. 1.4

ン

ｅｂ

ン

2-3. 1.5.1

・

系

API

概要

(3)

(4)

HTML

ｐｒ

ｒ

ｐ

ｎｇ

ｇ

複数文書相互関連付け結付け

仕組

hyper

いう

キ

超

え

いう意味

文書

… ..XYZ…

…

……..

XYZ

……

….ABC….

………….

ABC

…..

……..

………..

視覚表現や文章構造

記述

言語

“

Markup

ナいう語英語圏出版業界著者編集者

印刷者間指示伝え方法意味

い

<!DOCTYPE HTML>

<h1>

1 見出

</h1>

<body>

文書本体

:

</body>

他

ー

言語例

・

SGML,

・

TeX (

数式

)

・

XML

HTML5

例

・

World Wide Web

ーキ

実装

言え

(5)

HTML4.01 :

文書閲覧

(1999

年

12 月勧告

)

HTML5 :

ー

ン実行環境

(6)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

HTML5

認定資格

• 次世代

Web

キ

向上貢献

HTML5

活用

Web

ーや

Web

ー

ン

設計構築関

体系

知識

キ

備え

HTML5

中立的立場公平

厳正認定

資格制度

• Web

ー

Web

ー

ン

開発者

ーー

ン

Web

開発

や

Web

ー

関わあ

対象

• 多く企業推進

次世代

Web

言語認定資格

HTML5

キ

向上役立

(7)

：試験出題範囲改定

い

・

2017

年

3 月

1 日

出題範囲改訂さ

・出題範囲改訂背景

試験提供

約３年経過

間

HTML5

取巻く環境変化

・適用分野拡大

・部分技術陳腐化

・新技術盛込

・

1 出題範囲一部以下概要

ー

・ーー関連技術関

出題減

⇒

ン系

仕事

方配慮

内容

・

HTML5

何出来

知識や

Web

知識問う質問増や

⇒

認定者対象

Web

ー

意識

内容

・移行措置

・新ー

ン

(Ver2.0)

ー

6 ヶ月間旧ー

ン選択可能

(8)

駆使

Web

ー

ン設計・開発

対応

Web

ンン

HTML5

使

企画・制作

対象

Web

ー

ン

開発者

HTML

ーー

Web

開発者

ン

ー

ーー

ン

対象

Web

ー

ン

開発者

HTML

ーー

Web

開発者

ン

ー

ーー

ン

二

Web

ー

Web

ー

(9)

1

2 資格体系

資格認定者

下記

キ

知識持

Web

あ

証明

● HTML5

使

Web

ンン

作成

こ

● ーー

体験考慮

WEB

ンン

設計・作成

こ

● ー

ンや

組込機器

利用可能様々

対応

ンン

制作

● HTML5

何

うい

技術使う

広範囲基礎知識有

資格認定者

下記

キ

知識持

Web

あ

証明

●動的動作させ高いー

実現

ー

ンー

ー

ン作成

こ

● 対応高

ーン

動作

動的ンン

作成

こ

● 間連携行い

情報提供

ー

ン作成

こ

● API

セキ

理解

うえ開発

こ

出来

所要時間：

90 分

試験問題数：約

60 問

受験料：む

15,000

税抜

認定条件：

HTML5

1 試験合

格

認定有意性期限：

5 年間

所要時間：

90 分

試験問題数：約

40-45

問

受験料：む

15,000

税抜

認定条件：

HTML5

2 試験合

格

有意

HTML5

1 認定

保有

い

認定有意性期限：

5 年間

ン

HTML5

向

ー

HTML5

向

認定名：

HTML5 Level2 (Application Development Professional)

試験名：

HTML5 Level2 Exam

認定名：

HTML5 Level1 (Markup Professional)

(10)

試験方式

• ン

ーーー

(CBT)

• 受験会場・受験日時

全国各地

好

会場や日時自由選択

受

験

• 申込

ソン

VUE

• https://www.pearsonvue.co.jp/Clients/HTML5.aspx

• 出題方式

選択方式

キーー入力問題多少出

題さ

• 出題形式以下

• 知識問題：問題読

解答複数選択肢中

1 い複数選ぶ

• 記述問題：キーー

解答入力

• ー

ー

ン問題

:

示

ー

読解い複数選択肢中

1 い複数解答選ぶ

• 試験時間

90 分

機密保持契約結ぶ時間込

正味

90 分

い

(11)

認定ー

認定証

認定者

名刺用

認定証明

※

ン

(12)

1.HTML5

認定試験概要

1-2. HTML5

資格取得

意義

(13)

今

HTML5

認定試験取得

意義



Web

資格中最求

い理由



い

IT

系ン

最人気あ資格

何

う？



ー

ン

開発方法変化



組込機器

技術浸透

(14)

Web

資格中最求

い理由

既

HTML5

次世代

Web

標準

多く分野活用

い

HTML5

PC/

端末

ー

ン電子書籍端末

ー

車載

ー機器

多く

対応

い

うワンソー・

ー

/

対応

く企業向

Web

や

開発

ー

開発電子書籍ン

ン

制作

HTML5

活用

分野

広

い

LPI Japan

引用

(15)

い

IT

系ン

最人気あ資格

何

う？

株式会社

2015

年

9 月～

11 月行

調

査結果分析紹介

Web

ン

価

値高

ン

＠

IT

告知

Web

ンー

調査期間

2015/9/29-2015/11/2

有効回答数

1,064

件

今回調査

今後取得

いンー

ー

資格

HTML5

認定試験

1 位

LPIC

2 位

現在必要

キ分野いう

く今後伸続

キ分野

HTML5

認定試験

高く評価

い

証いえ

1 位：

HTML5

認定試験

24.2 ％

2 位：

LPIC

20.7 ％

3 位：

UML

ン技能認定

12.8 ％

4 位：

ITIL Foundation

11.7 ％

5 位：

OSS-DB

技術者認定試験

9.5 ％

LPI Japan

引用

(16)

ー

ン

開発方法変化

ネ

言語

Objectiv-C , Swift

Java,

C#

等

OO

言語

HTML/CSS/JavaScript

開発ー

Xcode (iOS)

Android Studio (Android)

Eclipse (Java)

Visual Studio (Windows

他

)

加え

Cordova(PhoneGap), Monaca,

applican, Intel XDX

ー

キ

ー

各種

ー

専用開発ー：

YEOMAN,Visial

Studio, WebStorm Dreamweaver

ー

機能最大

使用

Web

キ

開発

幅広いー

キ

開発

対応

ン

確保最困難

多く機種対応

工数増大

配布

ー

承

認必要

最終的

作

程自由度

く性能通常

劣

機能使用

機能全利用

い

ーン

劣

ー

ーー見え

近年ネ

ワー

高速化

ー

高速化

実装充実

優位性増大

い

*

製品名等例示

全

く

推奨意味

あ

(17)

組込機器

ｅｂ技術浸透

• 組込機器

PC

やーー

ー

ン

一般

ン

ーー形態

いい機器

ン

ーー内蔵

い物総称最近自

動車家電工作機器航空機

あ

機器

CPU

使用さ

い

• _最近

_既

_ｅｂ端末

_い

• IoT (Internt of Things)

搭載

出

(18)

1.HTML5

認定試験概要

1-3. HTML5

1 範囲概要

(Ver2.0)

章

出題構成各項目概観

受験対策

ー

あ

全

項目言

(19)

1(Ver2.0)

出題構成

主題

項目

重要度

*

1.1 Web

基礎知識

1.1.1 HTTP,HTTPS

1.1.2 HTML

書式

1.1.3 Web

1.2 CSS

1.2.1 ー

基本

1.2.2 CSS

ン

1.2.3 ー

優先順位

1.3 要素

1.3.1 要素属性意味セン

)

1.3.2 要素

1.3.3 ン

要素

10

1.4 ン

Web

ン

1.4.1

1.4.2 対応ー

作成

1.4.3 ー

ン

最適化

1.5 API

基礎知識

1.5.1 ・

系

API

概要

1.5.2 セ系ＡＰ概要

1.5.3 ン

ー系

API

概要

1.5.4 通信系

API

概要

4

8

3 ＊重要度：

試験

各分野

重要度相対値

問題比率

変更

新規

(20)

1.1.1 HTTP,HTTPS

重要度

8 知識問題

記述問題

望

キ

(

概要

)

• HTTP

HTTPS

関

知識有

い

• 時返

く

ーー

意味理解

問題解決

ン

事

主要知識範囲

(

一部

)

• 通信内容や手順

• HTTP

ソ

• URI

• ン

項目

ー

• HTTP

規定

い認証

方式

HTTP

通信概要

HTTP

Web

ーー

HTTP

ン

主

ソ

種類

GET

指定

ソー

取得

POST

ーー

ー

送信

DELETE

指定

ソー

削除

主

ー

意味

200 OK

400 Bad Request

403 Forbidden

(21)

1.1.2 HTML

書式

重要度

9 知識問題

ー

ン問題

望

キ

(

概要

)

• HTML

仕様沿

書式

HTML

ー

記述

事

主要知識範囲

(

一部

)

• HTML

ー

ン情報含文書型宣

言関

記述方法

• 要件合わ

言語ー

文字

ー

符号化方式

• HTML

使用可能文字参照記述方

法

• 内記述方法

(

情報外部

ソー

指定

)

記述問題

HTML5

DOCTYPE

宣言

<!DOCTYPE html>

HTML5

以前例

[HTML 4.01 Transitional]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN">

文字ー

設定例

<head>

<meta charset="UTF-8">

(22)

1.1.3 Web

重要度

6 知識問題

記述問題

望

キ

(

概要

)

• 動的

Web

ンン

技術

知識

• SEO

主要知識範囲

(

一部

)

• Web

ンン

作成

際使う

言語や画像

規格

概要

• Web

関

キ

脅威関

技術概要

• Web

画像

ー

例

BMP

無圧縮保存

PNG

ー可逆圧縮方式半透明可

JPEG

ー非可逆圧縮方式

GIF

256 色以下画像可逆圧縮形式

セキ

脅威例

Web

SQL

ン

:

Web

ー

ン

SQL

文不正

SQL

文注入

MVC

ーキ

ー

:

ソ

設計方法

右

MVC

3 個分割

構造

わ

易く

手法

View

Model

(23)

ン

問題

1 知識問題

HTML5

準拠

HTML

文書記述

DOCTYPE

宣言

以下中

正

い

選

さい

A. <!DOCTYPE html >

B. <!DOCTYPE html>

C. < !DOCTYPE html>

D. <!doctype HTML>

E. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

(24)

1.2.1 ー

基本

望

キ

(

概要

)

• 見やく効率的

ー

記述

複

数

ー

共有

必要

記述適切行う

主要知識範囲

(

一部

)

• HTML

利用

い

ー

指定

際記述方法

• ー

正い

指

定

値指定

際記述

方法

重要度

知識問題

ー

ン問題

記述問題

<!DOCTYPE html>

<html>

<head>

<title>example</title>

<link rel="stylesheet"

href="style.css">

</head>

<body>

<p>CSS example</p>

</body>

</html>

p {

color: red;

}

link

要素：

CSS

読込

style.css

example.html

style

要素：

HTML

内

CSS

記述

example_style.html

<!DOCTYPE html>

<html>

<head>

<title>example</title>

<style>

p {

color: red;

}

</style>

</head>

<body>

<p>CSS example</p>

</body>

</html>

セ

：

HTML

要素ＣＳＳ

適用

指示

style.css

(25)

1.2.2 CSS

ン

重要度

9 知識問題

ー

ン問題

記述問題

望

キ

(

概要

)

• 要件沿

ン

CSS

利用

実現

際

う実現方法適

切判断

仕様沿

正いー

記述

事

主要知識範囲

(

一部

)

• 関

記述方法

• 色背景罫線関

記述方法

• キ

ー

関

記

述方法

• 変形

ー

ン関

記述方法

・

例

<div id="box">

<p>

</p>

</div>

<style>

div#box {

width: 150px;

padding: 10px 10px 10px 20px;

border: 5px solid gray;

margin: 0;

margin-right: 20px;

color: red;

}

</style>

表示

(26)

1.2.3 ー

優先順位

知識問題

ー

ン問題

重要度

2 望

キ

(

概要

)

• HTML

一

要素対

複数記述

対象

事象

衝突

発生

場合

適用優先順位

理解

い

主要知識範囲

(

一部

)

• 外部・内部

ー

ン

ー

指定関

記述場所

優先順位

• 優先順位関

計算方法

CSS

Cascading Style Sheets

頭文字をとったも。

HTML

文脈

文書親子構造従

ー

定義

段階的引継

いく仕組

CSS

優先ー

指定方法

重

!important

最重要

ン

1.0.0.0 id

0.1.0.0 属性

疑似

0.0.1.0 要素疑似要素

0.0.0.1 ・ン

ン

例

:

(27)

1.3.1 要素属性意味セン

)

重要度

10 知識問題

ー

ン問題

記述問題

望

キ

(

概要

)

• HTML

要素や属性

ン

理

解

ンン

意味解釈

適切

HTML

要素や属性使

HTML

ー

ン

主要知識範囲

(

一部

)

• HTML5.1

仕様規定

HTML

要素

属性意味

• ン概念

要素

：実際

中味

属性

：要素付加的情報持

html

要素

:HTML

文書全体表

<html></html>

script

要素

: JavaScript

組込

<script src

=“myjsfile.js”></script>

多数

例

ン作成

際

ン種類指定

場合

<p> <button type="submit">

送信

</button> </p>

・

ー

属性

要素

使用

属性

セ

ン

：区分や区分

意味

<body>,<header>,<nav>,<section>,<article>,<aside>,<address>,

<h1>~<h6>

等形成

(28)

1.3.2 要素

知識問題

ー

ン問題

記述問題

重要度

6 望

キ

(

概要

)

• やー

HTML

ンン

適切活用

主要知識範囲

(

一部

)

• 再生

HTML

ー

知識

• ー

再生

HTML

ー

知識

• ー

知識

• 字幕表示

HTML

ー

知識

video

要素

:

やー

読込再生

audio

要素

:

音楽

再生

source

要素

:

やー

種類場所指定

video

要素

audio

要素子要素

字幕表示

: track

要素

字幕やキ

ン表示可

例

)

<video controls>

<source src

ち“HへMばす

.mp4" type="video/mp4">

<source src

ち“HへMばす

.webm" type="video/webm">

<p>

使い

5 HTML

再生

</p>

</video>

注

)controls

再生ン

ー

表示

属性

場合

再生

ー

見

時点再生始

video

要素

抜

(29)

1.3.3 ン

要素

重要度

7 知識問題

ー

ン問題

記述問題

変更

望

キ

(

概要

)

• ーー操作伴う

HTML

要素効果的

活用

主要知識範囲

(

一部

)

• ーン

• ー

• ンキ

ー

• ー

ー

• ン

ー

ーー追加詳細情報提供

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>

ン

要素

</title>

</head>

<p>

ー

使用

要素

</p>

<details>

<summary>

要素内容

</summary>

<p>detail

要素

summary

要素

</p>

</details>

</html>

(30)

ン

問題

2 記述問題

下記

HTML

p

要素色赤

い

入要素

記述

い

A

B

A

B

(31)

ン

問題

3 <div id="box">

<p>

</p>

</div>

<style>

div#box {

width: 150px;

padding: 20px 20px 20px 20px;

border: 5px solid gray;

margin: 0;

margin-right: 20px;

color: red;

}

</style>

ー

ン問題

右記示

い

id

名

box

div

要素幅選

い

A. 150px

B. 175px

C. 180px

D. 200px

E. 220px

(32)

1.4.1 対応ー

作成

重要度

4 知識問題

ー

ン問題

記述問題

望

キ

(

概要

)

• う画面

あ

ン仕様

う

ー

実現方法理解

い

• 対応

ー

作事

主要知識範囲

(

一部

)

• 対応ー

作成

際考慮

点

• ン

Web

ン

ー構成要素配置手法

• ン

Web

ン

画

像扱い

ー

ン

画面幅比率要素記述

手法

Viewport

ー

ン

機器

画面幅指定

機能

<p class

=“one

-fourth">

フルードデザインされたスタイル

</p>

<p>

フルードデザインされないスタイル

</p>

<style>

.one-fourth {

width: 25%;

background-color: silver; border: 1px; solid red;

}

</style>

(33)

1.4.2 重要度

知識問題

ー

ン問題

記述問題

望

キ

(

概要

)

• 利用

画面

様々環境合わ

表示

変え

ー

作成

事

主要知識範囲

(

一部

)

• 特性指定

正い構文条件毎適用

切替え場合記述

• ー発生

際

ーン

ン

関

記述

特性基表示方法変化

手法

例

screen

一般的

braille

点字

print

印刷用

ン

tv

表示用

<p>

ーン幅

600 以下

文字赤く

</p>

<style>

@media screen and (max-width: 600px) {

p {color:red}

(34)

1.4.3 ー

ン

最適化

重要度

3 知識問題

ー

ン問題

記述問題

望

キ

(

概要

)

• ー

ン

Web

ンン

閲

覧

時考慮

回線速度

ー

ン特有環境

快適閲

覧

事

ンン

設計・

開発

事

主要知識範囲

(

一部

)

• ー

ン

画像扱い

• ー

ン特有設定

い

注意

点

• ー

ン

閲覧

際

ーン向上技術

・

セ比

PC

用

ー：

=CSS

高解像度

ー

ン

：

CSS

2:1

あ

PC

用

高解像度

用

1

(35)

1.5.1 ・

系

API

概要

新規

重要度

5 知識問題

記述問題

望

キ

(

概要

)

• やー

活用

知

識有

具体的何

理

解

い

• 適切

扱う

基礎

知識有

適切技術選択

• 組合わ

何

理解

い

主要知識範囲

(

一部

)

• API

提供

機能

• ーン

• DRM

• 知識

• ー

知識

MPEG-DASH

Dynamic Adaptive Streaming over HTTP)

• HTTP

使

動画配信

規格

• 様々機器対

動画途切

いう帯域

環境

応

ー

切替え最適高品質

ー

提供

• 2012

年

4 月

(ISO/IEC 23001-6) ,2014

年

5 月

(ISO/IEC 23009-1:2014)

• 従来技術

下記あ

互換性

い

Apple: HTTP

ーン

HLS

Microsoft:

ー

ーン

(

SS

)

Adobe: HTTP

ーン

(

HDS

)

DRM

(Digital Rights Management)

• ンン

利用や複製制限

設

(36)

1.5.2. セ系ＡＰ概要

新規

重要度

4 知識問題

記述問題

望

キ

(

概要

)

• ー

ンやソン備え付

い

ンー

関

技術理解

JavaScript

API

使

何

理解

い

主要知識範囲

(

一部

)

• 位置情報

• 加速度ンー

•

• 入力

Geolocation API:

ーー位置情報扱う

ＡＰＩ

Touch Events

：

面

接触状態変化発生

ン

ソ

機能概要

getCurrentPosition()

現在位置情報１回

取得

watchPosition()

位置情報定期的取得

celarWatch()

位置情報監視

• 取得

位置情報

緯度経度高度緯度経度

精度高度精度方角速度あ

touchstart

面

わ

touchmove

面

(37)

1.5.3 ン

ー系

API

概要

変更

重要度

8 知識問題

記述問題

望

キ

(

概要

)

• JavaScript

ー

ー内保

存

仕組

ン

ー

ン最新

ン

処理

仕組

理解

Web

ー

ン

何可能

理解

い

主要知識範囲

(

一部

)

• ー

ー

仕組

• ン

ー

ン必要知識

• ン処理関

知識

Web Workers

• ー

ン

処理行わ

仕組

Web

ー

種類

名称

主特徴

Cookie

一あ

4KB

文字列

Web Strage

ー

2MB

～

4MB,

ン

ー

2MB~

文字列

Indexed Database

JavaScript

保存

容量無制限

ー

ンキ

• ン

ー

ン実現

仕組

(38)

1.5.4 通信系

API

概要

新規

重要度

3 知識問題

記述問題

望

キ

(

概要

)

• JavaScript

通信

使

通信

仕組

特性

理解

利用ーン応

適切

API

選択

主要知識範囲

(

一部

)

• AJAX

• 双方向ー

通信

• ーー

XMLHttpRequest

• ン

ーー

ー

や取

可能

API

ー

全

送信

く

部分的

ー

や

取

ー

表示変え

出来

WebSocket API

• ー間

ン

通信

ン開

く

可能

API

ー

ン

一度

ン行

後

必要通信全

ン上

専用

用い行う

Server-Sent Events

• ーー側何

出来事起

(39)

1.HTML5

認定試験概要

(40)

学習方法

• 過去問非公開

HTML/CSS

詳い方

試験傾向

認定書籍必須

• 試験

暗記や

必要こ

手動

こ

近道

• 合格

ン約

70%

満点取必要あ

せ

わ

い項目残

70%

難い思わ

• 公開さ

い試験範囲項目理解

く

受験決

や

Web

有

?

練習問題

ー

?

認定書籍読

ー

書い確

練習問題行う

い

いいえ

HTML5

認定校

ー

受け

受験

い

いいえ

試験

勉強

下記

う

あ

・

LPI-Japan HTML5

認定校

ー

受け

・

LPI-Japan

認定書籍読

演習問題解く

(41)

LPI-Japan HTML5

認定校

(42)

• LPI Japan

認定

書籍

(43)

実習必要

ー

1. HTML/CSS

記述

キ

直接

HTML/CSS

ー

2. HTML/CSS

実行

開発ー

ー

挙動

分

易く

• Visual Studio Code (

ソ

)

• Atom

https://atom.io/

• Text

他多数

• emacs

• vi

開発者ー

呼出方

Chrome

ー内右

->

検証

F12

キー

Firefox

ー内右

->

要素調査

F12

キー

Safari

ーー

開発

->

web

ン

表示

(

ーー開発

い場合

Safari->

環境設定

ーー

”

開発“

ー表示

)

(44)

LPI Japan

活用

う

http://www.html5exam.jp/

試験

試験範囲

ン

問題

無料セ

ー

HTML5

道場

http://html5exam.jp/outline/objectives_lv1_v2.html

http://html5exam.jp/measures/sample.html

http://html5exam.jp/news/event/

(45)

学習役立

MOZZILA DEVELOPER NET

ORK

http://caniuse.com/

・

Web

技術関

情報

tutorial

・

ー実装状況わ

(46)

2. 項目解説

(47)

CSS

ー

• HTML

DOM(

キ

ン・

・

親子構造持

別言葉言う

HTML

文書階層化

木構造持

要素集合体

ー

いう考え方親指定

CSS

段階的子引継

いく

親指定

いい子要素指定

必要

く便利

例

)

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title> CSS

ー

</title>

</head>

<body>

<p>

CSS

ー

説明

</p>

<p> p

要素

定義

く

上位

body

要素指定引継

</p>

</body>

<style>

body {

color: blue;

}

左記

ー

以下

う木構造

html

head

body

p

head

color:blue

(48)

CSS

ー

要素セ

<style>

body {

color: blue;

}

</style>

前例

body

いう要素

CSS

指定

(49)

要素セ

別例

<div>

<p>

名前

<input type="text" > </p>

<p>

住所

<input type="text" > </p>

<p>

電話番号

<input type="tel" > </p>

</div>

<style>

div{

color:red;

}

</style>

左記

ー

電話

番号

色変え

いう

右

う方法あ

div

p

親子

関係利用

方法

<div>

<p>

名前

<input type="text" > </p>

<p>

住所

<input type="text" > </p>

</div>

<p>

電話番号

<input type="tel" > </p>

<style>

div p{

color:red;

}

(50)

主要素セ

例

名前

記法

機能

全数

* (

)

全

HTML

要素対

適用

子孫

ー区切

例

) h1 p

場合

h1

親持全

p

適用

直近子要素

>

子孫

親子間何あ

良い

場合直下あ子要素

逆

( < )

い

隣接

兄弟

要素

+

例

) h3+p

場合

h3

要素次あ

p

要素

適用

後続

兄弟

(51)

指定

ほ

電話番号例

DOM

木構造変化

色変えい

本来

CSS

目的

HTML

構造

別表示指定

あ

避

<div>

<p>

名前

<input type="text" > </p>

<p>

住所

<input type="text" > </p>

<p class="telno_class">

電話番号

<input type="tel" > </p>

</div>

<style>

p.telno_class {

color:blue;

}

div p{

color:red;

}

</style>

• 場合色指定

い要素

名指定

方法

指定

• CSS

前

.(

)

名書く

(52)

id

セ

指定似

id

あ

<div>

<p>

名前

<input type="text" > </p>

<p>

住所

<input type="text" > </p>

<p id="home_telno">

電話番号

<input type="tel" > </p>

</div>

<style>

p#home_telno {

color:green;

}

div p{

color:red;

}

</style>

(53)

指定

id

セ

違い

(1/2)

同

HTML

文書いくあ

良い

id

1 い

<div>

<p>

名前

<input type="text" > </p>

<p>

住所

<input type="text" > </p>

<p class="telno_class">

自宅電話番号

<input type="tel" > </p>

<p class="telno_class">

携帯電話番号

<input type="tel" > </p>

<p class="telno_class">

会社電話番号

<input type="tel" > </p>

</div>

<style>

p.telno_class {

color:blue;

}

div p{

color:red;

}

</style>

(54)

指定

id

セ

違い

(2/2)

<div>

<p>

名前

<input type="text" > </p>

<p>

住所

<input type="text" > </p>

<p id="home_telno">

自宅電話番号

<input type="tel" > </p>

<p id="cel_telno">

携帯電話番号

<input type="tel" > </p>

<p id="office_telno">

会社電話番号

<input type="tel" > </p>

</div>

<style>

p#home_telno {color:green; }

p#cel_telno {color:blueviolet}

p#office_telno {color:grey}

div p{

color:red;

}

</style>

id

同一

HTML

文書

1 い

但同

id

複数作成

複数適用

多い

混乱

元

う使い方

(55)

属性セ

(1/2)

一般的

上記

や

id

開発者作成

使用

CSS

適用

要素指定

HTML

定義

い属性指定

CSS

適用

出来

<div>

<p>

客様情報入力

く

い

ン色必須入力

</p>

<p title="mustfill">

名前

<input type="text" required> </p>

<p>

住所

<input type="text" > </p>

<p>

自宅電話番号

<input type="tel" > </p>

<p title="mustfill">

携帯電話番号

<input type="tel" > </p>

<p class="telno_class">

会社電話番号

<input type="tel" > </p>

</div>

<style>

p.telno_class {color:blue;}

div p{ color:red; }

p[title]{ color:orange; }

</style>

(56)

属性セ

(2/2)

前例

title

いう属性

使用

他

以下

う属性指定方法あ

記法

機能

使用例

=

属性特定値合致

場合

適用

上記例

p[title="mustfill"]

^=

属性指定文字列始

要素

適用

p[href^="http://"]

え

http

色変

$=

属性指定文字列終わ要素

適用

p[href

色変え

$ち“げァよりナめ

PDF

*=

属性値指定文字列含

い場合

適用

p[href

ン

*ち“ばPIナめ

色変え

LPI

文字入

(57)

ン

個別要素中

指定記述

方法

適用

要素

<div>

<p>

客様情報入力

く

い

ン色必須入力

</p>

<p>

ン

ー

黒

ー

指定

い

</p>

<p title="mustfill">

名前

<input type="text" required> </p>

<p>

住所

<input type="text" > </p>

<p>

自宅電話番号

<input type="tel" > </p>

<p style="color:black; font-weight: bold" title="mustfill">

携帯電話番号

<input

type="tel" > </p>

<p class="telno_class">

会社電話番号

<input type="tel" > </p>

</div>

<style>

p.telno_class {color:blue;}

div p{ color:red; }

(58)

!important

最優先度高く

!important

全

優先

く使う

い

<div>

<p>

客様情報入力

く

い

ン色必須入力

</p>

<p title="mustfill">

名前

<input type="text" required> </p>

<p>

住所

<input type="text" > </p>

<p>

自宅電話番号

<input type="tel" > </p>

<p title="mustfill">

携帯電話番号

<input type="tel" > </p>

<p class="telno_class">

会社電話番号

<input type="tel" > </p>

</div>

<style>

p {color: black !important}

p.telno_class {color:blue;}

div p{ color:red; }

(59)

疑似要素

例

)

<div>

<p>200</p>

</div>

<style>

p::after{

content: "

円

";

font-size: 1.0em

}

</style>

疑似要素

キ

ン

特定

ー

付

例え

::after

疑似要素

指定

要素後

追加

(60)

疑似

疑似クラス

選択

要素対

特定状態指定

例え

:hover

疑似

選択

要素上

ーソ

あ

適用

<div>

<p>

乗

色赤変わ

</p>

</div>

<style>

p:hover{

color: red;

}

</style>

• こ例

p

要素上

来

色変わ

• 他

:link

:visited

:active

:focus

:first-child

:last-child

:target

:enabled/deisabled

多数

試験範囲

1.2.1 ー

基本

(61)

優先順位必要性

ー

• 実際開発

複数

ーー存在

• 別場所自分指定上書さ

想定外指定引継

• 優先度理解必要

うえ複雑

いう仕掛け重要

CSS

優先ー

指定方法

重

!important

最重要

ン

1.0.0.0 id

0.1.0.0 属性

疑似

0.0.1.0 要素疑似要素

0.0.0.1

• CSS

指定最後指定さ

優先さ

上書

但下記優先ー

重

桁変わ

優先さ

一般論

指定範囲狭

(62)

ン

問題

4 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>

ン

問題

4 </title>

</head>

<div>

<p>

名前

<input type="text" > </p>

<p>

住所

<input type="text" > </p>

<p class="telno_class">

自宅電話番号

<input type="tel" > </p>

<p class="telno_class">

携帯電話番号

<input type="tel" > </p>

<p class="telno_class" id="company">

会社電話番号

<input type="tel" > </p>

</div>

<style>

p#company{ color:green; }

p.telno_class { color:blue; }

div p{ color:red; }

</style>

</html>

左記

HTML5

ー

実

行

場合

会社電話番

号

何色

正い

選

さい

A. 黒

B. 赤

C. 緑

D. 青

(63)

ン

問題

5 左記

HTML5

ー

実行

場合

2017/04/05

何色

正い

選

さい

A. 黒

B. 赤

C. 緑

D. 青

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>

ン

問題

5 </title>

</head>

<div>

<p>

名前

<input type="text" > </p>

<p>

住所

<input type="text" > </p>

<p class="telno_class">

自宅電話番号

<input type="tel" > </p>

<p class="telno_class">

携帯電話番号

<input type="tel" > </p>

</div>

<h3>CSS

ー

</h3>

<a>

本日

</a>

<a> 2017/04/15</a>

<style>

p.telno_class { color:blue; }

div p{ color:red; }

h3+a{ color:green;}

</style>

</html>

(64)

2. 項目解説

(65)

ン

Web

ン

ー

PC

ー中心あ

携帯電話出く

携帯電話用

PC

用

別作成

い

ー

ン

PC

用

ー

表示

全く同一いうわ

い

対応

Web

ー

制作方法

手法概要

特徴

ン

CSS

ー

調

整

HTML/CSS

同一

名

毎

HTML

振分

方法

同

別

HTML/CSS

作成

PC

用

ー

ン用別

作成

方法

全く別

作成

・

方法

・

あ

通常業務用

ン

ン主流

(66)

ン

ｅｂ

ン実現

要素

ン

ｅｂ

ン実現

技術要素

以下

あ

•

• ー

ー

• Viewport

• CSS

(67)

• 特性

利用

ー

適

用条件決定

一以上式

• 特性

幅高

色数

あ

• ンン

変更

出力

合わ

ンン

表現

all

braille

点字用

embossed

点字用

ンー

handheld

ン

print

ン

projection

ー

screen

PC

通常

speech

音声読上

tty

キ

端末

(

ン

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

HTML5

認定試験

1

ン 解説無料セ

ー

2017

年

4

月

LPI Japan

主催

講師：伊藤

眞

1.HTML5

認定試験 概要

1-1. HTML5

試験

1-2. HTML5

資格 取得

意義

1-3. HTML5

1

範囲 概要

(Ver2.0)

1-4.

受験 向け 学習方法

2.

項目解説

2-1. 1.2.3 CSS

ー

2-2. 1.4

ン

ｅｂ

ン

2-3. 1.5.1

・

系

API

概要

HTML

ｐ ｒ

ｒ

ｐ

ｎｇ

ｇ

複数 文書 相互 関連付け 結 付け

仕組

hyper

いう

キ

超

え

いう意味

文書

… ..XYZ…

…

……..

……..

XYZ

……

….ABC….

………….

ABC

ABC

…..

……..

………..

視覚表現や文章構造

記述

言語

“

Markup

ナ いう語 英語圏 出版業界 著者 編集者

印刷者 間 指示 伝え 方法 意味

い

<!DOCTYPE HTML>

<h1>

1

見出

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

ン解説無料セ

認定試験概要

資格取得

範囲概要

受験向け学習方法

ｐｒ

複数文書相互関連付け結付け

ナいう語英語圏出版業界著者編集者

印刷者間指示伝え方法意味

言語例

ーキ

向上貢献

ーや

設計構築関

中立的立場公平

厳正認定

ーー