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

HOME > 出題範囲

各項目について

重要度 : 試験における各分野における重要度の相対値で、おおよその問題比率となります。

説明 : 各分野の概要について記述しています。

主要な知識範囲 : 認定にあたって必要となる知識範囲について記載しています。

重要な技術要素、タグ、ユーティリティ : 試験範囲の中でも特に重要なキーワード。ここに記載されていないものについて出題されない事を保証するものではありません。

HTML5プロフェッショナル認定試験 レベル1(Markup Professional)

出題構成

Webの基本知識 30%
CSS3 20%
要素 37%
レスポンシブWebデザイン 10%
オフラインWebアプリケーション
(概要とマニフェスト)
3%

出題範囲

1.1 Webの基礎知識

1.1.1 HTTP,HTTPSプロトコル

重要度 7
説明 HTML5を使ったコンテンツを作成するにあたって、知っておくべきHTTP,HTTPSプロトコルに関する基礎知識について問う
主要な知識範囲
  • ブラウザとWebサーバ間でやりとりされる通信内容や手順
  • HTTPリクエストにおけるメソッド種類と違い
  • リクエストURIの仕様について書式や利用可能文字
  • Webサーバが返すレスポンスのヘッダ項目
  • Webサーバが返すレスポンスのステータスコード
  • HTTPプロトコルに規定されている認証方式
重要な技術要素、タグ、ユーティリティ
  • HTTP, HTTPS, SSL,
  • Message Types, Message Headers, Message Body, Message Length, General Header Fields
  • リクエストメソッド(GET,POST,HEAD,PUT,DELETEなど)
  • URI,URL
  • ステータスコード,リダイレクト
  • HTTP Header Fields(Accept,Authorization,Cache-Control,Content-Language,Expriresなど)
  • Basic認証、Digest認証
  • HTTP cookie

1.1.2 HTMLの書式

重要度 8
説明 規格に準拠したHTMLを正しく記述するために必要な書式に関する知識について問う
主要な知識範囲
  • HTMLバージョン情報を含む文書型宣言に関する記述方法
  • 要件に合わせた言語コードと、文字コード(符号化方式)の指定に関する記述方法
  • HTMLで使用可能な文字参照に関する記述方法
  • 必要に応じて、ヘッダ内に外部リソースを指定するリンクに関する記述方法
  • 必要に応じて、ヘッダ内にメタ情報に関する記述方法
重要な技術要素、タグ、ユーティリティ
  • DOCTYPE
  • ISO-2022-JP, Shift_JIS, EUC-JP, UTF-8
  • 文字(実態)参照
  • <title>,<link>,<meta>

1.1.3 ネットワーク・サーバ関連技術の概要

重要度 6
説明 HTML5のコンテンツを作るプロジェクトの一員として最低限知っておくべき、ネットワーク、サーバに関する知識について問う
主要な知識範囲
  • HTMLコンテンツをサーバから取得する工程に関連するネットワークプロトコルの概要
  • DNSのしくみ
  • HTMLコンテンツを取得する際に利用する、Webサーバ、Webプロキシ-などのサーバ関連技術の概要
重要な技術要素、タグ、ユーティリティ
  • TCP,UDP,IP
  • ドメイン,DNS,whois情報
  • Webサーバ,Webプロキシ,リバースプロキシ,バーチャルホスト
  • 負荷分散装置,データベース,ファイアーウォール
  • データベース,SQL
  • UTM(統合脅威管理),改ざん検知,侵入検知

1.1.4 Web関連技術の概要

重要度 6
説明 HTML5のコンテンツを作るにあたって、要件やプロジェクトの目標、アーキテクチャなどを理解した上で作成する際に必要になるWeb関連技術に関する知識について問う
主要な知識範囲
  • Webコンテンツを作成する際に使うスクリプト言語や画像ファイル、規格の概要
  • Webに関連する、セキュリティ脅威に関して概要
  • Webサイトのマーケティングおよび広告、アクセス分析に関する技術の概要
  • 要件に応じて、HTMLコンテンツ作成の際に理解が必要となるWeb関連技術の概要
重要な技術要素、タグ、ユーティリティ
  • セッション
  • Javascript,Ajax
  • インタレース,画像ファイルフォーマット(BMP,PNG,JPEG,GIFなど)
  • MVCアーキテクチャ
  • CMS
  • Base64
  • Data URI
  • SQLインジェクション,クロスサイト・スクリプティング,CSRF (クロスサイト・リクエスト・フォージェリ),ディレクトリ・トラバーサル,HTTP ヘッダ・インジェクション
  • SEO、検索ロボット,OGP
  • DOM,XHTML
  • マイクロデータ,データURL,カスタムデータ属性
  • RDF,RDFa
  • SOAP
  • ROI,ペイパークリック広告,アドワーズ広告,アフェリエイト広告,コンバージョンレート

1.2 CSS3

1.2.1 スタイルシートの基本

重要度 6
説明 CSSを利用したコンテンツを作るにあたって必要な、書式やセレクタについての基本的知識について問う。
主要な知識範囲
  • 要件やデザイン仕様に合わせて、HTMLから利用したいスタイルシートの指定する際の記述方法
  • 要件やデザイン仕様に合わせて、スタイルシートに正しいセレクタを指定しプロパティ値を指定際の記述方法
重要な技術要素、タグ、ユーティリティ
  • <link>,@import,<style>,style属性
  • セレクタ,タイプセレクタ,クラスセレクタ,IDセレクタ,ユニバーサルセレクタ,属性セレクタ
  • シンプルセレクタ(疑似クラス),疑似要素,結合子,グループ化

1.2.2 CSSデザイン

重要度 9
説明 CSSを使ったデザインを、要件やデザイン仕様に従って適切に記述する事ができるかについて問う。(プロパティ,@ルール,関数など)
主要な知識範囲
  • コンテンツのレイアウトに関する記述方法
  • 色、背景、罫線に関する記述方法
  • テキスト、リスト、テーブルに関する記述方法
  • コンテンツの変形、アニメーションに関する記述方法
重要な技術要素、タグ、ユーティリティ
  • ボックス(display,margin,padding,width,height,max-width,min-width,max-height,min-height,float,clear,overflow,visibility)
  • マルチカラムレイアウト(column-count,column-width,columns,column-gap,column-rule,column-rule-style,column-rule-width,column-rule-color,column-span)
  • flex,z-index,clip
  • 色指定(color,opacity)
  • 背景指定(background,background-color,background-image,background-repeat,background-position,background-attachment,background-clip,background-origin,background-size)
  • 罫線(border,border-style,border-width,border-color,border-radius,box-shadow,liner-gradient,radial-gradient)
  • フォント(font,font-size,font-weight,font-style,font-variant,font-family,Webフォント(@font-face))
  • テキスト(text-transform,white-space,word-break,hyphents,text-align,word-spaceing,letter-spacing,text-indent)
  • テキスト装飾(text-decoration,text-decoration-line,text-decoration-style,text-decoration-color,text-shadow,line-height,vertical-align,direction,unicode-bidi,quotes)
  • リスト(list-style,list-style-type,list-style-image,list-style-position,content:counter,counter-increment,counter-reset)
  • テーブル(caption-side,table-layout,border-collapse,border-spacing,empty-cells)
  • 変形(transform,transform-origin),移動,拡大,縮小,回転
  • トランジション(transition, transition-duration, transition-property, transition-timing-function, transition-delay)
  • アニメーション(@keyframes, animation, animation-name, animation-delay, animation-duration, animation-iteration-count,animation-timing-function,animation-direction,animation-play-state,animation-fill-mode,)

1.2.3 カスケード(優先順位)

重要度 2
説明 CSSにおける、カスケードの概念および、指定プロパティが衝突した場合の優先順位に関する知識について問う
主要な知識範囲
  • 外部・内部スタイルシート、インラインスタイルシートの指定に関して記述場所による優先順位
  • セレクタの優先順位に関する計算方法
重要な技術要素、タグ、ユーティリティ
  • カスケード
  • 外部スタイルシート,内部スタイルシート,インラインスタイルシート
  • !important

1.3 要素

1.3.1 HTML4.01以前の要素および属性

重要度 7
説明 HTML4.01以前の要素に関する用途および属性も含めた記述方法に関して問う。
主要な知識範囲
  • ヘッダと、全体構造を指定するための要素
  • テキストに関連する要素
  • リストに関連する要素
  • テーブルに関連する要素
  • リンクに関連する要素
  • 画像に関連する要素
  • フォームに関連する要素
  • スクリプトに関連する要素
重要な技術要素、タグ、ユーティリティ
  • <HEAD>
  • <TITLE>
  • <BASE>
  • <META>
  • <BODY>
  • <DIV>,<SPAN>
  • <H1>,<H2>,<H3>,<H4>,<H5>,<H6>
  • id属性,class属性
  • lang属性,dir属性
  • <STRONG>,<P>,<BR>,<PRE>
  • <UL>,<OL>,<LI>,<DL>,<DT>,<DD>
  • <TABLE>,<THEAD>,<TFOOT>,<TBODY>,<TR>,<TD>
  • <A>,<LINK>
  • <IMG>
  • <FORM>,<INPUT>,<BUTTON>,<SELECT>,<OPTION>,<TEXTAREA>,<LABEL>
  • <SCRIPT>,<NOSCRIPT>

1.3.2 HTML5で新しく加わった要素および属性

重要度 10
説明 HTML5で利用できる要素および属性に関して、要件に従い正しく記述するための知識について問う
主要な知識範囲
  • HTML5で新たに加わった要素
  • HTML5で変更になった要素および、その属性
  • HTML5で新たに加わった属性
  • HTML5で変更になった属性
重要な技術要素、タグ、ユーティリティ
  • <section>,<article>,<aside>,<hgroup>,<header>,<footer>,<nav>,<figure>,<figcaption>
  • <audio>,<video>,<source>,<track>,<embed>
  • <mark>,<progress>,<meter>,<time>
  • <ruby>,<rt>,<rp>,<bdi>,<wbr>
  • <canvas>
  • <command>,<details>,<summary>,<detalist>,<keygen>,<output>
  • input要素のtype属性(tel,search,url,email,datetime,date,month,week,time,datetime-local,number,range,color)
  • a要素、area要素のmedia属性
  • meta要素のcharset属性
  • input,select,textarea,button要素のautofocus属性
  • input,textarea要素のplaceholder属性
  • input,textarea要素のrequired属性
  • input要素のautocomplete,min,max,multiple,pattern,step属性
  • form要素のnovalidate属性
  • input,button要素のformaction,formenctype,formmethod,formnovalidate,formtarget属性
  • style要素のscoped属性
  • script要素のasync属性
  • html要素のmanifest属性
  • ol要素のreversed属性
  • contenteditable属性
  • contextmenu属性
  • data-*属性
  • draggable属性
  • dropzone属性
  • hidden属性
  • role 属性
  • spellcheck属性

1.3.3 HTML5で廃止されたタグ

重要度 5
説明 HTML5で廃止になった要素、属性に関する理解について問う。
主要な知識範囲
  • HTML5で廃止になった要素
  • HTML5で廃止になった属性
重要な技術要素、タグ、ユーティリティ
  • <basefont>,<big>,<center>,<font>,<strike>,<tt>
  • <frame>,<frameset>,<noframes><tt>
  • <acronym>
  • <applet>
  • <isindex>
  • <dir>
  • a,link要素のrev属性とcharset属性
  • link要素のtarget属性
  • html要素のversion属性
  • img要素のname属性
  • caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr 要素の align 属性
  • body要素のbackground属性
  • table, tr, td, th, body 要素の bgcolor 属性
  • table 要素の cellpadding 属性と cellspacing 属性
  • table 要素の frame 属性
  • td, th 要素の height 属性
  • img, object 要素の hspace 属性及び vspace 属性
  • td, th 要素の nowrap 属性
  • iframe 要素の scrolling 属性
  • hr 要素の size 属性
  • col, colgroup, tbody, td, tfoot, th, thead, tr 要素の valign 属性
  • hr, table, td, th, col, colgroup, pre 要素の width 属性

1.4 レスポンシブWebデザイン

1.4.1 マルチデバイス対応ページの作成

重要度 4
説明 一つのソースで、複数の画面サイズが違うデバイスに対応できるWebページを作成する技術に関して問う
主要な知識範囲
  • マルチデバイス対応ページを作成する際に考慮すべき点
  • レスポンシブWebデザインにおけるページ構成要素の配置手法
  • レスポンシブWebデザインにおける画像の扱い
重要な技術要素、タグ、ユーティリティ
  • フルードグリッド(Fluid Grid)
  • フルードイメージ(Fluid Image)
  • 固定レイアウト、可変レイアウト
  • viewport
  • リセットCSS

1.4.2 メディアクエリ

重要度 4
説明 メディアクエリを利用して、画面サイズ毎に適用するスタイルを切り替えるサイトを作成する方法に関して問う
主要な知識範囲
  • メディアタイプ、メディア特性を指定し、正しい構文で条件毎に適用するスタイルを切り替える場合の記述
  • エラーが発生した際の、エラーハンドリングに関する記述
重要な技術要素、タグ、ユーティリティ
  • メディアクエリ
  • メディアタイプ
  • メディア特性
  • ピクセル,dpi,dpcm

1.4.3 スマートフォンサイト最適化

重要度 3
説明 コンテンツをスマートフォンに最適化する際に必要となる知識について問う
主要な知識範囲
  • スマートフォンにおける画像の扱い
  • スマートフォン特有の設定について、注意すべき点
  • スマートフォンにて閲覧する際のパフォーマンス向上技術
重要な技術要素、タグ、ユーティリティ
  • CSSスプライト
  • 高解像度画面向け対応
  • viewport,density,initial-scale
  • ファビコン,アイコン設定(apple-touch-icon,apple-touch-icon-precomposed)
  • スタンドアローンモード
  • 電話番号へのリンク
  • script要素,async属性,defer属性

1.5 オフラインWebアプリケーション(概要とマニフェスト)

1.5.1 オフラインWebアプリケーション(概要とマニフェスト)

重要度 2
説明 HTML5で作成したコンテンツをオフライン状態で動作させる方法について概要とマニフェストファイルに関して問う
主要な知識範囲
  • コンテンツをオフラインで動作させる事のメリット、デメリット
  • キャッシュマニフェストの概要とセクション種別
  • マニフェストファイルをサーバにアップし、利用できるようにする手順
  • ローカルのキャッシュデータを更新させる手順
  • ローカルのキャッシュデータを確認・削除する方法
重要な技術要素、タグ、ユーティリティ
  • html要素のmanifest属性
  • キャッシュマニフェスト,セクション(CACHE,FALLBACK,NETWORK)
  • .htaccess,MIMEタイプ

HTML5プロフェッショナル認定試験 レベル2 (Application Develop Professional)

出題構成(案) ※)現在検討中です。

JavaScript, Selectors API(Level1,Level2), マルチブラウザ対応 35%
Canvas, SVG, マルチメディアコンテンツ 15%
オフラインアプリケーションAPI 5%
Session History and Navigation 5%
表示 5%
ストレージ 10%
通信 10%
Geolocation API 5%
Web Workers 5%
パフォーマンス 5%

出題範囲(案) ※)現在検討中です。

2.1 JavaScript

データ型
変数
式と演算子
制御文
配列
オブジェクト
関数
クラス・インスタンス
コンストラクタ、プロトタイプ
イベント
正規表現
DOM

2.2 Selectors API(Level1,Level2)

Document Interfece
DocumentFragment Interfece
Element Interfece

2.3 マルチブラウザ対応

UserAgent
パフォーマンス
レガシーブラウザ対応

2.4 Canvas

基本図形描画
矩形
塗りつぶし
曲線
テキスト描画
変形
拡大
回転
移動
エフェクト
合成
グラデーション
イメージデータ
画像表示
ピクセルデータへのアクセス

2.5 SVG

基本図形描画
rect
circle
polygon
エフェクト
合成
グラデーション
テキスト描画

2.6 マルチメディアコンテンツ

video要素
audio要素

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

applicationCache
statusプロパティ
update(),swapCache()
キャッシュの更新処理
アプリケーションキャッシュのイベント
checking,error,noupdate,downloading,progress,updateready,cached,obsolete
navigator.onLine
windowオブジェクトイベント
online,offline

2.8 Session History and Navigation

Historyインターフェイス
length, state
go, back, forward
pushState, replaceState
Locationインターフェイス
assign,replace,reload

2.9 表示

Page Visibility
Fullscreen
Timing control for script-based animations

2.10 ストレージ

Web Storage
Indexed Database API
File API

2.11 通信

WebSocket
XMLHttpRequest
Constructors(anonymous flag),Garbage collection,Event handlers,States,
Request
method(methodopen(),setRequestHeader(),send(),abort())
attribute(timeout, withCredentials, upload)
Response
method(getResponseHeader(), getAllResponseHeaders(), overrideMimeType())
attribute(status, statusText, responseType, response, responseText, responseXML)
HTML5 Web Messaging
window.MessageEvent()
MessageEvent Interface
MessageChannel Interface
MessagePort Interface
Progress Events

2.12 Geolocation API

Geolocation interface
method(getCurrentPosition,watchPosition,clearWatch)
コールバック(PositionCallback,PositionErrorCallback)
PositionOptions interface
attribute(enableHighAccuracy,timeout,maximumAge)
Position interface
Coordinates interface
PositionError interface
エラーコード(PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT)

2.13 Web Workers

オブジェクトへのアクセス制限
WorkerGlobalScope, DedicatedWorkerGlobalScope, SharedWorkerGlobalScope
イベントループ
ライフタイム
エラー処理
Creating workers(AbstractWorker)
SharedWorker interface

2.14 パフォーマンス

Navigation Timing
High Resolution

The HTML5 Logo is licensed under Creative Commons Attribution 3.0 Unported by the W3C
All Rights Reserved. Copyright© The Linux Professional Institute Japan.