HTML5を利用しCSSのみでレスポンシブサイト作る(HTML5のテンプレート付き!)

普段のお仕事でレスポンシブの案件が増えてきました。
マルチデバイスに対応させるのはクライアントさんでさえ意識し始めているのでしょうね。ほぼ必須となってきている気がします。

マルチデバイスに対応するにはサイト内容によっていくつかのバリエーションがあると思います。
PC/スマホのページを別に作り振り分ける・・・とか。
どのようにするかはメンテナンス性や費用面を考えて仕様を決めていると思います。

今回は「自分のポートフォリオサイト」を作るという名目でCSS制御のみでレスポンシブサイトを作ってみました。
一度スマートなレスポンシブサイトをちゃんと考えてみたかったので。
名前は「ぐらぴっく」です。フリーランスの方のポートフォリオ集になります。
ここまでコンテンツを大きくするつもりではありませんでした・・・

僕のコーディング開始時に使うHTML5のプレーンテンプレートを記事の下部に記載していますので参考にして下さい。

 

サイトの仕様

HTML5でマークアップ。多ページにわたり共通パーツがあるのでそこはPHPでモジュール化させています。
レスポンシブさせているのはCSS内部へ記述できるメディアクエリを利用しています。

スマホ/タブレットにレスポンシブで動いてもらうためにビューポートのメタを記述しています。
これを入れなかったらPC表示で縮小されてしまいます。

ビューポートのメタ記述

細かく指定できて、色々難しいですがレスポンシブサイトであれば下記で問題ないはずです。
「あんたのディスプレイサイズで好きに表示しぃ、拡大率は100%でよろ。あ、拡大縮小は禁止ね」って言ってます。

<!-- ピンチで拡大縮小を禁止 -->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />

<!-- ピンチで拡大縮小を許可 -->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=yes" />

今回はIEは切り捨てています。ノーチェックです。
ただmax-widthの使えるIE8移行であればまったく見れないということはないはず。

どうしてもIE6,7,8にレスポンシブ対応をさせたい場合

HTML5での記述について

普通にHTML5でマークアップ。レスポンシブ用とかは特にありません。
レスポンシブとはそもそもただのレイアウトの概念なのでHTML記述はHTML4でもできます。

articleとsectionの使い方を迷いました。
今回はarticleを親とし、子にsectionを入れ込むルールでやりました。
sectionをarticle外に置くパターンが混在すると後で頭がこんがらがるので・・・

HTML5のマークアップについてはこちらの記事を御覧ください
HTML5でサイト作る場合のマークアップの使い方。セマンティクス&コンテンツ・モデルという概念

IE8以下用にHTML5が使えるようになるJSだけ読み込ませています。他入れるとめっちゃ重くなるので・・・見れればいいんです。
※今確認してみたらCSS3記述の部分が変ですね。backgroundのrgba指定くらい対応してくれてればいいのに・・・

IE8以下にHTML5を使えるようにするJSは以下です。有名ですね。
IE8以下には読み込ませるIEハックで囲まれています。
なおメディアクエリが使えるようにする奴とかありますが僕は否定的です。だって重くてブラウザクラッシュするもの!

<!--&#91;if lt IE 9&#93;><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><!&#91;endif&#93;-->
 

※「html5.js」あまり言ってるとこありませんがサーバーにアップしないと確認できまてん。ローカルプレビュできないので注意。

CSSでの記述

今回はメディアクエリを利用し、ディスプレイサイズで条件分岐させることでレスポンシブ化させています。
CSSの読み込みは2つ。basic.css(全ページ共通)とmain.css(コンテンツのスタイル)で分けPCとスマホの両方が書かれています。本当は1つで作っていましたが他メンバーの専用ページがあるので分けました。
main.cssではスマホもタブレットもPCのスタイルを一度読み込んでしまっています。
無駄な処理を・・・と思いますが体感では特に重く感じません。考えたのですがスマホには以下の特徴があると思うのです。

スマホがWebページを見るときの挙動
①リクエストが1回しかされない
②ダウンロード速度が早い

無駄なCSSを読み込ませないために複数ファイルに分けてしまうとリクエストが2回発生。ここで一度カクついてしまいます。
そもそもCSSファイルは軽量です。可視性が大変ですが1枚にまとめたほうが確実に早いです。
よくブログ系をスマホで見ると画面がちらつくと重いますがあれはスマホのスタイルを分けているのでしょう。

IEは読み込めないんじゃ?って方

読み込めます。なぜならCSS内のPC記述はメディアクエリを利用していないからです。
一旦PC用のスタイルを読ませた後、メディアクエリでスマホのスタイルを読ませています。
CSSは上から順に読んでいくのでIE6でもPC記述は判定してくれるのですね。
IE8以下はメディアクエリ記述部分が来るとCSSの読み込みを終わらせます。

メディアクエリ(Media Queries)って何?

デバイスのスクリーンサイズを利用して条件分岐することができます。CSS3の機能の一部です。
記述方法はHTMLへ書く場合とCSS内部で書く場合があります。
HTMLへ書く場合は読み込ませるCSSをデバイスごとに変えることができます。
CSS内部に書く場合はデバイスごとに記述できます。
HTMLへ書いた場合、IE8以下は読めなくなるので非常にめんどくさいです。

今回利用したのはCSS内部へ記述するメディアクエリです。
参考として使用したメディアクエリ記述を貼ります。

 /*スマホ用に利用したメディアクエリ。640px以下のサイズになったら。PCでも可変する。*/
 @media screen and (max-width: 640px) {
 /* STYLE */
 .body{background:red;}
 }

/*iPad用のメディアクエリ。パットだけに反映*/
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
 /* STYLE */
 .body{background:green;}
 }
 

iPadが若干スタイルズレを起こしたので利用しています。
基本これだけでレスポンシブサイトは作れると思います。

HTML5記述のプレーンテンプレート | UTF-8

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!--&#91;if lt IE 9&#93;><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /><!&#91;endif&#93;-->
<meta property="og:type" content="website">
<meta property="fb:app_id" content="【アプリID】">
<meta property="og:site_name" content="【サイトの名前】">
<meta property="og:url" content="【ページのURL】">
<meta property="og:title" content="【ページのタイトル】">
<meta property="og:description" content="【ページの説明】">
<meta property="og:image" content="【FBシェア時の画像398x208px以上】">
<meta property="og:locale" content="ja_JP">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
<meta name="keywords" content="【キーワード】">
<meta name="description" content="【ページ概要】">
<title>ページタイトル</title>

<link rel="stylesheet" href="common/css/basic.css" type="text/css" media="all">
<!--&#91;if lt IE 9&#93;><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><!&#91;endif&#93;-->
</head>

<body>
<div id="wrapper">
<header id="header">
<h1>HTML5テンプレート</h1>

<nav>
<ul>
	<li><a href="#">メインメニュー1</a></li>
	<li><a href="#">メインメニュー2</a></li>
	<li><a href="#">メインメニュー3</a></li>
	<li><a href="#">メインメニュー4</a></li>
</ul>
</nav>
<!-- / #header --></header>



<div id="contents">
<div id ="main">
<article>
	<h1>コンテンツタイトル</h1>
	<h2>見出し</h2>
	<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</article>


<section>
	<p>その他セクション領域</p>
</section>
<!-- / #main --></div>




<div id="sidebar">
<aside>
	<nav>
	<h2 class="tit">コンテンツカテゴリー</h2>
	<ul class="list">
		<li class="item"><a href="#">メニュー1</a></li>
		<li class="item"><a href="#">メニュー2</a></li>
		<li class="item"><a href="#">メニュー3</a></li>
		<li class="item"><a href="#">メニュー4</a></li>
		<li class="item"><a href="#">メニュー5</a></li>
	</ul>
	</nav>
</aside>


<aside>
	<h2 class="tit">その他バナー領域</h2>
	<ul>
		<li><a href="#">バナー</a></li>
		<li><a href="#">バナー</a></li>
		<li><a href="#">バナー</a></li>
	</ul>
</aside>
<!-- / #sidebar --></div>
<!-- / #contents --></div>




<footer id="footer">
<div class="copyright"><address>Copyright&copy;<script type="text/javascript">var iNavInt_curYear = new Date().getUTCFullYear(); document.write(iNavInt_curYear);</script> サイトタイトル All Rights Reserved.</address></div>
<!-- / #footer --></footer>
<!-- / #wrapper --></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</body>
</html>

CSSはこちら

@charset "utf-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height:1}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {display:block}
ul, ol {list-style:none}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}
ins {background-color:#ff9;color:#000;text-decoration:none}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom:1px dotted #000;cursor:help}
table {border-collapse:collapse;border-spacing:0}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}
input, select {vertical-align:middle}

/*========================================

BASIC

=======================================*/
html{-webkit-text-size-adjust:100%}
body{font-size:10px;font-family:Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;background:#fbfaf6;}
a{color:#0581d5}
a:hover{color:#195067}

/*clearfix*/
.clearfix:after{content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden}
.clearfix{display: inline-block;}
* html .clearfix{height: 1%;}
.clearfix{display:block;}

/* COMMON
=======================================*/
/* #wrapper */
#wrapper{width:980px;padding:10px;margin:10px auto 0;background:#fff;}

/* #header */
#header{}

/* #contents */
#contents{}

/* #main*/
#main{}

/* #sidebar */
#sidebar{}

/* #footer */
#footer{}

@media screen and (max-width: 640px) { /* SmartPhone Display - width:640px under - */
/*========================================

BASIC

=======================================*/
img{width:100%;height:auto;}

/* COMMON
=======================================*/
/* #wrapper */
#wrapper{width:auto;padding:5%;margin:0;}

/* #header */
#header{}

/* #contents */
#contents{}

/* #main*/
#main{}

/* #sidebar */
#sidebar{}

/* #footer */
#footer{}

/*-------------------- max-width:640px --------------------*/}

最後にサイトのご紹介

記事冒頭へも書いていますがフリーランスのポートフォリオサイトを作成しました。
名前は「ぐらぴっく」といいます。
メンバー各ページに専用のお問い合わせがあり、直接コンタクトをとることができます。
よろしければご利用下さい。

ぐらぴっく | リーランスのポートフォリオサイト