【HTML5】入門 HTML5をまとめてみる

2015年8月21日HTML/CSS

こんにちは、しきゆらです

私は現在、絶賛夏休み期間です

毎年夏休みには何かやりたいなーと思っているんですが、気が付くと休みが終わっている・・・

今年はこんなことがないように、本を3冊借りて読むことにしました

今回はその1冊、O’Reillyから出版されている「入門 HTML5」を読んでまとめてみます


「入門 HTML5」には、HTML5とはどういったものなのか、今までのHTML4とはどう違うのか

ということがかかれています

では、内容やら気になった部分をまとめて行きます

第1章:ここまでの道のり

ここにはHTML5が策定されるまで、どのような経緯があったのか

現在までの歩みがかかれています

MIMEとか聞いたことあるけど実際何なんだろう?って感じだったが

ここを読んで納得した(気になっている)

第2章:HTML5の機能を検出する

ここでは、ブラウザがHTML5に対応しているかを調べるための方法がかかれています

ModernizrというJavaScriptライブラリを使用する方法がかかれていました

最近のブラウザでは大抵のものが対応しているはずですが、確認は大事でしょう

各ブラウザごとに対応状況が異なるので面倒ですね・・・

調べてみると、HTML5対応状況がまとめられたサイトをよく見ますが

主要なブラウザ(IE・FireFox・Google Chrome・Opera・Safari)以外にもブラウザはたくさんあるわけです

全部に対応する、というのは大変そうだな~と(小並感)

ひとまず、各ブラウザの対応状況を一覧できるサイトをいくつか張って起きます

Can I Use…

ブラウザの対応状況以外にも、シェアなども見れます

HTML5TEST

ページを開くと、ページを開いたブラウザの対応状況が見れます

私が普段使っているブラウザは「Firefox Nightly」で、執筆時(2015年8月21日)のバージョンは43.0a1でした

結果は以下の通り。

ちなみに、私のPCに入っているブラウザの中で最も結果がよかったのは「Vivaldi」でした(意外でした・・・)

第3章:HTML文章の構造と意味づけ

ここでは、サンプルページをHTML5へ実際に書き換えながら進めて行っている

サンプルページは、div要素で構造を作っていた

それを、HTML5から登場したheader要素やnav要素を使って書き換えてみよう

ということをページの頭から最後までやっていきます

実際に手を動かして確認できるのはいいね(小並)

今まではdiv要素で区切りid属性やclass属性で区分けしていましたが

どうやらdiv自体には意味がないとのこと

こういうことは普段は気にしたことがなかったので新しい発見でした

第4章以降はまだ読んでいないので、今後増やしていく予定です

それでは~

Posted by しきゆら