Date： | 
Category：HTML5での制作、これだけは外せない！
今年中旬には、正式勧告予定のHTML5。
先月には日本で認定資格が配信開始されましたし、HTML5を使ったサイトや、レスポンシブテンプレートもどんどん増えています。
そこで「ちょっと今さら人に聞けないかな」と思われる、レスポンシブWEBを制作する場合に、必要最小限となるHTML5のソースを紹介します。
※内容は2014年2月段階の情報となります。
最小限のHTML5ソースサンプル。
レスポンシブデザインのサイトを制作する際に、最小限必要となるHTML5のソースは以下となります。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
【１】<meta name=”viewport” content=”width=device-width”>
<title>サンプルサイト</title>
【２】<link rel=”stylesheet” href=”スタイルシートのパス/html5reset.css”>
<!–[if lt IE 9]>
【３】<script src=”ジャバスクリプトのパス/html5shiv.js”></script>
【４】<script src=”ジャバスクリプトのパス/css3-mediaqueries.js”></script>
<![endif]–>
<head>
<body>
//コンテンツ内容
</body>
</html>
それでは、上記【１】〜【４】について、少し説明したいと思います。
【１】meta viewport属性を指定する。
html5に限らず、レスポンシブデザインにはviewport指定が必要です。
なぜなら、スマートフォンのブラウザにはViewportという機能があり、何も指定しないと自動的にwidth 980pxで表示されるからです。
これでは、可変デザインの意味が無くなってしまいます。
【２】HTML5向けのリセットCSSを適用。
HTML5で新たに加わった要素がありますので、それに対応したリセットCSSを読み込ませた方が、制作が楽になります。
リセットCSSは、有名どころであるhtml5doctorのCSSが良いでしょう。 下記にソースが公開されています。
【html5doctor】
→http://html5doctor.com/html-5-reset-stylesheet/
【３】IE8以下に、HTML5の新要素を認識させるためのJSを適用。
毎度のことながら、IEはHTML5においても技術革新の足を引っ張っており、新要素を認識してくれません。
そこで、html5shiv.jsというスクリプトを入手し、条件付きコメントを使ってIE9未満に読み込ませるように記述します。
【html5shiv】
→https://code.google.com/p/html5shiv/
【４】IE8以下に、CSS3 Media Queriesを有効にするJSを適用。
画面サイズに合わせて、CSS内に適用する条件を分岐指定する仕組み、CSS3のメディアクエリ。
レスポンシブWEBデザインは、一般的にこの仕組みを使います。
ですが、メディアクエリはIE8以下では使えないので、これを有効にするスクリプトを下記サイトで入手し、読み込ませておきます。
【CSS3-mediaqueries-JS】
→https://code.google.com/p/css3-mediaqueries-js/
ちなみにIE8以下でレスポンシブにする意味って、大して無いのかもしれません。
また上記スクリプトには、正式な記述『@media screen〜』で書かないと上手く作動しないといったクセがありますので、要注意です。
HTML5で制作されたレスポンシブテンプレート
最後にHTML5で制作された、ビジネスサイト向けのレスポンシブテンプレートを紹介します。
「自分でイチから制作するのはメンドクサイ」とか「手本となるテンプレをカスタマイズするところから始めたい」という方にピッタリです。
HTML5レスポンシブWordPressテーマは、こちらから »
HTML5レスポンシブHTML5テンプレートは、こちらから »
PS:SEO効果の質が高い上に、PC・iphoneやAndroidなどスマートフォン・各種タブレットといったあらゆるデバイスに対応しているホームページを簡単に作成可能です。
超多機能でSEOに強い！ブロガー・アフィリエイターを虜にするWPテーマDIVER
国内最速のサイト表示スピード！最新技術が詰め込まれたWPテーマTHE THOR
