html5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · ©...
TRANSCRIPT
![Page 1: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/1.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/
HTML5プロフェッショナル認定試験レベル1 ポイント解説セミナー
LPI-Japan主催イベント
講師:大藤 幹(株式会社クリーク・アンド・リバー社 認定講師)
2017年5月27日
![Page 2: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/2.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/
HTML5プロフェッショナル認定試験の概要
新しい出題範囲「Ver2.0」について
HTML5 HTML5.1で何が変わったのか?
本日解説する主な内容
![Page 3: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/3.jpg)
HTML5プロフェッショナル 認定試験の概要
![Page 4: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/4.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/
HTML5プロフェッショナル認定資格は、 HTML5・CSS3・JavaScriptなど 最新のマークアップに関する技術力と知識を 中立的な立場で認定する認定資格で、 2つのレベルに分かれています。
HTML5プロフェッショナル認定資格とは?
![Page 5: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/5.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/
2つのレベル
マルチデバイスに対応した静的なWebコンテンツをHTML5を使って デザイン・制作できる。
システム間連携や最新のマルチメディア技術に対応したWebアプリケー ションや動的Webコンテンツの開発・設計ができる。
HTML5 Level.1
HTML5 Level.2
Markup Professional
Application Development Professional
![Page 6: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/6.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/
対象となる技術の範囲
HTML/HTML5 マークアップ
JavaScript プログラミング
グラフィックス
レスポンシブ Webデザイン
通信・デバイス アクセス系APIマルチメディア
ユーザビリティ
パフォーマンス
Level.1Level.2
Level.1
![Page 7: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/7.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/
レベル1試験概要
所要時間
試験問題数
試験実施方式
受験料
90分(機密保持契約とアンケートの時間を含む)
約60問
コンピュータベーストテスト(CBT)
¥15,000(税抜)
![Page 8: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/8.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/
合格点
合格点は何点?
約7割の正答率で合格
![Page 9: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/9.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/
回答パターン
回答パターンは?
単一選択・複数選択・記述式
![Page 10: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/10.jpg)
![Page 11: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/11.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/
認定証・認定カード・認定者ロゴ
認定カード
認定証
認定者ロゴ(名刺用)
SAMPLE
SAMPLE
SAMPLE
SAMPLE
![Page 12: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/12.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/
試験情報
http://html5exam.jp/
@html5Cert
https://www.facebook.com/html5exam
オフィシャルサイト
![Page 13: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/13.jpg)
新しい出題範囲「Ver2.0」について
![Page 14: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/14.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/
2017年3月1日に出題範囲が改定され Ver2.0となった
2017年8月31日までは古い出題範囲 (Ver1.0)でも受験可能
出題範囲の変更
![Page 15: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/15.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/
Ver2.0でどう変わったのか?
クライアント系のみの仕事をしている方に配慮 し、サーバ関連技術に関する出題が減少
Webディレクターの方も受験しやすいように、 HTML5で何ができるのか(APIの知識)を 問う問題が増加
✔
✔
![Page 16: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/16.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/
もう一つの重要な変更点!
出題の対象となる仕様が
HTML5.1になった!
![Page 17: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/17.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/
出題対象となるHTMLの仕様が異なる
Ver1.0 Ver2.0
HTML5.1HTML52016年11月1日 W3C勧告2014年10月28日 W3C勧告
![Page 18: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/18.jpg)
HTML5 HTML5.1 で何が変わったのか?
![Page 19: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/19.jpg)
新しく追加された要素HTML5.1で
![Page 20: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/20.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/
1. picture要素 2. details要素 3. summary要素 4. menu要素 5. menuitem要素
HTML5.1で新しく追加された要素
レスポンシブイメージ
ディスクロージャーウィジェット
コンテキストメニュー
![Page 21: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/21.jpg)
Demo
![Page 22: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/22.jpg)
使い方見出しとセクションの
![Page 23: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/23.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/
h1~h6要素の定義の違い
HTML4.01 XHTML1.0
HTML5 HTML5.1
見出し
h1が最も重要、以降 重要度が低くなる
セクションの見出し
1~6の数字はランク
![Page 24: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/24.jpg)
おぼえておくべき セクション関連用語
![Page 25: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/25.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/
セクションとは何か?
見出しと それに対応するコンテンツ を含む範囲
![Page 26: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/26.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/
セクションとは何か?
section要素
article要素
aside要素
nav要素
![Page 27: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/27.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/
セクションとは何か?
セクションは見出しとセットで使うのが基本。
ただし、見出しのないセクションもあれば、 セクションのない見出しもある。
![Page 28: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/28.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/
アウトラインとは何か?
<body> <h1>見出しA</h1> <section> <h2>見出しB</h2> <section> <h3>見出しC</h3> </section> <section> <h3>見出しD</h3> </section> </section> </body>
1. 見出しA 1. 見出しB 1. 見出しC 2. 見出しD
アウトライン
![Page 29: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/29.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/
セクショニングルートとは何か?
内部に独自のアウトラインを持つ要素。
セクショニングルートのアウトラインは、 外部のアウトラインとは無関係になる。
例:blockquote要素
![Page 30: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/30.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/
セクショニングルートとは何か?
セクションのルートになるという意味で、 body要素もセクショニングルートに含まれる。
![Page 31: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/31.jpg)
セクションに関する
重要な仕様
![Page 32: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/32.jpg)
POINT 1
セクション内の最初の見出しが、 そのセクションの見出しとなる。
![Page 33: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/33.jpg)
POINT 1<section> <h1>見出しA</h1> <h2>見出しB</h2> <h3>見出しC</h3> </section>
<section> <h4>見出しA</h4> <h4>見出しB</h4> <h6>見出しC</h6> </section>
![Page 34: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/34.jpg)
POINT 2最初の見出しに続く別の見出しがあった場合、前の見出しよりもランクが下なら、そこから暗黙のサブセクションが始まる。 ランクが同じか上なら前のセクションを終了させ、新しい暗黙のセクションが始まる。
![Page 35: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/35.jpg)
<body> <h1>見出しA</h1> <h2>見出しB</h2> <p>・・・ </p> <h3>見出しC</h3> <p>・・・ </p> <h2>見出しD</h2> <p>・・・ </p> </body>
POINT 2
1. 見出しA 1. 見出しB 1. 見出しC 2. 見出しD
アウトライン
![Page 36: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/36.jpg)
POINT 2<body> <h1>見出しA</h1> <h2>見出しB</h2> <p>・・・ </p> <h3>見出しC</h3> <p>・・・ </p> <h2>見出しD</h2> <p>・・・ </p> </body>
<body> <h3>見出しA</h3> <h5>見出しB</h5> <p>・・・ </p> <h6>見出しC</h6> <p>・・・ </p> <h1>見出しD</h1> <p>・・・ </p> </body>
![Page 37: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/37.jpg)
POINT 3セクションの要素がある場合、 そのセクションを含む最も近いセクションまたは セクショニングルートのサブセクションになる。 ※見出しの数字は無視される。
![Page 38: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/38.jpg)
POINT 3<body> <h1>見出し</h1> <section> <h2>見出し</h2> <section> <h3>見出し</h3> </section> <section> <h3>見出し</h3> </section> </section> </body>
<body> <h6>見出し</h6> <section> <h4>見出し</h4> <section> <h1>見出し</h1> </section> <section> <h5>見出し</h5> </section> </section> </body>
![Page 39: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/39.jpg)
見出しの使い方
ま と め
![Page 40: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/40.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/
HTML5.1の見出しの使い方まとめ 1/2
HTML5.1の仕様としては、見出しとセクションの要素がセットで使われているなら、見出しはh1~h6のどれを使ってもかまわないことになっている。
ただし、ブラウザや支援技術はその仕様に対応していない。
![Page 41: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/41.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/
HTML5.1の見出しの使い方まとめ 2/2
HTML5.1では、見出しの数字はセクションの階層に合わせることを推奨している。
これに従った場合、h1要素はセクションのルート要素(body要素)に1回しか使えないことになる。
![Page 42: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/42.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/
HTML5.1の見出しの使い方まとめ
<body> <h1>見出し1</h1> <section> <h2>見出し2</h2> <section> <h3>見出し3</h3> </section> <section> <h3>見出し4</h3> </section> </section> </body>
body - h1
section - h2
section - h3
section - h3
![Page 43: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/43.jpg)
の指定方法レスポンシブイメージ
![Page 44: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/44.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/
画面の解像度とCSSピクセルについて
![Page 45: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/45.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/
ピクセル密度
ピクセル密度1倍 ピクセル密度2倍 ピクセル密度4倍基準=96dpi 約200dpi 約400dpi
![Page 46: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/46.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/
srcset属性の使い方(1)
<img src="pic100.jpg" srcset="pic200.jpg 2x, pic300.jpg 3x" width="100" height="100" alt="">
![Page 47: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/47.jpg)
Demo
![Page 48: HTML5プロフェッショナル認定試験 レベル1 ポイント解説 ...2017/05/27 · © LPI-Japan 2016. All rights reserved. The HTML5 Logo is licensed under Creative Commons](https://reader033.vdocuments.net/reader033/viewer/2022060921/60ac9f3b5e7d2a2ac22cb769/html5/thumbnails/48.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/
Open the Future with HTML5.