Atrasi-2079-Vox

フリーランスウェブデザイナーArata-Atrasi-Takamiのブログ。服・靴・育児ときどき開発。

HTML5クイズ

  • 投稿日:2012/10/22
By: Michael Pollak

ウェブデザイナーの仕事をしてるものですから、当然ながらHTMLを打つ機会も結構多いです。

会社によってはデザイナーさんと別に「コーダーさん」がいて、HTMLはほとんどコーダーさんが打つなんて場合もあるらしいですが、私の勤めている会社はどちらかと言うと少数精鋭派なので、コーダーさんなんて人はいません。

「HTMLって何?食べれるの?」って方には難しいかも知れないですが、世の中のホームページはHTMLを使って書かれています(厳密にはXHTMLとか色々あるんですが)。

 

一言で言うと、コンピュータに「このホームページはこういう風に表示しろよ」と指示するための言語ですね。

HTMLにも規格みたいなもんがありまして、最近は「HTML5」っていう最新規格が策定中です。基本的には今までのHTMLと一緒なんですが、インターネットが普及し始めた頃と今ではだいぶウェブサイトを取り巻く状況も変わってきてますんで、この辺でいっちょ規格を見直して、現在のウェブサイト・今後のウェブサイトのためにより良い規格をまとめようじゃないか…という事です。ハイ。

 

「じゃあその、えいちてぃーえむえるふぁいぶはいつから使えるの?」って話なんですが、実はもう様々なブラウザソフト(インターネット見るためのソフトね)は対応を始めてます。策定まだ済んでないけど。ここでも相変わらずマイクロソフトのインターネットエクスプローラーちゃんは足を引っ張っている訳ですが、まぁバージョン9から対応していくようですので大丈夫でしょう。

私は仕事でスマートフォン向けサイトの制作やる機会が多かったもんですから、HTML5も積極的に使う機会に恵まれたんですね(iPhoneやAndroid等の大抵のスマートフォンはHTML5に対応してるものが多いです)。

 

HTML5から新しく追加されたタグも出てきました。

「audio」というタグはその名の通りMP3ファイル等を設置する時に使ったりします。このaudioタグに対応したブラウザソフトで見ると、下記のようなプレーヤーが表示されるんですね。

今まではこういうプレーヤーはFlashだとかJavaScriptといったプログラミング言語を使って実装する必要がありましたが、HTML5ではaudioタグの中で該当するmp3ファイルを指定するだけでOKになります。

タグの書き方も簡単で、下記のようにしてsrcにオーディオファイルへのパスを書き、controlsと書けば上記のようなプレーヤーが表示されます。なおプレーヤーのデザインは各ブラウザソフトに依存するようで、CSSではコントロール幅のみ指定できる様です。

<audio src=”audio.mp3″ controls>

 

 

ところで、たまにですが自力でホームページを作り始めたという友人なんかに「HTMLのタグって全部覚えないとダメ?」とか聞かれることがあります。まぁ色々覚えている方がより正確なマークアップができるとは思うんですが、正直なところ全部覚えるのは難しいと思いますし、よく使うタグも割と限られてくるので丸暗記する必要は無いんじゃないかと思いますね。

というか、HTMLタグはリファレンス本を見ながら「う~んう~ん」としかめっ面で覚えるよりも、実際のウェブページをHTMLでガシガシ書きまくった方が早く覚えますし、どういう場面でどういうタグを使うべきか理解しやすいと思います。リファレンスは答え合わせ的に使うほうが役立つんじゃないかなーというのが、個人的な見解です。

 

んで「丸暗記より書いて覚えろ」という私の見解に矛盾する様ですが、HTML5のタグクイズみたいなものがあります(笑)まぁ沢山覚えておくに越したことはないですから(笑)

HTML5 Elements Quiz

やり方は非常にシンプルで、制限時間の5分以内にHTMLのタグ要素をバカスカ打ち込んでいくだけです。

打ち込む時は「<」みたいな記号は要りません。「p」とか「header」とかで打ち込んでいけばいいです。ちなみに要素が入力されると、自動的に認識するので「small」と打とうとすると、先に「s」が自動的に打ち込まれることになります。

打ち込むと上記の画像の様に、打ち込まれた要素が入力欄の下に並んでいきます。私は制限時間内にコンプリートしたことはありません。意外と制限時間内だと打てなかったりします。「ul」「li」のように関連したものはどんどん出てきますが、意外と「strong」とか忘れがちです。

HTML5をお勉強中の方は暇つぶしにでもいかがでしょうか。