1

5

0
2 MLH

9

N

:

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

7V[P•HDUS()ᵒ NTT!/GI16(HTML5'F:J)ᵒ ",)*054;@Wᵒ W3C CSS Working Group(2014)ᵒ .%-1,2F:>E
ᵒ HTML5RQLNA=.(<8/&#0Web$,<8/+CT<8
M?

•.%-2KO9B2ZX(GI16&"3Y)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 / EDUCO all rights reserved.

 

•!#



ᵒ !#*('

•!#('



ᵒ Web )

$

"

ᵒ CSS
ᵒ &
ᵒ Webᵒ API )

•%
3









$



The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO 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/© LPI-Japan / EDUCO all rights reserved.

./7'•&-"!#*)
ᵒ https://html5exam.jp/outline/objectives_lv1_v2.html•JavaScript$JavaScript0,%651+ % ᵒ Ver2.0API24 +3(ᵒ

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 / EDUCO all rights reserved.



•







…

ᵒ https://html5exam.jp/outline/objectives_lv1.html



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 / EDUCO all rights reserved.

14;90•%&2 "!014;9*
8 #/+ -7)' •(X)HTML4.01/CSS2.114;95.3$(6,: 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 / EDUCO all rights reserved.

0. HTML5
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

•HTML4.01
5 5
•

Web5
H

WebM

L

T

H

5L

•HTML5•

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 / EDUCO all rights reserved.

•HTML55W3CHTML5ᵒ A vocabulary and associated APIs for HTML and XHTML http://www.w3.org/TR/html5/•

HTML55HTML5CSS
JavaScript API
ᵒ

5

W3C
•M

L/
/ T L
/CSS3

ML/

/

8
&L
L&

H

/3D,H
/

L,

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 / EDUCO all rights reserved.

1. Web
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

•W

HTML5
/

b

HTML5
/

Web

e

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 / EDUCO all rights reserved.

•Web
#  %$Web

ᵒ IP, DNS, TCP, HTTP•2"•Ver2.0

HTTP(s)!

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 / EDUCO all rights reserved.

9,*3• PC: ;
• Web!': PC
2:!')$#+/4Web>=.!'(• $): "(&)/4)%08• Web: $)+• <1


6-



Web57










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 / EDUCO all rights reserved.

e

•
ᵒ

e

Web

?

•IP
ᵒ 192.0.43.10
ᵒ IP
ᵒ(Protocol)
ᵒ IP
02

W

) b

IP(Internet

192.0.43.10!
1.3
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 / EDUCO all rights reserved.

•IPP• DNS(Domain Name System)ᵒ "example.com"

IP
(
IP

DNS)

ᵒ DNS
I
ᵒ
JPNIC
https://www.nic.ad.jp/ja/dom/system.html
example.com?

)49

192.0.43.10

192.0.43.10!
16

(

.

49

49
.3 02 . 10
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

e

• Web
ᵒ

SSH
Web

W

W

b

IP

•
ᵒ
ᵒ

(Web

80

)

TCP(Transmission Control Protocol)

ᵒ TCP
ᵒ TCP

IP

W
80

.

49


)(

192.0.43.10:80!
17

49 8.3 02 . 10
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

#582+• :6#58),  • URL-0"&%(#58)2+ ᵒ "http://example.com/"http://HTTP(HyperText Transfer
Protocol)3 -091 ᵒ HTTP805#3. (*7Web 805(/)80
5#2+• !$Web 4' 
http://example.com/!
80

.

49


)(

49 8
.3 02 . 10
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 / EDUCO all rights reserved.

 -$-#%"35• HTTP-$-#35 
1. 70 TCP14;/(* Web'x.html
 +!&84 
2. Web'(* ,!)-! x.html.:9
3. TCP70
14;< 4. (* x.html26 
http://example.com/x.html

!0 21
!0 21
9

)

8
!0 21

C
241 !.32( ! ! !

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 / EDUCO all rights reserved.

1• HTTP

P

ᵒ

1

•

ᵒ

(

1

1

(

H(

•
H

)

)

T

GET

)?7URI/

;@

POST

.3&)%!B=
B=6)%!B PUT)?7URI %!8F

HEAD

GET 4D+$";@OPTIONS?7URI,&-

DELETE?7URI/

TRACE

)

CONNECT

TCP&3(0E<(*1>95SSL&3(/3

$';@

HG

($&2:C#$A)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 / EDUCO all rights reserved.

2
H

•

2
2

ᵒ

H
P(

(
)

(2

)

3

2

)
P(

T
1xx

 
100: Continue2xx200: OK3xx

301: Moved Parmanently / 304: Not Modified

4xx  
400: Bad Request / 401: Unauthorized / 403: Forbidden / 404: Not Found5xx

  500: Internal Server Error / 503: Service unavailable

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 / EDUCO all rights reserved.

2
•
2
• Web
ᵒ
ᵒ2
•
ᵒ Web
ᵒ Web

Web
2 (
)
(
2 (Web
)
)W

)

Web
(
(

2

)

)

)

2

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 / EDUCO all rights reserved.

2. CSS3
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

•http://html5exam.jp/outline/objectives_lv1_v
2.html#lv1_12•CSS3

CSS2.1

3

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 / EDUCO all rights reserved.

3E'0#•CSS2.1D3<F63

•CSS2.1'0#ᵒ $ᵒ &!+".

•CSS3 ><ᵒ :I;4



BK(border:GBK

)CSS

=9

ᵒ H8/1A?7
ᵒ JC(.

-)/#25

ᵒ CSS

<@%*,025
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 / EDUCO all rights reserved.

W
W

•
ᵒ

1
p

a:

ᵒ

•
ᵒ

•
•
ᵒ

S
>

1

S

>

1n

(

S

1

b
r

p

!

m

p

S

)

S b
S o

p

C

:!

1t

e

W

Ci

>
p { font-size: 1em !important; }

C
>

C
!

C

!

!

:>

!

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 / EDUCO all rights reserved.


• ,*4+

 2: ᵒ CSS12$ " .!20))()(53')-#&,* • 


%/

A

style

B

ID

1

.CSS

C
D

• 53'-
C

D

B

A

.

0
2

0
2

C

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 / EDUCO all rights reserved.

•ᵒ A>B>C>Dᵒ   S>

C#id { A }→0.1.0.0
ul li.class { B } →0.0.1.2
ui ol+li { C } →0.0.0.3
A
S

B

C

A

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 / EDUCO all rights reserved.


• !ᵒ" 3: !









CSS#id { A }#id { B } 

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 / EDUCO all rights reserved.

n
•m
ᵒ

a

margin(eztsr padding(
w)

sr tg
a

4

g

w)
b

border(

+-

-

hp)

) - (
+-

(

-

sr
o

•

ᵒx
ᵒ
(
•

30

n

+
sr

sr
( (
(

x
i

(

+(

-

+

+-

-

(

dn

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

•ᵒ border-radius(http://www.w3.org/TR/css3-background/#corners)

3•ᵒ linear-gradient, radial-gradient(http://www.w3.org/TR/css3images/#gradients)•
ᵒ box-shadow
shadow)(http://www.w3.org/TR/css3-background/#the-box-

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 / EDUCO all rights reserved.

)
)

•

/

/

ᵒ [attr^="val"], [attr$="val"], [attr*="val"]ᵒ http://www.w3.org/TR/css3-selectors/#attribute-substrings

)

•

"~"

ᵒ http://www.w3.org/TR/css3-selectors/#attribute-substrings

•

(

)

ᵒ nth-child(), nth-of-type(), last-childᵒ http://www.w3.org/TR/css3-selectors/#general-sibling-combinators


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 / EDUCO all rights reserved.

:8 $'&%(• Multi-column Layout Module 9.6/(

:8

,-41

ᵒ column-count, coloum-gap")!
ᵒ http://www.w3.org/TR/css3-multicol/• Flexible Box Layout Module

float2#57

ᵒ display: flex flex-direction")!
ᵒ http://www.w3.org/TR/css-flexbox-1/• CSS

(

*3+0

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 / EDUCO all rights reserved.

• transformᵒ translate(), rotate(), scale(), skew()ᵒ http://www.w3.org/TR/css3-transforms/• transitionᵒ:hoverᵒ http://www.w3.org/TR/css3-transitions/• animation@keyframesCᵒ http://www.w3.org/TR/css3-animations/
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 / EDUCO all rights reserved.

3. 
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

 

•http://html5exam.jp/outline/objectives_lv1_v2.html#l
v1_13•HTML5 HTML4.01

•Ver1.0HTML5Ver2.0HTML5.1

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 / EDUCO all rights reserved.

0=),&•HTML4.01<





•87

ᵒ -9A!,(+ᵒ 2?3:(#*,%

ᵒ "$+.15@;ᵒ/57>40

")






,$'"156

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 / EDUCO all rights reserved.

!
• HTML4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

HTML5<!DOCTYPE html>• 
HTML4.01 Transitional<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5()<meta charset="UTF-8">•


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 / EDUCO all rights reserved.

• 

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/style.css"><script src="js/script.js"></script></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/

39© LPI-Japan / EDUCO all rights reserved.

%5 &3(
•  #*%5'0, &2)• ᵒ .- !/"ᵒ   !461'• ᵒ HTML.- $+  ᵒ 
1. 
2. 
1. 
2. 
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 / EDUCO all rights reserved.

• 

•  

section-F/*+5.,

articleD2

aside

+"+!1A
$&;>

nav

67%'*+

body

body

E9



#

@4

*+(1($B0=)?C 




h1~h6

*+.,

header*+)

footer*+(

address<:H8*+13G8
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 / EDUCO all rights reserved.





bodyheadernav
articleaside

sectionsectionfooter

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 / EDUCO all rights reserved.

•  HTML <body><h1>Apples</h1><p>Apples are fruit.</p><section><h2>Taste</h2><p>They taste lovely.</p><section><h3>Sweet</h3><p>Red apples are sweeter than green ones.</p></section></section><section><h2>Color</h2><p>Apples come in various colors.</p></section></body>• 
ᵒ validator.nu http://validator.nu/


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 / EDUCO all rights reserved.

=P 46+• KM

1(SCO 98 A? ᵒ !&)'.6,"@:•8%0705+-/$3EN
2#7-



ᵒ TH• KM *4Q

ᵒ KMD>;<L GR ᵒ BJIF HTML5 DoctorHTML5 Sectioning
Element Flowchart 
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 / EDUCO all rights reserved.

!$,26@MI• HTML8K8KL9!$,<16@MI 
ᵒ !$,<1>/CSS• JC

 

8KH: big, center, font, strike, tt

ᵒ MI

785D:4• #(+%G4• *-%'-!!&=;• BA"=.
ᵒE

style8KL9• !$,26@8K036@?1F
ᵒ b, i, hr, s, small, u45)-&The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

*'•# ,2

input-6

3type7.(50/ᵒ http://www.w3.org/TR/html5/forms.html#states-of-thetype-attribute•HTML  "&$''1)
audio-6/video-6"!4894

•!%'3+
canvas-6

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 / EDUCO all rights reserved.

5$(#•HTML4.01HTML5/8-6
ᵒ *12. +9ᵒ /8+9:,ᵒ 43 +9:,•0+9!&<;







ᵒ http://www.w3.org/TR/html5/dom.html#kinds-of-content
ᵒ http://www.w3.org/TR/html5/index.html#element-contentcategoriesᵒ (!( %"'7  )/• http://www.w3.org/TR/html5/index.html#elements-1

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 / EDUCO all rights reserved.

t

•

c

g

#

nwl

ᵒ ip mM x
ᵒ nw R M x
k
ᵒ sr
M x
k

•o

x

e

ᵒ3 :
.
0
ᵒ3 :
.
0
.- 0
40
ᵒ
T g g daf
R hn L
•3 :

H



3
3

3

H

/

3

54 /

4 /0 3

00

0

L

R

4 /0 3

00

0

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 / EDUCO all rights reserved.

4.  Web
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

"## •http://html5exam.jp/outline/objectives_lv1_v2.html#lv1_14•!"#Web#*% $),(
+'

 
 &

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 / EDUCO 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/

51© LPI-Japan / EDUCO all rights reserved.

•
b
•

Web

W

Web

ᵒ
ᵒW

1

HTML

W

e(

)

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 / EDUCO all rights reserved.

L

•
CSS

Web
Media Queries
MP

MP

H

L
C

H



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 / EDUCO all rights reserved.

U
U

•
ᵒ
ᵒ
ᵒ
ᵒ

U
MRH

)
TM

C

OR

L

E

E

L

U

•

C

ᵒ

•
ᵒ

•
ᵒ
ᵒ R
ᵒ

M

OR

H

H

M

/C
(
PM
CPMS

L

/

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 / EDUCO all rights reserved.

• Media Queries()• Fluid GridᵒW

• Fluid Image
ᵒ

•
•

3


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 / EDUCO all rights reserved.

5. API
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

•  APIᵒ Canvas/SVG/MediaSourceExtensions

• 



 APIᵒ Geolocation/DeviceOrientationEvent/TouchEvents

•



 APIᵒ WebStorage/IndexdDatabaseAPI/Application cache/WebWorkers• APIᵒ XMLHttpRequest/WebSocketAPI/
Server-Sent Events/WebRTC



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 / EDUCO all rights reserved.



API(:5)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

     •http://html5exam.jp/outline/objectives_lv1_v2.html#lv1_151The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

59© LPI-Japan / EDUCO all rights reserved.

• Canvas 2D Context
ᵒ HTMLJavaScript









<html><head><script type="application/javascript">function draw() {var canvas = document.getElementById("canvas");var context = canvas.getContext("2d"); //
context.fillRect (20, 20, 60, 60); //}</script></head><body onload="draw();"><canvas id="canvas"></canvas></body></html>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 / EDUCO all rights reserved.

• Drag and Dropᵒ Web

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 / EDUCO all rights reserved.


API
(
:4)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.

 •http://html5exam.jp/outline/objectives_lv1_v2.html#lv1_152

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 / EDUCO all rights reserved.

• Geolocation•(GPS)ᵒ GILAN

WiFi

A

API
GPS IP

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 / EDUCO all rights reserved.

  
API
(
:8)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.



 



•http://html5exam.jp/outline/objectives_lv1_v2.html#lv1_153

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 / EDUCO 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/

67© LPI-Japan / EDUCO all rights reserved.

W
•

e

W

Web

b

•
⇒

e

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 / EDUCO all rights reserved.

•
ᵒ
ᵒ

W

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 / EDUCO all rights reserved.

4:+-,4:+• 4:+ᵒ !19>SUWeb2:%(8>_^RMᵒ (2BC$*)HX)<";1;/+-=$EP1;V[Jᵒ D1;&0FK&0T]ZIRM• ,4:+ᵒ &0N1;YA
;YAOG
ᵒ #5+(63.1

@?7'<";#5+(61)-LW\@?QY1;YA
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 / EDUCO all rights reserved.

/6 <2:*

Apache.htaccess• Web"5.
ᵒ ".manifest"MIME%"text/cache-manifest"
ᵒ   '(&!$ $)9?

• '(&!$ $):4

5.





Webᵒ $)'(/ᵒ ;,->• '(+=HTML$)manifestB38.

ᵒ html2AmanifestB370'(&!$ $)#8.
ᵒ HTML$) (CSS/JavaScript@12)
HTML 
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 / EDUCO all rights reserved.









CACHE MANIFEST# -@41#0  #)<?/;# 7,
$%"! :3 <>#  CACHE:&)#  &)(*'$%!'<>
index.html
app.jsNETWORK:#  &)submit.cgi

$%FALLBACK:#  &)/ offline.html+6!'<>

SETTINGS:# $%prefer-online

!'<>.958=2/;

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 / EDUCO all rights reserved.

API(:3)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan / EDUCO all rights reserved.



•http://html5exam.jp/outline/objectives_lv1_v2.html#lv1_154

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 / EDUCO all rights reserved.

R
R

•

(

)

X

API

ᵒ XMLHttpRequest(Level1/Level2)
• Web

b
API

• Level2

M(JavaScript )

W

HTTP

R

R

L

H

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 / EDUCO all rights reserved.

P

)

)

) -

) -

E

S

ᵒ Server-Sent Events
• Web

C

)(
T

E

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 / EDUCO all rights reserved.

) (ᵒ WebSocket•CCThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

77© LPI-Japan / EDUCO all rights reserved.

WT

Pᵒ WebRTC
• Web

R

C

(
(

)

WT

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 / EDUCO 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/© LPI-Japan / EDUCO all rights reserved.

8S<2• 5?K

ᵒ JSFiddleJS Bin*,&'E
GB
ᵒ HCSS9 GB
6@Q• RPE"1ᵒ CSS+-)($
ᵒ 74"1 I:#• UCI:ᵒ 0F,%.70%

G5

DT

OL3

• =N/AM"
ᵒ 70%J!

>;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 / EDUCO all rights reserved.

2& -,:
• Mozilla Developers NetworkMDN Web technology
for developersᵒ https://developer.mozilla.org/ja/docs/Webᵒ HTMLCSS15-,$ᵒ  !4( • W3C CSS";ᵒ http://www.w3.org/Style/CSS/all-propertiesᵒ %)86
90(+#37

• '.%)-,ᵒ */ http://www.html5exam.jp/
ᵒ Twitter @HTML5Certᵒ Facebook https://www.facebook.com/html5exam

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 / EDUCO all rights reserved.

:
•
ᵒ
ᵒ

•
ᵒ Web
ᵒ CSS
ᵒ
ᵒ
ᵒ API

Web

•
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 / EDUCO 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/© LPI-Japan / EDUCO all rights reserved.

26+14/&,(*• CSS`RBHDO03')K7Ab #9815.-&\KY26+14/&,(*a#"S<^YX%Q "TE"• [Firefox26+14/&,(*I=-moz-A: ;ᵒ  26+14/&,(*"26+cPJUZ
N$#• GVM "ᵒ MozillaGoogle?;26+14/&,(*% C>ᵒ 26+14/&,(*`RB"]@HF _fᵒ e03')%:W" "• GV26+14/&,(*!/

%dL  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 / EDUCO all rights reserved.

(, #3BEH7:45• A(, #9KCSS8=3BEH*.%)-'&"$?DQN@Jᵒ 127• caniuse7:
ᵒ http://caniuse.com/• >4<O'!+> 8=<O0P6M•  7IFL;
• CG/ 

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 / EDUCO all rights reserved.

Open the Future with HTML5.

M

L
@
R

-

N
T

@
U

/

:

.

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 / EDUCO all rights reserved.