Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
© 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.
© 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.
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
© 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$
© 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������
© 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
© 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�'�)#* $%
© 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���
© 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���
© 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.
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
© 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����
© 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�
© 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� ���
����
© 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��� ����
© 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
© 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���
© 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@
© 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
© 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.
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��
© 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��������
© 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.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
27
%� ����
web��� ��
● ������� ������
● �&������!$���#'�"�
© 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..
© 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�&�����$����,/�%+��
© 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.
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>
© 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”>
© 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
© 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������#
© 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;������(����)���(� ��)�����������������
��� (����)
��� � ��! ��� � ��! ��� � ��!
© 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;
© 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
© 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;
© 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;
© 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>
© 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�"�����!�$%���
© 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
© 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 { ~ }
© 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
© 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���…
© 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���
© 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(� ��
© 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���);�);����*"����
� �.�$�����<��!��
,������
© 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.
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#�������
© 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