はじめに

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

受験の動機

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

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

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

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

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

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

形式	圧縮方式	透過	その他特徴
jpeg	非可逆	非対応
png	可逆	対応
gif	可逆	対応	アニメーション
svg	非	対応	ベクター方式

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

@で始まるもの。

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
- 重なりの制御
- 値が大きいほど手前になる

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

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

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

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

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

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

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

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