【HTML5 Lv1試験の受験体験記】受験対策とかメリットとかを解説しましょうかね。

当初の予定から少々だいぶ遅れて、やっと合格できました。(`・ω・)=3

 

image

 

65問中、怪しい(ほぼ自信がない)が12問あったので危ないかと思ってましたが、突破できました。

 

そんなHTML5試験ですが、一言で言ってしまうと、

『舐めてかかると余裕で落ちれます』

普段、Webデザインとかの仕事をやっていない人は結構気合いを入れていかないと苦戦する事になるでしょう。

実は6月頃に1回受けて、69/100で憤死してしまいました(´・ω・`)

どうか私(@sakutomo0615)の様に1問の差で不合格となる人が一人でも減ってくれる事を祈ります。

 

HTML5 Lv1試験を受けようと思った動機

実は半年前くらいから取ろうとは決めていたんですが、そのまま9月まで放置状態となってしまいました。

私が仕事で抱えているサービスのWeb画面が構造が古かったりしていた関係で、あちこちリニューアルに追われていたんですよね。

まぁ、開発陣とUIや画面制御の話をする時にレスポンシブは避けて通れませんので、本業ではありませんが正しい基礎知識セットは身に付けておこうかなと。

 

蛇足なんですが、この基礎知識セットって本業でない分野こそすごく重要です。

PHP初級のときもそうなんですが、前提知識やプロセスに対する理解が足りていないと、指示も依頼も確認も検収と、どこのパートにおいてもコミュニケーション不全を起こします。

何よりも管理職が実際に起きている問題に対する前提知識が不足していると、メンバーはマネージャーに不信感を抱きます。

 

取得して劇的な効果があるか?と言うと特に無いんですが、知識量が足りていない事によるマイナスを減らすと言う意味では地味な効果があります。

運転免許と同様にあっても特別な効果はありませんが、一定の知識量が無いと確実に居場所がなくなると言った所です。

 

ちょっと前は画面のワイヤーフレームなんかはCacooとかで作ってましたが、今は直接HTMLとCSSで作った方が早いですね。

ネットから構造が近いテンプレートを拾ってきて、手直しするだけで済みますので。

 

地味でメンドクサイんですが、PHP上級・Ruby・Rails・JavaScript・C#くらいまで揃えられれば、かなりプラスに働くんじゃないですかね?

 

HTML5試験で求められるもの

そもそもHTM4からLHTML5に変わって、何がどうなったのでしょう?

大きなポイントが2つありますので紹介したいと思います。

b23e_35

 

 

レスポンシブWebデザイン

こちらはもう有名すぎる話ですね?文章コンテンツをHTML5で記述し、スマートフォンやタブレットに対する画面デザインはCSS3で記述したcssを複数作成し、表示するデバイス毎に最適な画面デザインで表示すると言うものです。

文章コンテンツはHTML5で、画面デザイン・表示レイアウトの切り替えはCSS3で、画面の動作や動的な画面の動作はJavaScriptで、フォームを使ってのサーバーとのデータのやり取りはPHPやRubyで・・・と言った様に、目的や機能に合わせて言語や作成するファイルを分別してサイトを作成します。

 

これのおかげで開発面でもチームで分業がしやすくなりましたね。

 

例えばこんな感じで分業することが出来ます。

記事などの文章コンテンツ・・・ライター

画面設計・レイアウト・表示制御・・・フロントエンジニア・UIデザイナー

フォームの作成・データ連携・API連携・・・プログラマー

と言った感じです。

 

セマンティクWebと論理構造

レスポンシブWebデザインとかが華やかなので、こういう地味なところがHTML5で軽視されがちです。(私は思いっきり軽視してました)

しかしながら、このセマンティクスとか論理構造の部分は検索エンジン対策(SEO)を考える上で非常に重要になってきます。

  1. semantics. 文章を文字,記号の配列とみなさないで,それに含まれている内容,意味を問題とすること. プログラム言語においては,文の構造,すなわち字句の配列の仕方を規定する構文に対比する語である. 構文は,プログラムを記号の列とみなして,正しいプログラムはどのような記号列であるべきかを規定するのに対し,意味は,プログラムをどのような機械語に翻訳すべきかを定める規則で,記号とその意味を規定している.
  2. ~出典:Weblio 辞書 http://ejje.weblio.jp/content/semantics~

HTML文章を単なる文字や単語の集合体と考える以外に、意味を解釈できるようにしましょうと言う事なんですね。

例を挙げると、私たち人間は文章の構造や流れから『櫻井』という単語が出てきたら、ほぼこれは人名であり、名字であると認識できますが、コンピューターにはこれが『商品名』か『地名』か『人名』か判別が出来ないんですね。

こういった言葉や単語の属性をコンピュータで解釈するべく、様々な改良が加えられました。

Schema.orgの構造化データをこれらの『ただの単語』に属性として付与することで、検索エンジンはよりユーザーの求める答えやサイトを回答することが出来ます。

(と言っても、アルゴリズムは日々進化を遂げていますので、この先また違った形になるかも知れませんが・・・)

 

HTML5ではタグや要素に気をつけて記述しないと、検索エンジンから思わぬペナルティを受けるかも知れませんよ?

 

例えば、他のサイトから記事や文章を引用する場合に<blockquote>要素や<q>要素で記述せずに、シレッと<p>タグで括って書いてしまうと、Google先生にパクリ判定されて、SEO上のペナルティを与えられることも有り得ます。

ちゃんと目的に合わせて要素を使い分けながらHTMLを書かないとダメって事なんですね。

 

HTML5 Lv1試験について

ダウンロード

昨今のレスポンシブブームもあって、そこそこ試験の需要もあるようですが、実際の現場で求められるのは『イケてるUIをデザイン出来るエンジニア』なのです。

よって、この試験を取ったところですぐに現場でスターになれると言う事はないでしょう。

 

しかし、ちゃんと必要なものは必要なものとして覚えておくべきだと思います。

まぁ、残念ながらこの試験はタグと要素の暗記ゲーが中心ですけどね(笑)

使う要素やタグが必然的にテンプレートなモノになりがちないぶし銀の現場の方々には、

大変メンドクサイ仕様となっております。

(input type=”text”のtype属性を省略できるか?って言われても、100%省略しませんよね?)

 

 ズブの素人からの試験対策

では、早速教材の話からです。使った教材は下記の3冊になります。

3冊ありますが、白本が一番やさしく事例も豊富で、その他2冊が試験対策のカラーが強くなります。

 

問題のレベルが青本・対策テキストの方が実際のレベルに近いです。

(それでもかなりエグイ問題も出ますがね?)

攻略テキストは実際の試験に比べるとかなりマイルドな出来になっています。

 

なので、普段あまりHTML5やCSS3に馴染みの無い方は

ドットインストールの『CSS3入門』『実録!ウェブサイトを作ろう』『レスポンシブなウェブサイトを作ろう』を見て、理解してから青本に挑むと良いと思います。

 

6月に受けて不合格だったときと、今回(9月)に受けた時とで明らかに問題のレベルが上がってました。(再受験の人だけ?)

正直、知るかボケ!ヽ(`Д´#)ノ って言ういたくなる問題がワンサカ出ます。

metaタグのマニアックな奴とか、font関連のマニアックな奴とかかなり重箱の隅を突いてきますのでご注意を。

 

まとめ

資格として取得することに意味はあまり無いように感じますが、Wordpressをちょっとだけカスタマイズしたい場合はCSS3の知識はほぼ必須になります。

(ちょっとアイコンやボタンを付けるとか、動きを付けるとか)

蛇足ですが、この記事の一番最初のサポートの画像にもホバーエフェクト(マウスを乗せると表示が変化)を付けました。

(Albatrosの子テーマのCSSにクラスを追加して作りました。正確には似たコードをネットから拾ってきて手を加えただけですけどw)

 

 

cbb72e12e56a43ea1ec926662c4c30f1

HTML5 Lv1だけだと威力は弱いですが、他のWeb関連の資格知識と組み合わせる事で徐々に強力なスキルセットになります。

やっぱりある程度の事は自分で出来るようになっておいた方が仕事のスピードが上がって生産性もUPしますよ。

 

次の試験はrubyを予定してますが、機会があればCSSのサンプルでも記事しようかと思います。

ABOUTこの記事をかいた人

櫻井智行

ネットワーク・サーバー系のフリーのインフラエンジニア。得意分野はデータベース・ネットワーク・負荷分散あたりです。30歳の頃に独立しましたが、それまでに巻き込まれた様々なデスマーチと火消しの実績からトラブルシュート案件ばかりが依頼される様に・・・。 ビットクリア設立後は趣味の炎上・デスマーチ観察を軸にデスマーチソムリエとして小田原市・東京を中心にグローバルに活動中。