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

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プロフェッショナル認定試験対策講座

More Related Content

What's hot

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

More from leverages_event

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