はじめに

HTML5プロフェッショナル認定試験のレベル1に合格しましたのでメモをまとめておきます。

受験の動機

ここのところフロントの開発をすることが少なく、知識のアップデートができていなかったので、勉強がてら取得を目指しました。

試験概要

試験概要や試験範囲は以下です。

試験概要｜Web資格なら「HTML5プロフェッショナル認定試験」公式サイト

試験時間80分で60問のため、厳しそうに感じますが、数秒で判断できるような知識問題も多いので時間に余裕はあります。

前提知識

HTML4.01のころは多少勉強していたので、あまり基本的なことはメモしていません。

基礎知識

HTTP、セキュリティといった、HTMLを取り巻く周辺知識も問われます。
Webアプリケーションの開発に関わっているなら常識的な知識だと思います。

HTTPのメソッドやレスポンスコードなどは説明するまでもありませんよね。

キーワード

• マイクロデータ
  • 検索エンジンなどが識別可能なデータ
  • itemprop属性などでメタ情報を付与する
• 画像ファイルフォーマット

CSS

こちらも同じくHTMLとは切り離せないCSSに関連する知識も問われます。

規則

@で始まるもの。

• font-face
  • Webフォントの指定
• keyframes
  • アニメーションの流れを制御する
  • from, to, 50%など

プロパティ

• animation
  • animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state
• transform
  • none
  • rotate(角度)
  • translate, translateX, translateY
  • scale, scaleX, scaleY
  • skew, skewX, skewY
• transition
  • 遷移の意味
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
• z-index
  • 重なりの制御
  • 値が大きいほど手前になる

疑似クラス

• :nth-child()
  • 兄弟要素の位置に基づく選択
  • 例）tr:nth-child(odd)はテーブルの奇数行を表す

要素

HTMLのタグの知識。

要素の種類

HTML4.01でブロックレベル、インライン要素と分類されていましたが、HTML5ではコンテンツ・モデルと呼ばれる分類になります。

|メタデータ・コンテンツ|文書情報や他の文書との関係を定義|
|フロー・コンテンツ|子孫にテキストなどを持つ|
|セクショニング・コンテンツ|見出しと概要をつけられる|
|ヘッディング・コンテンツ|セクションの見出しとなるもの|
|フレージング・コンテンツ|段落の文節・語句など|
|エンベデッド・コンテンツ|文書に他のリソースを埋め込む|
|インタラクティブ・コンテンツ|ユーザの操作に対応する|

タグ

• bdi
  • バイディレクショナル
  • 書字方向異なるテキストの表現
• datalist
  • 入力項目の候補を定義する
  • input要素のlist属性の値とdatalist要素のid属性の値で紐づける
  • 子要素はoption
• input
  • type属性に色々増えた
• meta
  • HTML5からcharset属性で文字コードの指定ができる
• meter
  • 規定範囲内の測定値を示す
  • value, min, max, low, high, optimum属性
• progress
  • 進捗状況を表示する
  • max(デフォルトは1), value属性
• ruby
  • rtはRuby Text
  • rpはRuby Parenthesesでルビを囲む括弧など。rubyに対応したブラウザでは無視され、対応していないブラウザで表示される。
• time
  • 日付や時刻を表す。
  • datetime属性に指定することもできる。
  • 定められた書式である必要がある。
• track

属性

• contentEditable
  • 編集可能になる
• fromvalidate
• spellcheck
  • スペルチェック

HTML5で廃止された要素

• applet
• isindex

レスポンシブWebデザイン

HTMLを利用する上でのデザインの基本知識が問われます。

レスポンシブwebデザインとはPC、スマホで同じHTMLで表示できるようにデザインすることです。

ガラケー時代なんかはPC、モバイルで別のHTMLを返したりしていたのです。

• メディアクエリ
  • media規則またはlinkタグのmedia属性に記述
  • ユーザの媒体によってスタイルの適用を変える
  • all, screen, projection, print, speech, handheld, braille, embossed など
• マルチカラムレイアウト
  • column-countプロパティなどで簡単にできるようになった
• Fluid Image
  • 縦横比を維持したままウィンドウサイズを変える
• Fluid Grid
  • 可変のグリッドデザイン

APIおよび関連仕様

主にJavaScriptの知識が問われます。

• アプリケーションキャッシュ
  • html要素のmanifest属性に.appcacheを指定
  • CACHE:, NETWORK:, FALLBACK:
• OGP
  • Open Graph Protocol
  • metaタグにog:を指定して、SNSへのシェア時の情報をコントロールする
• WebRTC
  • Real-Time Communications
  • ビデオチャットなど
• Web Strage
  • ブラウザにデータを保持する仕組み
  • Cookieより大きな容量
  • key value
• Service Workers

おわりに

学習期間は2週間ほど、83点で合格しました。
難易度は低めです。それほどまとめることがありませんでした。

レベル2もそのうち受けたいです。

参考

HTML5リファレンス