The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

アカデミック認定校

プロフェッショナル認定資格
合格者
Lv1: 27名
Lv2: 5名※2017年6月現在
https://www.fork.co.jp/
http://4009.jp/
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

本日解説する主な内容

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

HTML4.01に比べて複雑な処理が容易になり、文書構造をより明確に書けるようになった。
• 動画や音声をシンプルに扱えるようになった。
• 新たな属性が増え、フォーム周りの機能が強化された。
• 文書構造を表すタグなどが増え、より明確な文書構造を示すことができるようになった。
• 様々なAPIが追加され、より高度な機能を持ったウェブアプリケーションを構築できるようになった。など

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

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 2017. All rights reserved.

Lv.1
•
•
•
•

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

8

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

調査期間 2015/9/29-2015/11/2

有効回答数 1,064件
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 2017. All rights reserved.

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 2017. All rights reserved.

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 2017. All rights reserved.

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 2017. All rights reserved.

••

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 2017. All rights reserved.

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 2017. All rights reserved.

••

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 2017. All rights reserved.

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 2017. All rights reserved.

•

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 2017. All rights reserved.

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 2017. All rights reserved.

••

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 2017. All rights reserved.

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 2017. All rights reserved.

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 2017. All rights reserved.

合否結果

約60問

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 2017. All rights reserved.

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 2017. 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 2017. All rights reserved.

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 2017. All rights reserved.

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 2017. All rights reserved.

HTTP通信①●●の情報ほしい！（HTTPリクエスト）②●●の情報あげる！（HTTPレスポンス）

ブラウザの開発者ツールを使うと、メソッド（GET、POST等）やステータスコード（200、404等）など確認することができます。
頻繁に使うツールなので使い方を覚えておくとよいです。
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 2017. All rights reserved.

HTTP,HTTPSの違い
httpsの「s」は Secure＝「安全な」 という意味で、データを暗号化した状態で通信しています。
運営する側としては多少の予算はかかりますが、ユーザーからの信頼性、セキュリティ向上といったメリットがあります。
検索エンジンも今後、httpsか否かで評価が変わる動きを見せています。
入力フォームなどがない静的なサイトでもSSLを導入するケースが増えてきています。

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 2017. All rights reserved.

DOCTYPE宣言
文書がどのバージョンのHTMLやXHTMLで作成されているかを示す記述です。
HTML5はとてもシンプルな書き方になりましたがルールがあります。
• 基本形は<!DOCTYPE」＋1個以上のスペース＋「HTML」＋0個以上のスペース＋「>」• 大文字、小文字は問わない• 「HTML」は含まないといけない○ <!doctype␣html>○ <!DOCTYPE␣HTML >× <!doctype> ※htmlがない
× <␣!DOCTYPE HTML> ※<の後にスペースがある
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 2017. All rights reserved.

文字コードの指定値としてutf-8,shift_jis,euc-jpなどがあげれられます。
こちらも大文字小文字は問いません。

<meta charset="UTF-8">

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 2017. All rights reserved.

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 2017. All rights reserved.

セレクタ
たくさん種類があり、覚えておく必要はありますがあまり乱用すると見づらく、後々修正する場合にややこしくなるのでシンプルなソースを心がけて使用していきましょう。
E:nth-child(n)nEE:nth-of-type(n)E~FEF

E>FEFE+FE

E[foo]foonFEなど

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 2017. All rights reserved.

nth-childとnth-of-typeの違い
div p:nth-child(5){color : red;}

div p:nth-of-type(5){color : red;}<div><p>1つ目のpタグ</p><p>2つ目のpタグ</p><p>3つ目のpタグ</p><h6>間にh6タグ</h6><p>4つ目のpタグ</p><p>5つ目のpタグ</p><p>6つ目のpタグ</p></div><div><p>1つ目のpタグ</p><p>2つ目のpタグ</p><p>3つ目のpタグ</p><h6>間にh6タグ</h6><p>4つ目のpタグ</p><p>5つ目のpタグ</p><p>6つ目のpタグ</p></div>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 2017. All rights reserved.

アニメーションメリット• cssだけで実装可能。
• 単純なアニメーションならJavaScriptを利用するより簡単に実装ができる。
• JavaScriptが書けない人でもアニメーションの実装ができる。
• 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 2017. All rights reserved.

２つの機能div {animation: name 1s ease infinite alternate;}@keyframes name {0% { width: 50px; }50% { width: 100px; }100% { width: 200px; }}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 2017. All rights reserved.

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 2017. All rights reserved.

セクショニングコンテンツ
HTML5から文書構造を明確にするタグが追加されました。
セクショニングコンテンツはセクションの範囲を定義するコンテンツです。
あくまで構造を表すものなので、レイアウト目的での使用は避けましょう。

<header>,<footer>はセクショニングコンテンツではありません。

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 2017. All rights reserved.

インタラクティブコンテンツ
ユーザーが操作できるコンテンツです。（下記はcontrols属性を付与した場合）<video controls autoplay poster="image.jpg"><source src="sample.mp4"><source src="sample.ogv"><source src="sample.webm"><p>動画を再生するにはvideoタグをサポートしたブラウザが必要です</p></video>など
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 2017. All rights reserved.

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 2017. All rights reserved.

〇メリット• URLが同一のためリダイレクトの設定が不要• 1ソース管理なのでメンテナンスが容易△デメリット• 1ソースで作成することを考慮して設計、デザインをしないと構築しづらくなる• デバイス毎で使用している画像が多くある場合、リクエスト数が多くなり重たくなる

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 2017. All rights reserved.

メディアクエリ
css2でも大まかなメディア用スタイルを指定することはできましたが、スマートフォン、タブレットが普及されたことあり、機能が強化されました。
Javascriptで対応する方法もありますが、メディアクエリを使えばシンプルに振り分けられます。
メディアタイプの一部

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 2017. All rights reserved.

<link href="css/style.css" rel="stylesheet" media="screen and (max-width: 320px)" >@media screen and (max-width: 320px){
ブラウザ幅が320px以下に適用}@media screen and (min-width: 321px) and (max-width: 768px){
ブラウザ幅が321px以上、768px以下に適用}@media screen and (orientation: portrait) {デバイスの向きが縦の場合}@media screen and (orientation: landscape) {デバイスの向きが横の場合}

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 2017. All rights reserved.

フルードグリッド

50％
33％

1

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

44

100％

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. 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 2017. All rights reserved.

オフラインウェブアプリケーション
オフライン状態でもウェブアプリケーションを利用できるようにするため、キャッシュマニフェストという仕様が追加されました。
ブラウザのキャッシュをコントロールし、サーバの負荷を軽減したり、オフライン時でも動作するウェブアプリケーションを作るなど可能です。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

マニフェストファイルを作成• 一般的に拡張子は「appcache」• 文字コードはutf-8• 1行目にCACHE MANIFESTと記述• セクションを分けて、それぞれファイルを指定<html manifest=sample.appcache">

一般的に.htaccessもしくはにマニフェストファイルのMIMEタイプが、text/cache-manifestであることを指定（Webサーバによって設定方法は異なります。）
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 2017. All rights reserved.

Canvas
マルチメディア・グラフィックス系APIの一つとしてCanvas APIがあります。
<canvas>要素をhtmlに配置し、javascriptを使用して図形、文字などを描画し色や影をつけたり回転させたりなどが可能です。
アニメーションさせることもできますが実際にはCanvas APIにそれらの機能はなく、javascriptで描画自体を繰り返して実現させます。
WebGL（ブラウザ上で3DCGプログラミングができる）を利用す
れば高度な3Dでの表現ができます。

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 2017. All rights reserved.

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 2017. All rights reserved.

教材： LPI-Japan HTML5認定教材を使う（たくさん教材があるので自分に合ったものを使いましょう）
実際に書く： JS Bin、CodePenなど、ブラウザ上で即座に確認できるサービスを使えば捗ります。
7割以上で合格なので配点の高い（重要度が高い）部分から重点的に学習してもよいかもしれません。
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 2017. All rights reserved.

私は未経験でこの業界に飛び込み、もともとそこまでWebに詳しくなかったので基本的な知識が浅いまま業務をこなしていました。
この試験をきっかけに知識の幅が広がり、Webに対しての理解が深まりました。
実務作業で活かせる知識を身につけれるので是非ともお勧めしたい資格です。

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 2017. All rights reserved.

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 2017. All rights reserved.

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 2017. All rights reserved.

Open the Future with HTML5.

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 2017. All rights reserved.