20160618_HTML5プロフェッショナル認定試験レベル1 技術解説セミナー in OSC北海道2016

© LPI-Japan 2015. 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/
HTML5プロフェッショナル認定試験
レベル1 ポイント解説無料セミナー
LPI-Japanパートナーインストラクター
鯨井貴博(Zeus IT Camp)
2016年6月18日(土) in OCS2016Hokkaido
(札幌コンペンションセンター)

2
Linux・Networkの基礎から、
現場経験を活かしたトラブルシュートまで幅広い講義を行います！
[プロフィール]
LPIC レベル3・情報処理技術者資格などを保有し、
現場ではネットワーク構築・海外メーカー国内一次代理店でのテクニカルサポート業務を経験。
講師として自身がIT未経験から学んできた経験を交えた講義を行っている。
又、LPI-Japan認定トレーナー、オープンソース技術開発研究所、日本Nginxユーザー会としても活動
中。
[保有資格]
HTML5プロフェッショナルレベル1
ACCEL（Apache CloudStack技術者認定資格 by LPI-JAPAN）
LPIC レベル3 Core(301)
LPIC レベル3 Mixed Environment(302)
LPIC レベル3 Security(303)
LPIC レベル3 Virtualization & High Availability(304)
情報セキュリティスペシャリスト/情報セキュリティマネジメント
応用情報処理技術者/基本情報処理技術者
MCP Microfoft Windows Server 2008 Active Directory
ITIL Foundation
CCNA
MOS2010(word,excel)
HTML5プロフェッショナル認定試験レベル1
Zeus It camp @ZeusITCamp BLOG http://opensourcetech.hatenablog.jp/

3
本日のアジェンダ
⓪HTML5を使用したサイト
①HTML5レベル1の試験概要
②HTML5レベル1を学習する上でのポイント
③技術解説
④サンプル問題
⑤お知らせ
⑥質疑応答

4
⓪HTML5を使用したサイト

5
これから紹介するサイトが、
HTML5によって作られています！
http://helloracer.com/webgl/
http://craftymind.com/factory/html5video/CanvasVideo.html
http://andrew-hoyer.com/experiments/cloth/
http://alteredqualia.com/canvasmol/#Capsaicin
http://www.thewildernessdowntown.com/

6
①HTML5レベル1の
試験概要

7
試験概要
HTML5,CSS3,Javascriptなど最新のマークアップに関する技術力と
知識を、公平かつ厳正に、中立的な立場で認定する認定資格です。
試験時間： 90分
出題数：約60問
出題形式：選択/記述
受験費用： 15,000円(税別)

8

9
出題範囲
1.1 Webの基礎知識
(HTTP、HTML、サーバ&ネットワーク、Web関連技術)
1.2 CSS3
(スタイルシート、CSSデザイン、カスケード)
1.3 要素
(HTML4.01以前・HTML5での要素/属性等)
1.4 レスポンシブWebデザイン
(マルチデバイス対応、メディアクエリ等)
1.5 オフラインWebアプリケーション
(概要とマニュフェスト)
※ 詳細は、http://html5exam.jp/outline/objectives_lv1.htmlをご確認下さい。

10
HTML5プロフェッショナル認定試験は、
サーバエンジニア・Webデザイナー・データベースエンジニアなど
多くに人が学んでほしい試験と思います。
なぜなら、
Webサーバ・HTMLやCSS・データベースは、
ブラウザからの操作を日常的に使用する現代社会においては、
相互に強く連携しあうものだからです！

11
Linux
Network
Security
HTML5
Linux Security
Network

12
②HTML5レベル1を学習する上での
ポイント

13
HTMLを書いてみる
CSSでデザインをしてみる
様々なホームページのソースを見まくる
まさに、使ってみること！

14
学習教材
LPI-Japan認定教材アカデミック認定校
http://html5exam.jp/measures/textbook.html http://html5exam.jp/measures/learning.html

15
他の技術解説セミナー資料等も参考にする
http://html5exam.jp/news/event/
HTML5メールマガジンで定期的の情報を入手する
https://www.lpi.or.jp/html5exam/html5exam_mail/mail.php

16
サンプル問題でテスト対策
http://html5exam.jp/measures/sample.html

17
合格者の声を参考にする
http://html5exam.jp/merit/success.html
Web系勉強会などに参加し、
一緒に学べる仲間を探す！
【#TechBuzz】HTML5+JS勉強会(https://atnd.org/groups/html5)
html5j(http://html5j.org/)

18
③技術解説

19
HTML5とは、
2014年10月28日にW3Cによる勧告がされたHTMLフォーマット。
以前のHTMLでは実現することが難しかった機能(描画、位置情報利
用など)をAPI(Application Programming Interface)として定
義し、JavaScriptから利用出来るなどしたもの。
つまりは、より自由度が増した！！
w3c(World Wide Web Consortium)
http://www.w3.org/TR/html5/

20
1.Webの基礎知識

21
• HTTPによる通信
ブラウザ(クライアント) Webサーバ
Syn
Syn・Ack
Ack
Fin
Ack
Fin
Ack
TCP通信の開始(TCP 3way handshake)
TCP通信の切断
HTTP Request
GET /html5 / HTTP1.1
HTTP Response
HTTP/1.1 200 OK

22
• HTTP Request Method
メソッド名説明
GET HTTPリクエストURIで指定されたリソース取得
POST Webサーバへのデータ送信・追加
HEAD HTTPヘッダのみを取得
PUT 指定したリソースの保存
OPTIONS Webサーバのサポートしているメソッド情報などを取得
DELETE 指定したリソースの削除
TRACE ループバック試験に使用
CONNECT プロキシへSSLトンネリングなどを要求

23
• HTTP Status Codes
ステータスコードメッセージ説明
1XX Informational 情報
100 Continue 継続
2XX Successful 成功
200 OK リクエスト成功
3XX Redirection リダイレクション
301 Moved Permanently リソースが恒久的に移動
4XX Client Error クライアントエラー
401 Unauthorized 認証が必要
403 Forbidden アクセス出来ない
404 Not Found リソースが存在しない
5XX Server Error サーバエラー
500 Internal Server Error サーバ内部エラー
参照元：http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

24
パケットキャプチャなどのツールから
メソッドやステータスコードは確認出来る。

25
• URL(Uniform Resource Locator)の構成要素
URLとは、インターネット上のリソースの場所を示す文字列である。
スキーム名://ドメイン名:ポート番号/ファイルパス?クエリ文字列#フラグメント識別子
スキーム名(http、ftp、fileなど)
ドメイン名(kujiraitakahiro.comなど)
ポート番号(80、443など)
ファイルパス(index.htmlなど)
クエリ文字列(x=abcde)
フラグメント識別子(xxx)
http://kujiraitakahiro.com:80/index.html?x=abcde#xxx
また、似たようなものであるURI(Uniform Resource Identifier)とは、
インターネットに限らずリソースの場所を示す文字列である。

26
• その他、重要なキーワード
Basic認証/Digest認証
HTTP cookie
HTTPヘッダー
SSL/HTTPS

27
2.要素

28
①HTML4.01以前の要素及び属性
<HEAD> <TITLE> <BASE> <META> <BODY> <DIV>
<H1>~<H6>
<P> <BR> <PRE>
<TR> <TD> <TH>
<LINK>
<FORM> <INPUT>
id属性、lang属性など
⇒試験ではこれらお馴染みのものについても、
しっかり把握しておく必要がある。

29
②HTML5で追加された要素及び属性
<section> <article> <aside> <hgroup> <header> <footer>
<nav> <figure> <figcaption>
⇒文書構造化の為に追加
<canvas> <audio> <video> <source> <track> <embed>
<mark> <progress> <meter> <time>
⇒描画、動画/音声再生、外部アプリ埋め込み等の為に追加
<ruby> <rt> <rp> <bdi> <wbr>
⇒ルビやテキスト表示の為に追加

30
<command> <details> <summary> <detalist>
<keygen> <output>
input要素のtype属性
(tel/search/url/email/datetime/date/month/week/time/
datetime-local/number/range/color)
style要素のscoped属性
html要素のmanifest属性
data-*属性

31
• 文書構造化(セマンティック)とは？
<header>
<article>
<article>
<footer>
<aside>
記事1
記事2
ヘッダー
フッター
サイドバー
<div id=“header”>
<div id=“footer”>
<div id=“content1”>
<div id=“content2”>
<div id=“side”>
ブログをイメージすると
わかりやすいかも!

32
• Videoタグ(使用する属性による違いを見てみましょう！)

33
<!doctype htlm>
<head>
<meta charset="utf-8" http-equiv="content-type" lang="ja">
<title>videoタグのテストページ</title>
</head>
<body>
<h2>Zeus IT Camp Ginzaから見た東京駅方面</h2>
<video src="ginza.mp4" height="576" width="1024" controls>

</body>

34
• ルビタグ(使用する属性による違いを見てみましょう！)
<ruby>鯨<rt>くじら</rt></ruby><ruby>井<rt>い</rt></ruby>

<ruby>鯨井<rt>くじらい</rt></ruby>

35
• canvasタグ
様々なメソッドを使用して、線や円などの描画を行うことが出来る。
では、早速実際にやってみましょう！！

36
③HTML5で廃止された要素及び属性
<basefont><big><center><font><strike><tt>
⇒CSSで扱えばいいので廃止
<frame><frameset><noframes>
<acronym><applet><isindex><dir>
⇒あまり使用されていなかったり、使いやすさの為に廃止
link要素のtarget属性
html要素のversion属性
caption/iframe/img/input/object/ledgendなどの要素のalign属性
body要素のbackground属性
td/th要素のheight/nowrap属性
hr要素のsize属性
など

37
3.CSS3

38
CSSとは、
Cascading Style Sheetsの略で、
HTML(Hyper Text Markup Language)で書かれた内容に対して
どのような飾りつけ(画像の大きさや幅・幅や文字の装飾など)を
行うかという仕様。

39

40
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSSのサンプル</title>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<h1 id="first">CSSのサンプルページ</h1>
<div class="second">ここはdivタグで表示されている部分です</div>
</body>
</html>

41
index.css
h1#first{
color:red;
text-decoration: underline;
}
div.second{
background:orange;
width:1000px; height:100px;
padding:5px;
border-color:brown;
border-style:solid;
border-width:7px; border-radius:30px;
box-shadow:10px 10px 10px darkorange;
text-align: center;
font-size: 30px;
font-style: italic; font-weight: bold;
color: blue;
}
・・・文字色・アンダーラインで装飾
・・・boxのサイズや背景色指定
・・・boxの境界/面取り/影を指定
・・・フォントに関する装飾

42
スタイルシートの使い方1
head要素やbody要素内のstyle要素にCSSを書く
<html>
<head>
<style type=“text/css”>
p { color: red;}
</style>
</head>
…,
<html>

43
link要素にて外部のCSSを読み込む
<html>
<head>
<link rel=“stylesheet” href=“index.css” type=“text/css”>
…,
</head>
…,
</html>

44
@importを使用し、CSS内から外部CSSを読み込む
@import url(“index.css”);
各要素のstyle属性でスタイルを指定
<p style=“color: red;”>
Test Message
</p>

45
CSSの書き方
セレクタ { プロパティ: 値; }
例： p { color: red; }
セレクタ・・・・・p要素を指定
プロパティ・・・・セレクタにおける変更部の指定
値・・・・・・・・プロパティの変更内容

46
4.レスポンシブWebデザイン

47
レスポンシブWebデザインとは、
デバイスや画面表示の大きさによって、
CSSを切り替える。
など

48
表示するデバイス等の
大きさによって、
画像サイズを最適化！！

49
実際のWebぺージで見てみると、
こんな感じです！
http://www.muji.com/jp/

50
Galaxy S3 SC-06D(720×1,280)
Galaxy Tab S 8.4 SC-03G(1,600×2,560)
iPhone6(1,334×750)
iPone6s Plus(1,920×1,080)
ARROWS NX F-04G(1,440×2,560)
4K(4,096×2,160)
しかし、最適化を行う為にはデバイス等の解像度について知っておく必要がある！

51
<!doctype html>
<html>
<head>
<meta=charset="UTF-8">
<title>Pictures Test</title>
<link rel=“stylesheet” media=“all” href=“small.css”>
<link rel="stylesheet" media="all" href="middle.css">
<link rel="stylesheet" media="all" href="large.css">
<link rel=“stylesheet” media=“all” href=“xlarge.css”>
</head>
<body>
<img src=1200_400.png id="picture1"><br>
<img src=900_300-1.png id="picture2"><br>
<img src=900_300-2.png id="picture3"><br>
<img src=600_200.png id="picture4"><br>
</body>
</html>

52
small.css (幅640pxまで)
@media screen and (max-width: 640px){
img#picture1 { max-width: 50%; height: auto; }
}
middle.css (幅640px〜900pxまで)
@media screen and (min-width: 640px) and (max-width: 900px){
}

53
large.css (幅1200pxまで)
}
xlarge.css (幅1920pxまで)
}

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

55
アプリケーションキャッシュとは、
オフラインでもローカルに保存されたファイルから
Webアプリケーション等が利用できる仕組みのこと。
サーバ負荷軽減や起動の高速化の効果もあり！
マニフェストファイルとは
どのファイルをキャッシュするかを指定する為のもの。

56
マニフェストファイルのセクション
CACHE MANIFEST
⇒1行目に必ず書くと決まり
CACHE
⇒キャッシュするファイルを記述、省略可
FALLBACK
⇒URLからリソースが取得出来ない場合などに利用される代替ファイルを指定
NETWORK
⇒必ずネットワークから取得するファイルを指定

57
HTML内でマニフェストファイルを指定
(html要素でmanifest属性を指定)
マニフェストファイルでは、
キャッシュするファイル名を記載

58
各ブラウザでは、オプションメニューなどからキャッシュ状況を確認可！

59
Firefoxでは、URL欄に「about:cache」とすれば、
具体的なキャッシュされているデータが確認可！

60

61
④サンプル問題

62
サンプル問題1
HTML5のコンテンツ・モデルにおいて、
セクショニング・コンテンツである要素の組み合わせで適切なものはどれか。
正しいものを1つ選びなさい。
A.h1 h2 h3 h4 h5 h6
B.footer header main section
C.blockquote body fieldset figure td
D.article aside nav section
正解は、
正解 D

63
サンプル問題2
Data URIについての解説で誤っているのを選択してください。
A.主にWebサイト表示の高速化のための技術である
B.画像ファイルなど、HTMLファイルの外にあるファイルの場所を指すURIである
C.画像データのエンコードはBase64形式で行なわれる
D.ブラウザによって対応状況に差がある
E.HTML、CSSで使用できる
正解は、
正解 B

64
サンプル問題3
Web制作においてCSSの設定が複雑化し、ともすれば破綻しかねないケースがある。
近年、Web制作のシーンでCSSを効率的に運用するための、
運用・管理・命名規則などのルールや指針がいくつも発表されている。
次の中で、CSSの効率的な運用方法のルール・指針と最も関係が薄いものはどれか。
1つ選びなさい。
A.SMACSS
B.DOM
C.OOCSS
D.BEM
正解は、
正解 B

65
サンプル問題4
次のlink要素のうち、style.css を正しく読み込む書き方をしているものはどれか。
A.<link href="style.css">
B.<link href="style.css" type="text/css">
C.<link rel="stylesheet" href="style.css">
D.<link rel="stylesheet" href="style.css" type="text/css">
E.<link rel="stylesheet" href="style.css" type="text/plain">
正解は、
正解 C,D

66
サンプル問題5
HTML5で「長万部」という漢字にルビをふる際のマークアップとして
文法的に正しくないものをすべて選びなさい。
A.<ruby>長万部<rt>おしゃまんべ</ruby>
B.<ruby>長万部<rt>おしゃまんべ</rt></ruby>
C.<ruby>長万部<rp>（</rp><rt>おしゃまんべ</rt><rp>）</rp></ruby>
D.<ruby><rb>長万部<rp>（<rt>おしゃまんべ<rp>）</ruby>
E.<ruby><rtc><rb>長万部</rb><rt>おしゃまんべ</rt></rtc></ruby>
正解は、
正解 E

67
サンプル問題6
次の要素のうち、セクションを示す要素ではないものはどれか。
A.nav
B.main
C.aside
D.article
E.section
正解は、
正解 B

68
サンプル問題7
スマートフォンでホーム画面にWebページへのリンクを作成する場合に、
アイコンとして使用される画像を指定するrel属性を二つ選びなさい。
A.apple-touch-icon
B.touch-icon
C.apple-touch-icon-precomposed
D.touch-icon-precomposed
正解は、
正解 A,C

69
サンプル問題8
メディアクエリの記述として、間違っているものを１つ選びなさい。
A.@media screen and (color) { ... }
B.@media screen or (color) { ... }
C.@media screen and (color), projection and (color) { ... }
D.@media not screen and (color) { ... }
E.@media only screen and (color) { ... }
正解は、
正解 B

70
サンプル問題9
キャッシュマニフェストファイルで、
必ずネットワーク経由でアクセスするリソースを記述するセクションは
次のうちどれか。正しいものを一つ選択しなさい。
A.CACHE
B.NETWORK
C.FALLBACK
D.ONLINE
E.NOCACHE
正解は、
正解 B

71
サンプル問題10
オフラインウェブアプリケーションにおけるマニフェストファイルに関する
記述として、間違っているものを１つ選びなさい。
A.一行目には、「CACHE MANIFEST」と記述する必要がある。
B.#から始まる行はコメントとなる。
C.対象ファイルとして拡張子が.html .html .cssのファイルのみ指定可能である。
D.CACHE、FALLBACK、NETWORKの３つのセクションが存在する。
E.マニフェストファイルは、通常Webサーバ上に配置する。
正解は、
正解 C

72
⑤お知らせ

73
詳しくは、http://www.zeus-enterprise.co.jp/

74
https://www.it-camp.jp/

75

76

77
⑥質疑応答

78
Open the Future with HTML5.

20160618_HTML5プロフェッショナル認定試験レベル1 技術解説セミナー in OSC北海道2016

More Related Content

What's hot (20)

Similar to 20160618_HTML5プロフェッショナル認定試験レベル1 技術解説セミナー in OSC北海道2016 (20)

20160618_HTML5プロフェッショナル認定試験レベル1 技術解説セミナー in OSC北海道2016