HTML5プロフェッショナル認定試験対策講座

URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1
アシアル株式会社
生形可奈子
HTML5プロフェッショナル認定試験
試験対策講座

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

試験概要

 2014年10月正式勧告
 マルチデバイス・マルチメディア対応
 リッチクライアント・アプリケーション
のプラットフォーム
 広義ではCSS3やJavaScriptによる3Dグ
ラフィック、WebSocket、デバイスアク
セス、クライアントストレージ等も含む
HTML5とは

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

Level１の試験範囲
30%
37%
20%
10%
3%
Webの基礎知識
HTML要素
CSS3
レスポンシブWebデザイン
オフラインWebアプリケーション
※ 出題率は目安であり、実際の試験では変動します。

 基本的に試験方式はコンピュータベーストテスト（CBT）ですが、
学校などの団体受験用にペーパーテスト（PBT）も選択可能です。
• 通年受験可能
• 試験の詳細は以下の通り
受験について
問題数約65問
試験時間 90分
合格ライン約7割
回答方式殆どが選択式（複数回答あり）
記述式も１問程度
受験料 15,000（税抜）

サンプル問題

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

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

Webの基礎知識

Webの仕組み
WEBサーバーWebクライアント
WWW
リクエスト（URLを指定）
 HTTP
• HTTPとは、Webクライアント（ブラウザ）とWebサーバー間でコンテンツを
送受信するための通信方法を規定したもの
• WebクライアントからWebサーバーに対しての要求を「リクエスト」といい、
それに対してWebサーバーから応答を返すことを「レスポンス」という
HTML
レスポンス（HTMLを渡す）

 メソッドの種類（リクエスト）
• GET/POST/HEAD/PUT/DELETE など
 ステータスコードの種類（レスポンス）
• 1xx 情報
• 2xx 成功
• 3xx 転送
• 4xx クライアントエラー
• 5xx サーバーエラー
 ヘッダの種類（リクエスト・レスポンス）
• User-Agent/Referer/Content-Type など
HTTPに関する頻出問題

セキュリティ（攻撃手法と対策）
 SQLインジェクション
• 入力フォームなどにSQL文を挿入し、データベースを不正操作する
 クロスサイトスクリプティング（XSS）
• 掲示板などに悪意のあるJavaScriptのコードを書き込む

SQLインジェクション
 SQLインジェクションとは？
• データベースサーバに発行する問い合わせに、悪意のあるSQLを挿入す
る攻撃
• 主な被害
 個人情報などのデータの流出

 正常な問合せ
RDB
①一般ユーザーの操作
「ID」を表示
http://shop.example.com/item.php?id=5
②データベース側での処理
SELECT * FROM items WHERE id = '5';

 不正な問合せ
①攻撃者の操作
「ID」を表示
http://shop.example.com/item.php?id=' OR 1 = 1;--
全データが抽出されてしまう！
RDB
②データベース側での処理
SELECT * FROM items WHERE id = '' OR 1 = 1;--';
idが空文字か1==1（実質検索条件なし）、--以降は無効化

 対策方法①
• 特殊文字をエスケープする
 開発言語が用意しているエスケープ関数などを利用する
 対策方法②
• あらかじめSQLを用意しておき、可変の部分だけを置き換える「プリペ
アードステートメント」という仕組みを利用する

XSS
 XSSとは？
• 掲示板などの、ユーザーの登録した文字列が公開される場所にスクリプ
トを埋め込む攻撃
• 主な被害
 正規ユーザーのクッキー盗難
 フィッシングサイトへの誘導
 サイト改ざん
• 正式名称
 Cross Site Scripting

XSS
掲示板
<script>
location.href = "http://crack.example.com"
</script>
②スクリプトを含んだ文章が掲載される
一般ユーザー
①スクリプトを投稿
攻撃者
③閲覧
別のサイトに誘導
されてしまう！
 XSSの例

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

 ネットワーク・サーバ関連
• ドメイン/DNS/プロキシ/ロードバランサ/ファイアーウォール
 データベース
• SQLの種類（CREATE/DROP/SELECT/INSERT/DELETE/UPDATE）
 Web広告
• ペイパークリック/アドワーズ/アフィリエイト/コンバージョンレート
その他

HTML要素

 HTML5の例
• 省略できる属性が増え、シンプルなシンタックスに
• セマンティックWeb対応（見た目ではなく、意味を重要視する）
HTML5の特徴
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<p>本文</p>
</body>
</html>

セクショニング要素（HTML5で追加）
header（ヘッダ）
footer（フッタ）
section（汎用的なセクション）
aside
（サイドバーや
広告など）
article（記事として独立したセクション）
article（記事として独立したセクション）
nav（ナビゲーションリンク）

 動画の再生（video）/ 字幕の表示（track）
video要素/track要素（HTML5で追加）
<video src="video.mp4" controls autoplay loop></video>

 タスクの進捗状況を表す
 範囲内の数、量、割合などを表す
progress/meter要素（HTML5で追加）
<progress value="75" max="100">100%中75%まで完了</progress>
<meter value="75" max="100" min="0">100人中75人が回答</meter>

 ルビを付与する
• <ruby> 対象テキストをマークアップ
• <rt> ルビテキストを指定
• <rp> ルビ未対応ブラウザでのみ表示
ruby要素（HTML5で追加）
<ruby>子守熊<rp>（</rp><rt>コアラ</rt><rp>）</rp></ruby>
ルビ対応ブラウザルビ未対応ブラウザ

 JavaScriptでビットマップのグラフィックを描画する要素
• グラフやアニメーションなどを動的に描画することができる
canvas要素（HTML5で追加）

 バリデーション属性
• <input>要素に付与すると、 submit時にチェックを行ってくれる
 required 必須
 pattern 正規表現
 min 最小値 / max 最大値
バリデーション属性（HTML5で追加）
名前：<input type="text" required>
郵便番号：<input type="text" pattern="^[0-9]{3}-[0-9]{4}$">
年齢：<input type="number" min="18" max="99">

 input type属性値
• urlやemailを指定した場合、フォーム送信時にURL、メールアドレスの
形式として正しいかバリデーションが行われる
• rangeを指定するとレンジバーが、colorを指定するとカラーパレットが
表示されるなど、UIの拡張が行われる
input type属性値（HTML5で追加）
URL：<input type="url">
メールアドレス：<input type="email">
数値：<input type="number">
検索キーワード：<input type="search">
電話番号：<input type="tel">
日付：<input type="date">
範囲：<input type="range">
色：<input type="color">

input type属性値（HTML5で追加）

CSS3

 マルチカラムレイアウト（段組みレイアウト）
• 長い文章などを指定したカラム数に分割して表示することができる
マルチカラムレイアウト
に分割して表示
することができ
ます。これは３
つのカラムに分
マルチカラムレ
イアウトは、長
い文章などを指
定したカラム数
割したイメージ
です。

フレキシブルボックス
 フレキシブルボックス（可変ボックスレイアウト）
• 要素の中央揃えや均等揃えなどの配置を簡単に行うことができる
Flexコンテナ
FlexアイテムFlexアイテム Flexアイテム
主軸（交差軸）
交
差
軸
（
主
軸
）

 ボックスの角を丸くする
 背景をグラデーション表示する
• 線形グラデーション
• 円形グラデーション
 ボックスに影をつける
ボックスの装飾

 rgbtとは
• 赤、緑、青の含有量を、0（色なし）〜 255（原色）の範囲で表す方法
 カラーコード
• RGBを6桁の16進数で表現したコード
• R、G、Bの各2桁がすべて同じ値の場合に限り、省略表記が可能
色
#ff00ff;
→ 赤がff(255), 緑が00(0), 青がff(255)なので紫になる
#ff00ff; → #f0f;

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

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

 Webフォントとは
• Web上に配置されたフォントを読み込む技術。ユーザーの環境に依存し
ないため、どのような環境でも同じフォントを表示することができる
Webフォント

レスポンシブWebデザイン

 メディアクエリ
• デバイスの特性（ブラウザ幅など）に応じてCSSを切り替える方法
メディアクエリ
横幅800px未
満
横幅800px以
上

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

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

受験対策

参考書籍

HTML5プロフェッショナル認定試験対策講座

More Related Content

What's hot (20)

Similar to HTML5プロフェッショナル認定試験対策講座 (20)

More from アシアル株式会社 (20)

HTML5プロフェッショナル認定試験対策講座