52
© 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/ '8 HTML54(37 1 61$&# 61$,&# !! 2019 Hokkaido 2019*6/1-9%:@OSC 2019 Hokkaido 0+"2! )5 .

HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

���'�8

HTML5���������4(37���161 $���&#�����

61 $��,�&#���

�!� �!�� ��� �2019 Hokkaido

2019*6/1-9%:@OSC 2019 Hokkaido

0+"2��!�)5.

Page 2: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

© 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

����

Page 3: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

3

R=P.

<UHJ?0O �,�I>!'+�E;

*+��+��+���

���%�+���� webLM��VQ�D��J?0O �,�2Oweb$,�41��K/G��� �HTML5"* ���&�(T9SX)#(17C

L63:�B�)#(��"��javascriptWN��FA

)#(27C8��5@-

2017

2018

2019

Page 4: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

4

4.%8��#�

B6>�2,

@ HTML5�!�������������=)3A

HTML5�!�������=)<?'5:

https://www.fork.co.jp/https://4009.jp/

&�/*� 2,��"����

7(� ��1'5�����

Lv1: 40( Lv1: 41(Lv2: 7( Lv2: 13(�2018-6107 �2019-6107

;+9$

Page 5: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

5

-,57��"(

● � ��&��HTML5

○ � ������:

○ �8.�%*����

○ ���#)����

○ 69/4

● 8.�%3���� ����

○ 8.�%�����

○ 8.�12��

○ '$�!+������

○ 0������

Page 6: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

6

�������HTML5

Page 7: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

7

�"(����,

•�>IT46���=:�

•������web46�;/����

•�7+6��=5� �web�)!&��� �

�����"(�������,

•�IT46�749��=:�

•�0.�-�������<3���8����

21�'�)#* $%

Page 8: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

8

web:�6<��� ���

•9*�html�css����4�����-)������…

•(/�=5�+����������8.�6<�';��

����>

•&7�+0�3,���%�����"! ��$#�

��=5�21���

Page 9: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

9

���FH

• S\M=�RT��NO<[�V ���)$.• X;GZ�Q>�2X�U�W�

/-#01(

• web3��HTML5�4I!RT���/-#01(���• FH!U"�� ����Y9�L���JP��/-#01(!*%+&

���<[!R�

• FH�5?�NO<[!���R�

• 8A'$,�EV�����NO<[��7<KR���6@�DC�

��� �:B���

Page 10: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

© 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

����

Page 11: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

11

HTML5� �������:,<1��

5,>*&4(3$���"�����!?LPI-Japan@��

HTML5�CSS3�JavaScript�0/��"����=� .9'�7;��

%-��)2�#868+�:,� :,<1

Page 12: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

12

2��-%,

HTML5 -%,1 (28GJ������)',�!"���;<��OE�Web�. .��HTML5�4�!��./3= ���1�5:Q

/HTML5/CSS3/-�&.�#web!��.

HTML5 -%,2�� (MK?�A@�',�)!��>F�;<��

Web�$+�0�*.�6EWeb�. .��LD/IH� ���

⇒ javascript�N��7P�BC�9����

Page 13: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

13

48�.3

48"*)$ ������������9CBT:����� 7�5&$

��2, 481���+

%3+6 90�9/#�'!0������+6���:

7( 060

�-��� 07�

Page 14: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

14

1.1 Web� ���

1.2 CSS

1.3 ��

1.4 ����Web���

1.5 API� ���

����

Page 15: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

15

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�?�#@

1.1 Web�%32:

POINTBHTTP���������4AHTML�)+$&7��� ����

Page 16: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

16

1.2.1 ���#�&� .7HTML "B�="�20���CSS .7<�DF59�49�H��-J

1.2.2 CSS���%A8���B�=(���%)����DF����1:����-�-J

1.2.3 ���& ()*I')@3 CSS�,6�G;���/+ )*I'�C?59�H��-J

1.2 CSS

POINTLCSS "$!��(E0() >K⇒ CSS ������%�1:�� �M

Page 17: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

17

1.3.1 HG�79�:5N!(.$�� OHTML�@;��HG�FM�����<�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��6L

1.3 HG

POINTPHTMLHG("�)�FM/83⇒���HG��>?��� �83���

Page 18: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

18

1.4.1 '*� "��45%-��.8=�BI��� "���45��web%-��.8:>�G��2J

1.4.2 ( ����)HEA3�5����*�/�;�� "( ����)"�G��2J

1.4.3 �'-!#�,��!<F1�'-!#�,A3�C7��%-�0.�9D ?6@�G��2J

1.4 +�&,�$Web ��,

POINTK'*� "���45��:>����� �: ?6@

Page 19: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

19

1.5.1 ),!*#��/�+'�"��IAPIALjavascript�D5�Q;���O8 >����EM�9�9R

1.4.2 #&������IAPIALH@ 1=���.�0S��javascript�2��>�� P��9R

1.4.3 �'+�./�$-0�IAPIAL(+��6��#0 3<��&"��+�.%7B�J�?K P��9R

1.4.4 N4IAPIALjavascript�C��N4�J�?K P��9R

1.5 API�:FEM

POINTTjavascript API�GSAL

Page 20: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

© 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

� ������������

Page 21: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

© 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

�������� ����

����������� ������� �!�������!�

Page 22: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

© 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

&����������

��!�"%�'���

● (!���$��*��*� �

● �#!�"%�)���*����

Page 23: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

© 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

)#��������

&*�����"���� ��

● �"�����)#�������"��

● �$����&*���!��"����%(� '

Page 24: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

24

1+�"$������

#-��� ����� �%'���

● ���� ���������/������&,�

��

● ����� ������� *,���!(�.)

0��

Page 25: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

25

5/�',�#$ !

" ��)��

● %+����������*0�2�������

���

● &3��1&�-( ���2���������

.���6"" �"���4��������

Page 26: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

© 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

����������� ���

��������������������� ���

Page 27: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

27

%� ����

web��� ��

● ������� ������

● �&������!$���#'�"�

Page 28: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

28

0&�()��

web����!�" #"��

● web'* HTML�%�-+�� ��

● ")�����⇒$2�$.�������������● ")������⇒!'1�/,������● etc..

Page 29: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

29

1'�)*��

.��&��

● �&��(!���$�(!����03

● "#� ������ ���

● -2�&�����$����,/�%+��

Page 30: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

© 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

���������������

������������������� ��!

Page 31: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

31

.,�*0��$%�

6��&;�� ��9��1��������

<p>���3/)7+/"'#!'�</p><img src="./main.jpg"><div><p>����</p><p><span>5��8����(4�<span class="red">���3/)7</span>�"'#!'����

�<</span></p>

</div>

<h1>���3/)7+/"'#!'�</h1><img src="./main.jpg" alt="27-:"><section><h2>����</h2><div><p>5��8����(4�<span class="red">���3/)7</span>�"'#!'�����<

</p></div>

</section>

Page 32: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

32

�/$/#+%-

HTML5 ���QL(!�)�7XZ1/2[

*!%1!0�/$/#HTML(��-�@9��3�(��-�U5�������4[meta�script�style�title

(.10�/$/#<= $��&���B���4[a�p�header�h1�div�

��,'/�0�/$/#CIH J�EA����4[section�article

)"%�/�0�/$/#DYH J�EA����4[h1�h2�h3

■CIH�J<section><h1>K1J\SF</h1><p>>��GVF��…</p>

</section>

■DYH�J<h1>P?M2</h1><h2>SF</h2><p>W8F��…</p><h2>O��R</h2><p>N:; 6T��…</p><img src=”xxx.jpg”>

Page 33: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

33

�1%1$+&/

HTML5����DB("�)�9HI2/2J

�1*&�#'2�1%1$HTML8�5�.!3 �;�F���7Jiframe�img�audio

(03�1�2�1%1$@C ��4�:����>A�?<��DB7Jspan�a�img�b

�1"-�%�)2�1%1$GE���,3�3��=6������7Jinput�select�button

Page 34: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

34

:6�5= �./*+

flex0&%'+$?@��#"�����23;749>�

BA�E�$>�#

��������� ���

����������

� !

PC�(-,�D<�C�

PC

18 28 V3

X %-)1

SP

18

28 V3

X

%-)1

����flex������#

Page 35: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

35

flex��

display:flex;������(����)���(� ��)�����������������

��� (����)

��� � ��! ��� � ��! ��� � ��!

Page 36: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

36

flex�����

flex-direction� �����

1 2 3

3 2 1

flex-direction : row;

flex-direction : row-reverse;

1

2

3

flex-direction : row;

3

2

1

flex-direction : row-reverse;

Page 37: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

37

flex��� ��

flex-wrap��������������

1 2 3

flex-wrap: wrap;

4

flex-wrap: nowrap;

1 2 3 4

1 2 3

flex-wrap: wrap-reverce;

4

Page 38: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

38

flex����

justify-content�������������� ����

1 2 3

justify-content:flex-start;

1 2 3

justify-content:flex-end;

1 2 3

justify-content:center;

1 2 3

justify-content:space-around;

Page 39: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

39

flex����

order���� ���

A F B C E D

A B C D E Forder : 1; order : 3; order : 4; order : 6; order : 5; order : 2;

Page 40: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

40

�����������

CSS����� �����

common.css.text {font-size: 12px;font-weight: bold;margin-top: 10px;

}

base.cssp {font-size: 10px;font-weight: normal;margin: 0;

}

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

}

<div id=”top”><p class=”text”>������������</p>

</div>

Page 41: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

41

CSS�$%A#

$%A�)2

● html�<�=��CSS C@97�;- ��CSS C� ��34���!

● 86�[style=""]�50;-C head86&�:>�CSS C+?CSS● $%.(�*'�����1�����$%

● ,�/B!important�"�����!�$%���

Page 42: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

42

CSS�"#7�

������"#7 ⇒0/%CSS����� (31�.*��'6)�����0/�5*�����

⇒0/�(4�)����"#���0/��+/0 &$4��/! 2�8 :1.0.0.19

���� 0/

31 p 0.0.0.1

��� .text 0.0.1.0

ID #top 0.1.0.0

���style,-(���� ���)

style="color:red;" 1.0.0.0

Page 43: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

43

CSS�����

������

① p.text.text-red#item { ~ }

② #top p.text#item { ~ }

③ p.text.ta.tb.tc.td.te.tf.tg.th.ti { ~ }

Page 44: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

44

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

Page 45: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

45

" ����!���� ���

Level1�����������������������

����� �#�HTML5���…

Page 46: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

46

Level1�����

5.-�6CG5*B

● 5"6C����EA� �$,��@7�9���F

● )#�2�Web/=�8<��� �41�/=�;>

� ���'��!0(:

● 6B�� +&?D�%7���������?D

�%7��31���

Page 47: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

47

Level1���$�

HTML5 ���2

● ���1��!/*

● javascript�+,��web��������0-1��

&4�'��%��

● ���1."� ���)2

● #�3(� ��

Page 48: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

48

40�

web58�.������

+��A��6 �C�A��

���6 �C���@ED%�

/�B�2�6 �>���

(E���='��&����

WEB58�17#9-:�3?�6 �C���);�);����*"����

� �.�$�����<��!��

,������

Page 49: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

© 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

� �����������

Page 50: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

© 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

���

Page 51: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

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

51

HTML5� �������-',1����http://www.html5exam.jp/

Twitter@html5Cert

Facebookhttps://www.facebook.com/html5exam

$)���!��URL

/%����"��0(.+ ���!�*&�0#�������

Page 52: HTML5 4(37 - LPI2019/05/31  · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C;

© 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