狠狠撸

HTML5プロフェッショナル認定試験試験概要と頻出ポイント解説
アシアル株式会社
URL : http://www.asial.co.jp/　│　Copyright ? Asial Corporation. All Rights Reserved. 　│　1

アシアルについて
事業内容
HTML5アプリ開発環境（Monaca）、ネイティブアプリ開発、
サーバーサイド開発、インフラ、教育事業など

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

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

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

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

受験について
n? 試験?方式はコンピュータベーストテスト（CBT）です。試験配信会
社の「ピアソンVUE」を通して受験します。
? 全国のテストセンターで通年年受験可能
? 合否結果はその場でわかる
? 試験の詳細は以下の通り
問題数約65問
試験時間90分
合格ライン約7割
回答?方式殆どが選択式（複数回答あり）
記述式も１問程度度
受験料料15,000（税抜）

サンプル問題

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

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

Webの基礎知識

HTTP
n? メソッドの種類
? GET/POST/HEAD/PUT/DELETE など
n? リクエストヘッダの種類
? User-‐??Agent/Referer/Content-‐??Type など
n? ステータスコードの種類
? 1xx情報
? 2xx成功
? 3xx転送
? 4xxクライアントエラー
? 5xxサーバーエラー

OSI参照モデル
レイヤ階層名説明例例
7アプリケーション層アプリケーション間のデータ
交換
HTTP
6プレゼンテーション層データ変換や圧縮HTTP
5セッション層セッションの開始?終了了HTTP
4トランスポート層エラー訂正や再送処理理TCP
3ネットワーク層通信経路路の選択?中継IP
2データリンク層直接接続されている機器間の
通信
イーサネッ
ト
1物理理層物理理的な接続光ケーブル

セキュリティ（攻撃?手法と対策）
n? SQLインジェクション
? ?入?力力フォームなどにSQL?文を挿?入し、データベースを不不正操作する
?? 対策：特殊?文字のエスケープ、プリペアードステートメントの利利?用
n? クロスサイトスクリプティング（XSS）
? 掲?示板などに悪意のあるJavaScriptのコードを書き込む
?? 対策：特殊?文字のサニタイズ
n? クロスサイトリクエストフォージェリ（CSRF）
? 特定のサイトの権限を持っている?人に外部から不不正操作を強要する
?? 対策：重要な処理理の前ではパスワード?入?力力を求める、照合情報を?用いて
外部サイトからのアクセスでないことを判定する

その他
n? ネットワーク?サーバ関連
? ドメイン/DNS/プロキシ/ロードバランサ/ファイアーウォール
n? データベース
? SQLの種類（CREATE/DROP/SELECT/INSERT/DELETE/UPDATE）
n? データ表現技術
? マイクロデータ/RDFa/データURL
n? Web広告
? ペイパークリック/アドワーズ/アフィリエイト

HTML要素

meta charset=UTF-8
titleサンプル/title
/head
body
p本文/p
/body
/html
HTML5の特徴
n? HTML5の例例
!DOCTYPE html
html lang=ja
head

? 省省略略できる属性が増え、シンプルな構造に
? 修飾を?行行うタグは削除または変更更され、デザインはCSSで?行行う

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

HTML5で追加された要素（組込コンテンツ）
要素名説明
video動画ファイルを再?生する
audio?音声ファイルを再?生する
source
videoやaudio要素の再?生候補となるメディアファイルを指定
する
trackメディアファイルに字幕などの情報を付加する
embedプラグインが必要な外部ファイルを再?生する

HTML5で追加された要素（Canvas）
n? Canvasとは
? JavaScriptでビットマップのグラフィックを描画する要素
? 具体的な描画?方法はLevel2の範囲
? Level1ではキャンバスで描画できる図形の種類を知っておくこと
?? 四?角形/多?角形/円弧/画像

HTML5で削除された要素
要素名説明
basefont基準となるフォント、サイズ、?色を指定する
bigテキストサイズを?一回り?大きくする
centerコンテンツを中央に配置する
fontテキストのフォント、サイズ、?色を指定する
strike取り消し線を引く
tt等幅フォントを指定する
frameフレーム分割されたウィンドウに表?示するページを指定する
framesetウィンドウをフレーム分割する
noframesframe要素が利利?用できないブラウザでの表?示内容を記述する

HTML5で変更更された要素
要素名変更更前変更更後
b太字表?示他と区別したいテキストを表す
i斜体表?示専?門?用語などを表す
s取り消し線もう正確でないテキストを表す
hr罫線意味的な段落落を表す
smallテキストを?小さく表?示する注釈や細?目を表す
strongテキストを強調表?示する重要性を表す

HTML5で追加された属性
n? バリデーション属性
? input要素に付与すると、 submit時にチェックを?行行ってくれる
? required（必須）/ pattern（正規表現）/ maxlength（?文字数）など
n? 独?自データ属性
? スクリプトで利利?用する値を要素に保持するために、data-‐??で始まる属性
を?自由に定義することができる
ul
li data-id=0001りんご/li
li data-id=0002みかん/li
li data-id=0003いちご/li
/ul

CSS3

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

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

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

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

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

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

その他
n? ベンダプリフィックス
? -‐??webkit-‐?? / -‐??moz-‐?? / -‐??o-‐?? / -‐??ms-‐??
n? ボックスモデル
? サイズの算出（width/height/margin/padding/border）
? 表?示の制御（display/visibility）
? 影（box-‐??shadow）/ 切切り抜き（clip）/ ?角丸(border-‐??radius)
n? ?色
? カラーコード / カラーネーム / rgb / rgba
n? フォント
? Webフォント / レイアウト（単語間隔や?行行?高さなど）/ 装飾（?色や影）

レスポンシブWebデザイン

@media screen and (max-width: 800px) {
body{
background-color: #000
}
}
メディアクエリ
n? メディアクエリ
? デバイスの特性（ブラウザ幅など）に応じてCSSを切切り替える?方法
1. CSSファイル内でスタイルを指定
2. linkでCSSファイルを読み込むときに指定
link rel=stylesheet media=screen and (max-width: 800px)
href=style.css

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

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

受験対策

勉強?方法
n? 書籍
HTML5プロフェッショナル
認定資格レベル１教科書
HTML教科書 HTML5レベル1

試験対策講座
n? アシアルスクールのご案内
? https://www.facebook.com/asialjuku
? facebookで「アシアル」で検索索
n? 直近の開催予定
? 【HTML5プロフェッショナル認定試験講座】 Webの基礎知識識?攻略略
? 9/5（?金金）19:00 or 9/19（?金金）19:00
? 1時間 3000円

狠狠撸

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

Recommended

More Related Content

What's hot (20)

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

More from leverages_event (20)

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