HTML5、どうやって勉強すればいい?――「HTML5プロフェッショナル認定資格 Level.1」を受けてみた

builder by ZDNet Japan Ad Special
2014-06-10 13:00:00
  • このエントリーをはてなブックマークに追加

おすすめの勉強方法は?

 「受験対策」のページに、学習に有用な本や、学校の紹介が掲載されているので参考にしよう。筆者のおすすめの勉強方法は次の通りだ。

  1. 「出題範囲」と「教科書」で試験範囲を把握しよう
  2. 「参考書」で体系的に知識を身につけ、細かい仕様はGoogleと規格書で確認
  3. 実際に書いて試してみよう

 それぞれについて、解説していく。

1. 「出題範囲」と「教科書」で試験範囲を把握しよう

 「HTML5プロフェッショナル認定資格」では、「HTML5認定教材」というLPI-Japanが「HTML5プロフェッショナル認定試験」の出題範囲を網羅していることを審査し、認定した教材を用意している。

 2014年4月現在、「HTML5プロフェッショナル認定資格 レベル1 教科書(紙書籍Kindle版)」の1冊が「HTML5認定教材」として認定されている。

 「出題範囲」に沿って作成された教材なので、無駄なく学習を進めていくことが出来る。ただし、教科書は出題範囲をカバーしているが、実際の設問では、教科書の内容よりも詳細を問われるものも出題されるので要注意だ。そこで、「出題範囲」と教科書を読み進め、試験範囲を確認しつつ、より詳細な知識は参考書やWebページなどで理解を深めるのが、受験対策としては効果的だろう。

2.「参考書」で体系的に知識を身につけ、細かい仕様はGoogleと規格書で確認

Webの基礎知識

 Webの基礎知識では、例えば以下のような問題が出題される。

問題1

HTTP/1.1に関する記述のうち、間違っているものを選びなさい。

  • トランスポート・プロトコルとして、通常はTCPを使用する。
  • デフォルトのポート番号は80番である。
  • 定義されているメソッドは、GETとPOSTの2種類である。
  • リクエストには、リクエストライン・リクエストヘッダフィールド・ボディメッセージなどが含まれる。
  • レスポンスにおけるステータスコードの番号が5から始まる場合は、サーバ側でなにか問題が発生している可能性が高い。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

(「サンプル問題/例題解説」より)

 HTTPとは、WebでHTMLなどを配信するための基本的なプロトコルだ…といっても、ウェブデザイナーなど、普段HTMLは触るが、HTTPをはじめとするサーバ技術に縁のない方には、体系的に学ぶ必要があるだろう。

 「Webの基礎知識」を勉強するのにおすすめの参考書が、「HTTPの教科書」だ。イラストを使い、わかりやすく書かれており、やさしく読み進めることができる。インターネットがどのように動いているのか理解し、試験に臨めるだろう。

 また、「Web関連技術の概要」として、Webに関連するキーワード(例えば「OGP」や「 コンバージョンレート」など)に関する設問が出題される。これも、普段Web関連の業務をされている方にとっては常識問題に近いが、馴染みのない方は、教科書や、Googleで検索するなどして、しっかりとキーワードの意味を把握しよう。

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

 「要素」とは、HTMLの要素のことで、以下のような問題が出題される。

問題3.1

以下のようにHTML5の仕様でマークアップを行い、テキストの一部を"重要なテキスト範囲"として指定し、音声出力における強い表現などを期待したい。コード内の①に入る、最も適切な要素名を選択肢から一つ選びなさい。

<p> <①>重要なお知らせ!</①> 明日の集合時間は7時に変更となりました。</p>
  • mark
  • s
  • strong
  • b
  • i

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

(「サンプル問題/例題解説」より)

 ここでの勉強方法は、

  • HTML4.01でのタグの書き方
  • HTML4.01からHTML5への変更点(タグと属性の追加、変更、廃止など)

の把握が重要だ。

 要素については、<canvas>や<video>、<audio>などの新要素はもちろん、サンプル問題のように、HTML4.01から意味が変わる要素もあるので、要素ごとに論理的な意味を把握しよう。

 なお、JavaScriptは「Level. 1」では出題範囲に含まれない。

 参考書については、HTML5が策定中の規格ということもあり、情報が少し古かったり、網羅されて書かれていなかったりと、なかなかこれというものが見つからなかったので、筆者はWebサイトの情報をメインに勉強を行った。

 参照したWebサイトのリンクを以下に掲載するので、参考にしてほしい。

CSS3、 レスポンシブWebデザイン

「CSS3」については、次のような問題が出題される。

問題3.2

CSS3において、div要素の背景色が半透明になる記述として正しいものを1つ選びなさい。

  • div {background-color: rgba(255,0,0,128);}
  • div {background-color: #FF000088;}
  • div {background-color: rgba(255,0,0,0.5);}
  • div {background-color: transparent;}
  • div {background-color: rgba(100,%0,%0,%50%);}

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

(「サンプル問題/例題解説」より)

 「CSS3」や「レスポンシブWebデザイン」については、いくつか本が出版されているが、ここでは参考書として掲載されている「CSS3 スタンダード・デザインガイド」と「スマートフォンサイトのためのHTML5+CSS3」で勉強をした。本を一通り読んだ後は、出題範囲に記載されているキーワードと照らし合わせて、仕様の詳細を確認しよう。

 しかし、サンプル問題のように、CSSプロパティの設定方法や設定できる要素などを問う設問も用意されている。これらは、普段HTMLやCSSを書き慣れていれば答えるのは容易だが、そうでなければ本を読んだだけではなかなか回答が難しいだろう。

3. 実際に書いて試してみよう

 HTML5/CSS3については、やはり実際に書いて試してみるのが一番だ。レンタルサーバーなどで環境がある場合は実際のHTML5のWebサイトを作成してみよう。

 また、おすすめしたいのが、手軽にHTMLを書いて試せるオンラインエディタだ。似たようなサービスがいくつかあるが、jsbin.comをおすすめしたい。jsbinでは、書いた内容をリアルタイムでプレビューできる。

 書いた内容にはURLが作成されるので、スマートフォンなど、別の環境で確認することもできる。


実際に手を動かしてみることは勉強する上で大事だ
  • コメント(1件)
#1 えるぴっくん   2014-07-07 22:07:23
これって合格したら人形もらえるのか?
  • 新着記事
  • 特集
  • ブログ