HTML5とCSS3でレスポンシブ制作するサンプルコード

カレンダーDate: | カテゴリーCategory:WordPressテーマのカスタマイズ方法【HTML・CSSの基礎も】
※景品表示法に基づく表記:本記事には商品の広告が含まれています

HTML5での制作、これだけは外せない!

html5

今年中旬には、正式勧告予定のHTML5。

先月には日本で認定資格が配信開始されましたし、HTML5を使ったサイトや、レスポンシブテンプレートもどんどん増えています。

そこで「ちょっと今さら人に聞けないかな」と思われる、レスポンシブWEBを制作する場合に、必要最小限となるHTML5のソースを紹介します。

※内容は2014年2月段階の情報となります。

最小限のHTML5ソースサンプル。

レスポンシブデザインのサイトを制作する際に、最小限必要となるHTML5のソースは以下となります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
【1】<meta name=”viewport” content=”width=device-width”>
<title>サンプルサイト</title>

【2】<link rel=”stylesheet” href=”スタイルシートのパス/html5reset.css”>

<!–[if lt IE 9]>
【3】<script src=”ジャバスクリプトのパス/html5shiv.js”></script>
【4】<script src=”ジャバスクリプトのパス/css3-mediaqueries.js”></script>
<![endif]–>
<head>

<body>
//コンテンツ内容
</body> </html>

それでは、上記【1】〜【4】について、少し説明したいと思います。

【1】meta viewport属性を指定する。

html5に限らず、レスポンシブデザインにはviewport指定が必要です。

なぜなら、スマートフォンのブラウザにはViewportという機能があり、何も指定しないと自動的にwidth 980pxで表示されるからです。

これでは、可変デザインの意味が無くなってしまいます。

【2】HTML5向けのリセットCSSを適用。

HTML5で新たに加わった要素がありますので、それに対応したリセットCSSを読み込ませた方が、制作が楽になります。

リセットCSSは、有名どころであるhtml5doctorのCSSが良いでしょう。
下記にソースが公開されています。

【html5doctor】
http://html5doctor.com/html-5-reset-stylesheet/

【3】IE8以下に、HTML5の新要素を認識させるためのJSを適用。

毎度のことながら、IEはHTML5においても技術革新の足を引っ張っており、新要素を認識してくれません。

そこで、html5shiv.jsというスクリプトを入手し、条件付きコメントを使ってIE9未満に読み込ませるように記述します。

【html5shiv】
https://code.google.com/p/html5shiv/

【4】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などスマートフォン・各種タブレットといったあらゆるデバイスに対応しているホームページを簡単に作成可能です。

Tags

Trackbacks & Comments

Trackback URL for this post:

Leave a Reply

flight