【HTML5】HTML5の実践的活用法&jsdoitの全国統一実力テストに出題された問題を紐解いてみよう

読了: 約 6 分

いやー本当に寒いですね(本日2度目)
次の職場で働くまで後2週間程あって暇なので只管勉学に励んでおります。

さて今回はHTML5。
HTML5と言えば、クライアントワークでも結構活用しておりましたが、正直そこまで『HTML5固有のもの』を使っていなかった気がします。※WebSocketやGeolocation等のAPI等

ですので、深掘りして、

1.よりセマンティックなソースコードを書く事、
2.HTML5から追加されたタグ・プロパティの実用例を探る
3.知らなかったが実用的でないものもメモる

以上の3点と目的として記事を書いていこうと思います。

概要

1 目次
2 jsdoitの全国統一実力テストとは
3 HTML5の実例問題と回答
4 まとめ
5 参考書籍

jsdoitの全国統一実力テストとは

HTML/CSSカテゴリーのバージョン
第二回jsdoitの全国統一実力テスト

こちらで結構難易度の高い問題も出るのでまずは現状のスキルチェックという事で
是非お試しあれ。

私は偏差値60でまだまだでしたのでもっと頑張らないとという結果に…
業務で使った事がないHTMLタグの属性も出てきたのでこの際全てメモです！＼(^o^)／

HTML5の実例問題と回答

HTML5で廃止された要素と追加された要素

詳細はW3Cのサイトにて。
W3C

strike要素は廃止になりました。
embedはHTML5から正式に追加された要素です。

embed

<embed src="images/wave.swf" width="400" height="300">

外部アプリケーションやインタラクティブなコンテンツ、例えば、Flashなどのプラグインを必要とするデータをHTML文書に埋め込む際に使用

具体的にいうと、上のSWFとか、mp3,4等音源データから映像データも扱えるようですね。

列挙属性とは

決められたキーワードしか指定できない属性の事。
下記のうち論理属性はautoplayのみ

contenteditable
autocomplete
draggable
autoplay

figure要素について

図表であることを示す際に使用
ここで言う図表とは、文書の本文（メインフロー）から参照されるようなイラスト・図・写真・ソースコードなど
図表にはcaptionがつけられて、その要素のことをfigcaptionという。
figcaption要素とimg要素を内包すると、img要素のtitle属性の代わりとしては機能しますが、alt属性は省略できません。

CSS3で定義されていないセレクタ

1が定義されていないセレクタです。
ただ、CSS4で提案されている擬似要素だそう。

CSS3セレクタリファレンス

1.example:local-link  { … }
2.example:empty  { … }
3.example:nth-last-of-type(5) { … }
4.example:not(.example2)  { … }

存在しないCSSプロパティ

2は惜しいんですがないんですよね。
transformのみならあるんですけどね。

1object-position
2background-transform
3ruby-align
4column-gap

object-position：
置換要素が構成するボックス内での、コンテンツの表示位置を指定
ruby-align：
ルピの位置揃えを指定
column-gap：
マルチカラムで段組みを行った場合の、段の間隔を指定

マークアップ例のうち、不適切なもの

1<section><a href="..."><div>テキスト</div></a></section>
2<p><a href="..."><video  src="..."></video></a></p>
3<ruby><em>全国</em>統一<rt><em>ぜんこく</em>とういつ</rt></ruby>
4<ul><li>...</li><ins><li>...</li></ins></ul>

a要素はコンテンツ・モデルとして、video要素のようなインタラクティブ・コンテンツを許していません。
しかし、controls属性がないvideo要素はインタラクティブ・コンテンツではないため、これは適切なマークアップなようですが、
個人的にはこういう使用シーンは少ないんじゃないかなと思います。

ul要素のコンテンツ・モデルは、li要素しか許していないため、このマークアップは不適切
そもそも、HTML5に限らず昔からそうですよね。li属性の間になにか要素を入れる事がないですね。
ul 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP

画像のドラッグ操作を禁止するための以下の指定のうち、期待通りに動作しないものを以下から選べ（Webkit系ブラウザであるとする）

ドラッグさせなくする属性とプロパティはいくつか考えられますが、
2のondrag属性ではなく、

<img src="sample.png" ondragstart="return false;" />

のように、ondragstart属性であればドラッグを禁止できます。
return falseで動作をさせなくしているんですね。

1<img  src="sample.png" draggable="false" />
2<img  src="sample.png" ondrag="return false;"  />
3<img  src="sample.png" onmousedown="event.preventDefault();"  />
4<img  src="sample.png" style="-webkit-user-drag:  none;" />

まとめ

CSS3については少ししか触れていません。
transform等のプロパティもどんどん使用して表現豊かなコンテンツを作っていきたいですね。
特に既にスマートフォンのブラウザゲームを作成している会社ではどんどん使われていると思いますので
どんどんキャッチアップしていきたいと思います。
そういえば：jQuery1.8以上では、transformとか使えるようになったんですね！

参考書籍

基本的なセクショニングコンテンツを学んだあと今回ご紹介したような、属性やプロパティを
どんどん取り入れて行く事が良い方法なのではと思います。
また、CSS3に関しては表現の幅が広がって来ていてJavaScriptと一緒に使用して
豊かな表現が可能になりましたね！それによってandroidが…みたいなこともありますが笑

最近出た書籍
幅広い所までカバーしていて、基礎的な所から有る程度実践で戦える人になれるんじゃないかと思いました。

レスポンシブデザインも一応ご紹介
最近の流行りであるレスポンシブデザインのまとめが書いてある書籍。
初めての人にも分かり易い構成で、これからクライアントワークがあるけどどうしようと
思っている方でも安心して出来そう。
※ただ、JavaScriptを使用しないと厳しい事も出てきますので、そこはフロントエンドのデベロッパーに
お願いした方が良いかもしれませんね！

目次