LPI-Japan主催

HTML5プロフェッショナル認定試験
レベル1 　ポイント解説無料料セミナー
2014年年11⽉月8⽇日

アシアル株式会社 　⽣生形可奈奈⼦子

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

2	

事業内容
HTML5アプリ開発環境（Monaca）、ネイティブアプリ開発、
サーバーサイド開発、インフラ、教育事業など
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n HTML5プロフェッショナル認定試験とは• 概要• 試験範囲n カテゴリ毎の頻出ポイント解説• Webの基礎知識識• HTML要素• CSS3• レスポンシブWebデザイン
3	

• オフラインWebアプリケーション
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

HTML５について

4	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

• 2014年年正式勧告予定• マルチデバイス・マルチメディア対応• リッチクライアント・アプリケーションのプラットフォーム

5	• 広義ではCSS3やJavaScriptによる3Dグ
ラフィック、WebSocket、デバイスアク
セス、クライアントストレージ等も含む
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

6	

ニールセン株式会社  2013年年度度（2013年年4⽉月〜～2014年年3⽉月）のネット利利⽤用動向
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

ブラウザからマルチプラットフォームへ
7	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

HTML5プロフェッショナル認定試験

8	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 特定⾮非営利利活動法⼈人LPI-‐‑‒Japanが実施する、HTML5および周辺技術の知識識レベ
ルを測る認定制度度です。
n 試験の難易易度度を⽰示す2種類のレベルがあり、段階的に受験します。
• Level1  マルチデバイスに対応した静的なWebコンテンツを  HTML5を使ってデザイン、作成できるレベル• Level2
システム間連携や最新のマルチメディア術に対応したWebアプリケーションや動的
Webコンテンツの開発・設計ができるレベル

9	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

30%

Webの基礎知識識37%

HTML要素

20%

CSS3

10%

レスポンシブWebデザイン
オフラインWebアプリケーション

10	

3%

※ 出題率率率は⽬目安であり、実際の試験では変動します。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 試験⽅方式はコンピュータベーストテスト（CBT）です。試験配信会
社の「ピアソンVUE」を通して受験します。
• 全国のテストセンターで通年年受験可能• 合否結果はその場でわかる• 試験の詳細は以下の通り

11	

問題数

約65問

試験時間

90分

合格ライン

約7割

回答⽅方式

殆どが選択式（複数回答あり）
記述式も１問程度度

受験料料\15,000（税抜）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

サンプル問題12	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

nHTML５で廃⽌止されたタグは以下のうちどれですか？
• A  :  <b>
• B  :  <strong>• C  :  <big>• D  :  <small>13	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

ninput要素のtype属性に指定できない値は以下のうちどれですか？
• A  :  tel
• B  :  url
• C  :  color• D  :  address
14	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

Webの基礎知識識

15	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n メソッドの種類• GET/POST/HEAD/PUT/DELETE 　など

n リクエストヘッダの種類• User-‐‑‒Agent/Referer/Content-‐‑‒Type 　など

n ステータスコードの種類

16	

• 1xx

情報

• 2xx

成功

• 3xx

転送

• 4xx

クライアントエラー• 5xx

サーバーエラーThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

レイヤ

説明

例例

アプリケーション層

アプリケーション間のデータ交換

HTTP

6

プレゼンテーション層

データ変換や圧縮

HTTP

5セッション層セッションの開始・終了了HTTP,  SSL/TLS

4

トランスポート層

エラー訂正や再送処理理

TCP,  UDP

3

ネットワーク層

通信経路路の選択・中継

IP,  ICMP

データリンク層

直接接続されている機器間の通信

イーサネット

物理理層

物理理的な接続

光ケーブル

7

2
1

17	

階層名

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n どのような脆弱性をついた攻撃なのか・サイト開発者はどのような対策が必要なのか、の２点を理理解すること• SQLインジェクション
• クロスサイトスクリプティング（XSS）• クロスサイトリクエストフォージェリ（CSRF）• HTTPヘッダインジェクション
• ディレクトリトラバーサル

18	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n SQLインジェクションとは？
• データベースサーバに発⾏行行する問い合わせに、悪意のあるSQL（データの不不正取得、削除など）を挿⼊入する攻撃

19	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 正常な問合せ①⼀一般ユーザーの操作「ID」を表⽰示
http://shop.example.com/item.php?id=5

RDB

20	

②データベース側での処理理
SELECT    *  FROM    items  WHERE  id  =  '5';

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 不不正な問合せ①攻撃者の操作「ID」を表⽰示
http://shop.example.com/item.php?id='	
 OR	
 1	
 =	
 1;--

RDB

②データベース側での処理理
SELECT    *  FROM    items  WHERE  id  =  ''	
 OR	
 1	
 =	
 1;--';
idが空⽂文字か1==1（実質検索索条件なし）、-‐‑‒-‐‑‒以降降は無効化

21	

全データが抽出されてしまう！
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 対策⽅方法①• 特殊⽂文字をエスケープするØ 開発⾔言語が⽤用意しているエスケープ関数などを利利⽤用する

n 対策⽅方法②• あらかじめSQLを⽤用意しておき、可変の部分だけを置き換える「プリペアードステートメント」という仕組みを利利⽤用する

22	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n XSSとは？
• 掲⽰示板などの、ユーザーの登録した⽂文字列列が公開される場所にスクリプ
トを埋め込む攻撃• 主な被害Ø 正規ユーザーのクッキー盗難Ø フィッシングサイトへの誘導Ø サイト改ざん• 正式名称23	Ø Cross  Site  Scripting
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n XSSの例例
掲⽰示板②スクリプトを含んだ⽂文章が掲載される<script> 　 　 　location.href = "http://crack.example.com"</script>①スクリプトを投稿③閲覧

別のサイトに誘導されてしまう！
24	

攻撃者

⼀一般ユーザーThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 対策⽅方法• HTMLの⽣生成時に、サニタイズ（タグの構成⽂文字等の特殊⽂文字をHTML
エンティティに変換すること）を⾏行行う• HTMLエンティティ⼀一覧
&
<
>
'
"
25	

→
→
→
→
→

&amp;
&lt;
&gt;
&#39;
&quot;The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n CSRFとは？
• ログイン済みユーザに対して、外部から不不正操作を強要する攻撃• 主な被害Ø 投稿処理理Ø 退会処理理Ø 登録情報の変更更• 正式名称Ø Cross  Site  Request  Forgery
26	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n CSRFの仕組み• ログイン済みサイトに対して、img要素やJavaScriptによってリクエストを送信する
罠サイト

ログイン済サイト

shop.example.com<img src="http://shop.example.com/leave.php">27	

leave.php（退会URL）

正規のユーザーとして退会処理理が実⾏行行されてしまう！
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 対策⽅方法• パスワード⼊入⼒力力によって本⼈人の意思を確認する• 直前のページにトークンを埋め込み、外部サイトからのアクセスではなく正しい導線に基づいた要求であるかを判断する

n 間違った対策⽅方法• リファラーをチェックするØ リファラーは偽装が可能である
28	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n ネットワーク・サーバ関連• ドメイン/DNS/プロキシ/ロードバランサ/ファイアーウォール 　n データベース 　• SQLの種類（CREATE/DROP/SELECT/INSERT/DELETE/UPDATE）

n データ表現技術• マイクロデータ/RDFa/データURLn Web広告• ペイパークリック/アドワーズ/アフィリエイト/コンバージョンレート

29	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

HTML要素30	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n HTML5の例例<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>サンプル</title></head><body><p>本文</p></body></html>• 省省略略できる属性が増え、シンプルなシンタックスに31	

• セマンティックWeb対応（⾒見見た⽬目ではなく、意味を重要視する）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n DOCTYPE宣⾔言<!DOCTYPE html>

n ⽂文字エンコーディング指定• ⽂文書の先頭にBOMを付加するか、以下のどちらかを<head>内に指定<meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

32	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

header（ヘッダ）nav（ナビゲーションリンク）
section（汎⽤用的なセクション）
article（記事として独⽴立立したセクション）
article（記事として独⽴立立したセクション）

33	

aside
（サイドバーや
広告など）

footer（フッタ）The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n article要素とsection要素• 記事として独⽴立立しているセクションは<article>、それ以外の汎⽤用的なセクションは<section>• <article>、<section>要素はどちらが親要素となっても構わないn header要素とfooter要素• <header>、<footer>は<article>、<section>の中に⼊入れることもできる

34	

• <header>内には通常<h1>〜～<h6>を含むが、含まなくても構わない
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 説明⽂文のついた図表などを表す• 要素は本⽂文から参照されるが、本⽂文とは別のページなどに切切り離離すことができる<p>クランウェルツノガエルは、ツノガエル科の蛙です。<br>同科のベルツノ
ガエルと比較するとツノが尖っているのが特徴です。<br><a href="#photo">
クランウェルツノガエルの画像</a></p><figure id="photo"><img src="frog.jpg" width="100px"><figcaption>クランウェルツノガエル</figcaption></figure>35	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 動画（video）、⾳音声（audio）の再⽣生• どちらの要素も使い⽅方はほぼ同じ<video src="video.mp4" controls autoplay loop></video><audio src="audio.mp3" controls autoplay loop></audio>• クロスブラウザ対応するには<source>要素を⼦子要素に使う

36	

<audio controls autoplay loop><!–-ブラウザが対応しているファイルタイプに適合するファイルを使用--><source src="audio.ogg" type="audio/ogg" media="all"><source src="audio.mp3" type="audio/mp3" media="all"><p>ご利用中のブラウザでは再生できません</p></audio>The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n メディアファイルに字幕をつける• WebVTT形式で作成したテキストトラックを、video要素などに埋め込む<video src="video.mp4"><track src="ja.vtt" srclang="ja" label="日本語" kind="subtitles"default><track src="en.vtt" srclang="en" label="英語" kind="subtitles"></video>
WEBVTT
00:00:01.000 --> 00:00:05.000
こんにちは

37	

00:00:06.000 --> 00:00:11.000
はじめましてThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n プラグインが必要なコンテンツの埋め込み• 以前からブラウザに実装されていた要素だが、仕様として組み込まれたのはHTML5から• QuickTimeプラグインが必要なファイルを埋め込む例例<embed src="file.mov">• プラグイン不不要な外部リソース（SVG、HTMLなど）を埋め込む場合は<object>要素を使う<object src="image.svg"></object>

38	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 重要箇所を表す• 制作者ではなく、「ユーザーにとって」重要な箇所（検索索結果など）をマークアップする• 多くのブラウザでは⻩黄⾊色く表⽰示される
Monacaは、<mark>HTML5</mark>によるモバイルアプリの開発環境です。

39	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n <progress>• タスクの進捗状況を表す<progress value="75" max="100">100%中75%まで完了</progress>n <meter>• 範囲内の数、量量、割合などを表す<meter value="75" max="100" min="0">100人中75人が回答</meter>• ⾒見見た⽬目はどちらもほぼ同じ
40	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n <time>• ⽇日付や時刻を表す• datetime属性（省省略略時は内容テキスト）をコンピュータが認識識可能な形式で指定する<time datetime="2001-05-15 19:00">May 15</time>n <data>• ⽇日付以外のデータを表す• value属性をコンピュータが認識識可能な形式で指定する<data value="30">三十歳</data>

41	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n ルビを付与する• <ruby> 対象テキストをマークアップ• <rt>

ルビテキストを指定• <rp>

ルビ未対応ブラウザでのみ表⽰示<ruby>子守熊<rp>（</rp><rt>コアラ</rt><rp>）</rp></ruby>

ルビ対応ブラウザ

42	

ルビ未対応ブラウザ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 向きが異異なるテキストを埋め込む• アラビア⽂文字などの、右から左に記述する⾃自然⾔言語をマークアップする
ことによって前後のテキストが⼊入れ替わって配置される現象を回避する<ul><li>User Name: <bdi>james</bdi> 2014/5/28</li><li>User Name: <bdi>steve</bdi> 2014/6/19</li><li>User Name: <bdi>‫<إيان‬/bdi> 2014/7/20</li>
</ul>

43	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n テキストが改⾏行行されても良良い位置を指定する• ⼀一般的なブラウザはスペースを含まないアルファベットや記号の並びは改⾏行行せずに表⽰示する• ブラウザの横幅が狭く⽂文章を表⽰示しきれない場合に、<wbr>が挿⼊入されている箇所を改⾏行行する
section,nav,article,aside,header,footer,main,<wbr>figure,figcaption,
video,audio,source,canvas,mark,time,data,ruby,rt,rp,rb,bdi,progress,
meter,output,datalist,keygen

44	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n JavaScriptでビットマップのグラフィックを描画する要素• 具体的な描画⽅方法はLevel2の範囲• Level1ではキャンバスで描画できる図形の種類を知っておくことØ  　四⾓角形/多⾓角形/円弧/画像45	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n フォームの⼊入⼒力力候補を定義する• 定義した⼊入⼒力力候補はテキストボックスなどに付与することができる<datalist id="keywords"><option value="Monaca"><option value="Onsen"><option value="Asial"></datalist><input type="text" list="keywords">

46	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 公開鍵と秘密鍵を⽣生成する• フォーム送信時に公開鍵と秘密鍵を⽣生成する• 秘密鍵はローカルに保存され、公開鍵のみがサーバーに送信される• サーバーサイドでクライアント証明書を⽣生成するなど、クライアントの信頼性を確保する⽬目的での⽤用途が考えられる<form action="keygen.php" method="post"><keygen name="key" keytype="rsa"><input type="submit" value="キーを送信する"></form>47	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n スクリプトによる計算結果などを表⽰示する• ユーザーに対して表⽰示することのみを⽬目的とする（フォーム送信されない）<form oninput="result.value = parseInt(price.value * 1.08)"><input type="number" name="price" value="0">
税込：<output name="result">0</output>円</form>48	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

削除
要素名

49	

説明

basefont

基準となるフォント、サイズ、⾊色を指定する

big

テキストサイズを⼀一回り⼤大きくする

center

コンテンツを中央に配置する

font

テキストのフォント、サイズ、⾊色を指定する

strike取り消し線を引く

tt

等幅フォントを指定する

frame

フレーム分割されたウィンドウに表⽰示するページを指定する

frameset

ウィンドウをフレーム分割する

noframes

frame要素が利利⽤用できないブラウザでの表⽰示内容を記述する
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

変更更
要素名

50	

変更更前

変更更後

b

太字表⽰示

他と区別したいテキストを表す

i

斜体表⽰示

専⾨門⽤用語などを表す

s

取り消し線

もう正確でないテキストを表す

u

下線

伝わりにくい、または本来と異異なる表記を表す

hr罫線

意味的な段落落を表す

small

テキストを⼩小さく表⽰示する

注釈や細⽬目を表す

strong

テキストを強調表⽰示する

重要性を表すThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n バリデーション属性• <input>要素に付与すると、  submit時にチェックを⾏行行ってくれるØ required必須Ø pattern
正規表現Ø min
最⼩小値
Ø max
最⼤大値
Ø maxlength 最⻑⾧長⽂文字数
名前：<input type="text" required>
郵便番号：<input type="text" pattern="^[0-9]{3}-[0-9]{4}$">
年齢：<input type="number" min="18" max="99">51	

ID：<input type="text" maxlength="6">
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n input    type属性値• urlやemailを指定した場合、フォーム送信時にURL、メールアドレスの形式として正しいかバリデーションが⾏行行われる• rangeを指定するとレンジバーが、colorを指定するとカラーパレット
が表⽰示されるなど、UIの拡張が⾏行行われる

52	

URL：<input type="url">
メールアドレス：<input type="email">
電話番号：<input type="tel">
日付：<input type="date">
範囲：<input type="range">
色：<input type="color">
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 独⾃自データ属性• スクリプトで利利⽤用する値を要素に保持するために、data-‐‑‒で始まる属性
を⾃自由に定義することができる<ul><li data-id="0001">りんご</li><li data-id="0002">みかん</li><li data-id="0003">いちご</li>
</ul>

53	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

CSS3

54	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n セレクタ、疑似要素、疑似クラスの種類• CSS2も試験範囲に含まれる• idセレクタ/要素型セレクタ/クラスセレクタ/属性セレクタ• ⼦子セレクタ/⼦子孫セレクタ/隣隣接セレクタ/間接セレクタ• 疑似要素（:before/:after/:ﬁrst-‐‑‒lineなど）• 疑似クラス（:ﬁrst-‐‑‒child/:active/:link/:hover/:target/:notなど）

55	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n スタイルの継承• スタイルは基本的に⼦子孫要素に継承される• ⼀一部の継承されないプロパティを継承するには、inheritを指定する
div {border : solid 1px #fff;}
div * {
border: inherit;}56	

/* div要素のborderを子孫要素に継承 */The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n スタイルが競合している場合の優先順位の決定
1. CSSの種類!important付きユーザCSS > !important付き文書作成者CSS> 文書作成者CSS > ユーザCSS >   ブラウザ標準CSS
2. セレクタの種類と数による重み付け
1. style属性で指定したスタイル
2. idセレクタの数が多いものを優先
3. クラスセレクタ  or  属性セレクタ  or  疑似クラス  の数が多いものを優先
4. 要素型セレクタ  or  疑似要素  の数が多いものを優先

3. 出現順57	

1. 最も後に出現する記述を優先
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n ボックスは 　コンテンツ領領域（width,height）、内側の余⽩白（padding）  枠線（border）、外側の余⽩白（margin）によって構成される
枠線までを含んだボックス幅  ：  (   　       　 　)  px

width: 80px
height: 40px

58	

padding: 20px
border: 5px
margin: 30px
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n CSS3での変更更点• box-‐‑‒sizingプロパティによって、width、heightの指定値をborderまで含めた値にすることが可能59	Ø box-‐‑‒sizing  :  content-‐‑‒box

従来通りØ box-‐‑‒sizing  :  border-‐‑‒box

borderまでを幅と⾼高さに含める

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n border/paddingプロパティの値• 値が１つ：上下左右すべて同じ値
margin: 10px;• 値が２つ：上下  と  左右
margin: 10px 20px;/* 上下10px, 左右20px */• 値が３つ：上 　左右 　下margin: 10px 20px 30px;/* 上10px, 左右20px, 下30px */• 値が４つ：上、右、下、左（時計回りと覚える）
60	

margin: 10px 20px 30px 40px;/* 上10px, 右20px, 下30px, 左40px */The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n マルチカラムレイアウト（段組みレイアウト）• ⻑⾧長い⽂文章などを指定したカラム数に分割して表⽰示することができる

マルチカラムレ
イアウトは、⻑⾧長
い⽂文章などを指定したカラム数

61	

に分割して表⽰示
することができます。これは３つのカラムに分割したイメージです。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n Flexible  Box（可変ボックスレイアウト）• 要素の中央揃えや均等揃えなどの配置を簡単に⾏行行うことができる

主軸（交差軸）

（

交
差
軸

）

主
軸

62	

Flexコンテナ
Flexアイテム

Flexアイテム

Flexアイテム

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n transitionプロパティ• スタイルを変更更した際に、変化の過程をアニメーションで表⽰示する
Ø例例：要素にマウスカーソルが乗ったら、背景⾊色を⾚赤から⻘青に変化させるn animationプロパティ• transitionとの違いは、アニメーションを連続で実⾏行行することができる
Ø例例：要素にマウスカーソルが乗ったら、背景⾊色を⾚赤→⻘青→緑→⻩黄⾊色のよ
うに変化させる
63	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n transformプロパティ• 要素に対して移動、回転、拡⼤大、傾斜を⾏行行うことができる
img {transform: rotate(90deg);}/* 画像を90度回転 */CSS適⽤用64	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n ベンダプリフィックス• -‐‑‒webkit-‐‑‒  /  -‐‑‒moz-‐‑‒  /  -‐‑‒o-‐‑‒  /  -‐‑‒ms-‐‑‒ 　

n ボックスモデル 　• 表⽰示の制御（display/visibility）• 影（box-‐‑‒shadow）/  切切り抜き（clip）/  ⾓角丸(border-‐‑‒radius)n ⾊色• カラーコード  /  カラーネーム  /  rgb  /  rgbanフォント65	

• Webフォント  /  レイアウト（単語間隔や⾏行行⾼高さなど）/  装飾（⾊色や影）The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

レスポンシブWebデザイン

66	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n メディアクエリ
• デバイスの特性（ブラウザ幅など）に応じてCSSを切切り替える⽅方法

横幅800px未満

67	

横幅800px
以上

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

1. CSSファイル内でスタイルを指定@media screen and (min-width: 800px) {body{background-color: #000}}

2. <link>でCSSファイルを読み込むときに指定<link rel="stylesheet" media="screen and (min-width: 800px)"
href="style.css">

68	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n フルードデザイン、フルードイメージ• 画⾯面の幅に合わせて横幅を調整する• コンテンツのサイズを％単位で指定する

n グリッドレイアウト• ページをグリッドで分割し、グリッド枠に沿ってコンテンツを配置• 画⾯面サイズにあわせてグリッドの幅や数を調整する• グリッドレイアウトを実現するための代表的なフレームワークにBootstrapなどがある
69	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

オフラインWebアプリケーション

70	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n アプリケーションキャッシュ• キャッシュマニフェストに記述されたファイルをローカル環境に保存し、オフライン状態ではローカル環境に保存されたファイルを表⽰示する
クライアントWEBサーバ2.  ダウンロード

A.html B.html
A.htmlB.html1.  キャッシュマニフェストを確認

71	

キャッシュ
マニフェストThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

受験対策

72	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

73	

HTML教科書HTML5レベル1

HTML5プロフェッショナル
認定資格 　レベル１ 　教科書The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

Open the Future with HTML5.

74	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.