! !2019 Hokkaido  '
8HTML54(37161$

&#

61$,&#

2019*6/1-9%:@OSC 2019 Hokkaido0+"2!)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 2016. 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 2016. All rights reserved.

R=P.

<U HJ?0O , I>!'+E;*+++

2017%+ webLM
VQDJ?0O
web$,41  K/ G  
HTML5"* &(T9SX)#(17C

,2O

2018
L63:B)#("javascriptWN

FA2019)#(27C85@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 2016. All rights reserved.

;+9$
4.%8#B6>2,@ HTML5! =)3A

HTML5!=)<?

40(Lv2: 7('5:41(Lv2: 13(Lv1:

Lv1:

2018-6107

2019-6107&/* 2," 7( 1 '5 https://www.fork.co.jp/
https://4009.jp/
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 2016. All rights reserved.

-,57"(● &HTML5○ :○8.%*○#)

○ 69/4● 8.%

3



○ 8.%
○ 8.12
○ '$!+

○ 0

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

HTML5The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

6© LPI-Japan 2016. All rights reserved.

21')#*$%

"(,• >IT46=:• web46;/• 7+6=5web)!&"(,• IT46749=:
• 0.-<38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 2016. All rights reserved.

=521web:6<

• 9*htmlcss4-)…
• (/=5+8.6<';

>• &7+0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 2016. All rights reserved.



:B



FH

• S\M=RTNO<[V)$.

• X;GZQ>2XUW/-#01(• web3HTML54I!RT• FH!U"%+&/-#01(Y9LJP/-#01(!*<[!R• FH5?NO<[!R• 8A'$,EVNO<[7<KRC 6@D

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 2016. 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/

10© LPI-Japan 2016. All rights reserved.

HTML5:,<1

5,>*&4(3$"!?LPI-Japan@HTML5CSS3JavaScript0/"%-)2=

#86



.9'7;

8+:,

:,<1

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

2

-%,
HTML5 -%,1 (28GJ',!";<OEWeb.
!./3= HTML5415:Q/HTML5/CSS3/-&.#web!.

)

.

HTML5 -%,2 (MK?A@',)!>F;<Web$+0*.6EWeb. .LD/IH ⇒ javascriptN7PBC9

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

48.348"*)$9CBT:  75&$

2,481+%3+6909/#'!0+6:060

7(-

0 7

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



1.1 Web

1.2 CSS
1.3 
1.4



1.5 APIWeb
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 2016. All rights reserved.

1.1 Web%32:
1.1.1 HTTP, HTTPS
Web%,1=(5HTTP/HTTPS?

#@1.1.2 HTML+'HTML%,18<*/.?#@1.1.3 Web?>(5-60!

79HTML";(5?

#@POINTBHTTP4AHTML)+$&7 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 2016. All rights reserved.

1.2 CSS
1.2.1 #&HTML.7"B="20CSS.7<DF5949H-J1.2.2 CSS%
A8B=(%)



1.2.3 &()*I')

CSS,6G;/+@3DF1:--J)*I'C?59

H-JPOINTLCSS "$!(E0() >K⇒ CSS %1:

M

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

1.3 HG
1.3.1 HG79:5N!(.$HTML@;HGFM



<O

83/:5J6L

1.3.2 *%HG4DKADHTML.$.#BC

EI66L

1.3.3 .",$'HG&0)-.+00=21HTMLHGJ6LPOINTP
HTMLHG(")FM/83⇒  HG>?

83

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

1.4 +&,$Web
1.4.1 '*="45%-

BI

1.4.2 (HEA3,".845web%-

.8:>G2J)5*/; "()"G2J

1.4.3 '-!#,!<F1'-!#,A3C7%-0.

POINTK'* "

9D?6@45:>

G2J

:?6@

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

1.5 API:FEM
1.5.1 ),!*#/+'"IAPIAL
javascript

D5Q;

O8>EM99R

1.4.2 #&IAPIAL
H@1=.0Sjavascript2>

P9R

1.4.3 '+./$-0IAPIAL(+6#03<&"+.%7BJ?KP9R

1.4.4 N4IAPIAL
javascriptCN4J?KPOINTT
javascript APIGSP9RALThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

19© LPI-Japan 2016. 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/

20© LPI-Japan 2016. 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/

21© LPI-Japan 2016. 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/22© LPI-Japan 2016. 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/

23© LPI-Japan 2016. All rights reserved.

1+"$#-● 

%'



/&,● 

*,!(.)0

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

5/',"

#$!)

● %+ *02● &31&-(.6"""2



4

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 2016. 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/26© LPI-Japan 2016. 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/

27© LPI-Japan 2016. All rights reserved.

0&()

web!"● web'*#"

HTML%-+● ")⇒$2 $. ● ")⇒!'1/,

● etc..

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

1')*

.&
● &(!$(!03● "# ● -2& $

,/%+

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 2016. 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/30© LPI-Japan 2016. All rights reserved.

.,*06&;

$%
91

<p> 3/)7+/"'#!'</p><img src="./main.jpg"><div><p>  </p><p><span>5 8(4<span class="red">
<</span></p></div><h1> 3/)7+/"'#!'</h1><img src="./main.jpg" alt="27-:"><section><h2>  </h2><div><p>5 8(4<span class="red">
</p></div></section>3/)7</span>"'#!'3/)7</span>"'#!' <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 2016. All rights reserved.

/$/#+%HTML5QL(!)7XZ1/2[*!%1!0/$/#
HTML(-@93(4[metascriptstyletitle(.10/$/#<= $&
B
4[apheaderh1div,'/0/$/#CIH JEA
4[sectionarticle)"%/0/$/#
DYH JEA4[h1h2h3U5

■CIH J<section><h1>K1J\SF</h1><p>> GV F…</p></section>■DYH J<h1>P?M2</h1><h2>SF</h2><p>W8 F…</p><h2>OR</h2><p>N:; 6T…</p><img src=”xxx.jpg”>

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

1%1$+&/HTML5DB(")9HI2/2J(03121%1$@C4:>A?<DB
7Jspanaimgb
1*&#'21%1$
HTML85.!3 ;F7Jiframeimgaudio
1"-%)21%1$GE ,33
=67Jinputselectbutton



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

:65=./*+flex0&%'+$?@#"
23;749>

PC(-,D<C
PCBAE$>#






SP
1828X%)1V328

V318%)1!
Xflex#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 2016. All rights reserved.

flex



display:flex;() () ()



!

!

!

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

flex



flex-direction  
flex-direction : row;

flex-direction : row;

1

2

3

flex-direction : row-reverse;

3

2

1

flex-direction : row-reverse;

1

32

2

3

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

flex
flex-wrap 
flex-wrap: wrap;

1
4

2

flex-wrap: wrap-reverce;

341flex-wrap: nowrap;

1
2

2

3

4

3

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

flex

justify-content 

justify-content:flex-end;

justify-content:flex-start;

1

2

1

3

justify-content:center;

1

2

2

3

justify-content:space-around;

31

2

3

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

flex

order

order : 1;

order : 3;order : 4;order : 6;

order : 5;order : 2;

A

B

C

DE

FA

F

B

C

E

D

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

CSS

common.css.text {font-size: 12px;
font-weight: bold;
margin-top: 10px;}base.cssp{font-size: 10px;
font-weight: normal;
margin: 0;}<div id=”top”><p class=”text”>
</div>



page.css#top p {font-size: 20px;
margin-top: 5px;}</p>

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

CSS$%A#$%A)2● html<=CSS C @97;-CSS C 

● 86[style=""]50;- C head86&:>● $%.(*'1

● ,/B!important"34!

CSS C +?CSS$%!$%

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

CSS"#7
"#7 ⇒ 0/%

CSS (31.*'6)0/5*⇒ 0/(4)"#0/+/0&$

4

/!

28:1.0.0.19

0/31p0.0.0.1



.text

0.0.1.0ID#top0.1.0.0style,( )style="color:red;"

1.0.0.0

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

CSS


① p.text.text-red#item { ~ }② #top p.text#item { ~ }③ p.text.ta.tb.tc.td.te.tf.tg.th.ti { ~ }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 2016. All rights reserved.

CSS



① p.text.text-red#item { ~ }0.0.0.1 + 0.0.1.0 + 0.0.1.0 + 0.1.0.0 = 0.1.2.1② #top p.text#item { ~ }0.1.0.0 + 0.0.0.1 + 0.0.1.0 + 0.1.0.0 = 0.2.1.1③ p.text.ta.tb.tc.td.te.tf.tg.th.ti { ~ }0.0.0.1 + 0.0.1.0 + () + 0.0.1.0 = 0.0.10.1②①③

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

"!



Level1
    #HTML5…

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

Level1

5.-6CG5*B● 5"6CEA $,@79F● )#2Web/=8<41/=;>'!0(:● 6B
%7+&?D%7?D31

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

Level1

$HTML5 2● 1!/*● javascript+,web0-1

&4'%
● 1.")2● #3( 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 2016. All rights reserved.

40

web58.+A6 CA6 C@ED%
/B26 > (E='&WEB5817#9-:3?6 C););
*" .$ < !,

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 2016. 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/49© LPI-Japan 2016. 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/50© LPI-Japan 2016. All rights reserved.$)!URLHTML5-',1

http://www.html5exam.jp/Twitter@html5Cert

Facebook
https://www.facebook.com/html5exam/%"

0(.+!*&0#

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 2016. 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/52© LPI-Japan 2016. All rights reserved.