カテゴリー

キーワード

 
> 2015年 コーディングはHTML5...

2015年 コーディングはHTML5で。IE8以下の対策も忘れずに


2015 年 2 月 9 日 投稿    view: 71103
タグ:
このエントリーをはてなブックマークに追加

前回、「次回はHTMLの要素についてお話しさせていただきます」と申し上げましたが、急遽予定を変更してお送りします。


「2015年の今、HTMLはどのバージョンで書くべきか」という問題です。


去年(2014年)の10月29日にW3C(ウェブで利用される技術の標準化をすすめる国際的な非営利団体)から正式にHTML5が勧告されたので、もう答えは出てるようなものですが、これからHTMLを書こうという方の中には、

「結局どうすればいいの?」

と思われている方がいるかもしれませんので改めて取り上げようと思いました。


(HTMLを勉強中で基本をご存知ない方は、結論だけ読んで他は飛ばしてくださって結構です)


いきなり結論:やっぱりHTML5

僕の意見はこうです。


これから作るサイトに関してはHTML5で記述すべきだと思います。


その理由は3つです。

1. HTML5以外でコーディングされた既存サイトは将来的にHTML5で記述し直す方がよくなる。(拡張性やコードの統一性といった観点から)

2. HTML5はセマンティック()な文書構造にできる。

3. HTML5に対応していない主要ブラウザはIE8以下だが、そのシェアは年々下がっている。

2015年1~3月現在、日本国内ではIE8が3.08% (外部サイト ⇒ ブラウザシェア状況


以上、3つの理由でこれからはHTML5で記述すべきだと思います。


セマンティック
コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語
W3C のティム・バーナーズ=リーが提唱した「セマンティック・ウェブ」の概念が基となっている。

そうはいってもIE8以下はどうするの?

とはいえ、まだまだIE8を無視できないという案件もあると思います。
その場合はHTML5でコーディングして、IE8にも対応するということが求められます。


IE8以下に対応する方法は2つあります。

1.HTML5で記述するが、HTML5から導入されたタグに装飾をつけない。(cssを当てない)

2.html5shiv.jsを読み込んで、HTML5で記述する。


IE8以下に対応するにはどちらが良いのか?

僕のオススメは①の方です。


理由は2つ。

1. html5shiv.jsは軽量だが、やはり外部ファイルなので最新のブラウザに比べ処理の遅いIE8以下に負担がかかる(可能性がある)。
2. html5shiv.jsは万能ではない。


2について少し詳しく説明します。

html5shiv.jsはとても便利ですが、一つ落とし穴があります。

html5shiv.jsがやってくれるのは「header」「footer」「article」などHTML5で採用された新しいタグをHTML5未対応のブラウザに認識させるだけです。


つまり、レイアウト崩れを防いでくれるというだけで、HTML5で導入された画期的な2つの要素である構造化タグ、動画編集タグのうち、後者には対応していないのです。


(僕が以前、html5shiv.jsを読み込んでIE8でvideoタグを試したことは秘密です。当然動きませんでした。勝手に落とし穴に落ちた感じですが、笑)


videoタグをIE8に対応させる方法はコチラ⇒ HTML5のvideo要素を紹介 IE8にも対応させました【HTML5実践編】

で、オススメのやり方でどう書くの?

1. まず<div>を使わずに、見出し<h1>~<h6>や文章<p>、リスト<ul>,<ol>などのタグで文書を作る。

2. 装飾を加えていきます。必要最低限の<div>タグを使ってください。

3. 意味のあるまとまりをHTML5タグで囲んでいきます。


2~3にかけて、見た目はほとんど変わりありません。
ですが、HTML5タグで囲むことで、コンピュータにその部分の意味を認識させることができます。


セマンティック・ウェブの考え方に則ると、こうしておくのが現状、正解な気がします。
更に、こうしておくことでIE8以下を考慮に入れなくてよくなった際に、HTML5で全部をコーディングし直すということも避けられます。


これだけではわかりづらいので、良いコーディングとダメなコーディングの例を挙げておきます。

【良いコーディング】

[HTML]


<header>
  <div class="header">
      <h1>
        テストページ
     </h1>
   </div>
</header>

<main>
    <div class="box_main">
      テストページテキスト
    </div>
</main>

<footer class="l_footer">
    <div class="text_footer">
      テストページフッター
    </div>
</footer>

[CSS]

.header {
    width:1000px;
    background-color:#000000;
    color:#ffffff;
}
.box_main {
    width:1000px;
    height:1000px;
}
.text_footer {
    width:1000px;
    background-color:#000000;
    color:#ffffff;
}

逆に、以下のような記述をすると、IE8以下では思い通りのレイアウトになりません。
ブラウザがタグを認識してくれないからです。
(モダンブラウザでは恐らく大丈夫ですが)


【ダメなコーディング】

[HTML]

<header>
    <h1>
        テストページ
    </h1>
</header>
<main>
    テストページテキスト
</main>
<footer class="l_footer">
    テストページフッター
</footer>

[CSS]

header {
    width:1000px;
    background-color:#000000;
    color:#ffffff;
}
main {
    width:1000px;
    height:1000px;
}
.l_footer {
    width:1000px;
    background-color:#000000;
    color:#ffffff;
}

良い例はheaderタグやmainタグ、footerタグの中にdivタグを挟んでclassをつけ、それにcssを当てています。
ダメな例ではheaderタグやmainタグ、footerタグに直接cssを当てたり、classをつけてcssを当てていますね

 


より実践的なコードはコチラ ⇒ HTML5で書く~まずは骨組みから【HTML5実践編】



ちなみにhtml5shiv.jsの導入方法は・・・

html5shiv.jsはオススメではないと言いつつも、案件によっては使うこともあるかもしれませんので簡単に説明します。

https://github.com/aFarkas/html5shivからダウンロードしてください


html5shiv-masterフォルダ内、srcフォルダの中にhtml5shiv.jsがあります。
それを任意のフォルダ(サンプルコードでは、jsフォルダ内にhtml5shiv.jsを入れています)に入れ、パスを書いてください。


こんな感じでheadタグ内に書きます。


<head>
<!--[if lt IE 9]> 
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>

これでIE8以下の場合、HTML5タグを認識してくれます。

まとめ

ここまで自説を述べてきましたが、このやり方が唯一の正解ではありません。
あくまで僕はこうしていきたいというだけです。


当然のことながら、まだまだXHTMLやHTML4.01で書く方がいい場合もあると思います。
結局は案件ごとに適切な記述方式を選ぶべきなんだろうなと思います。


それにしても、早くHTML5だけでウェブサイトが作れるようになるといいですよね。
「これからはHTML5だ」と言われて結構な時間が経った気がするんですけど。(笑)


最後までお読みいただきありがとうございました。


 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事