|
|---|
この連載が本になりました！
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。
レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック
定価：2,625円 (本体2,500円)／形態：B5変 (232ページ)
ISBN：978-4-04-886323-0
連載第2回では、レスポンシブWebデザインの設計と素材の準備をしました。今回は、ページの基本となるHTMLとCSSの初期設定を記述します。
ベースHTMLの記述
最初に、「枝豆隊」の基本となるHTMLを用意しましょう。このサイトでは、XHTMLではなくHTML5を採用しています。HTML5はオフライン機能や現在地特定機能などのモバイルデバイスで便利な機能（API）が充実しており、すでにiOS、Androidが搭載しているブラウザーのWebKit、Windows Phone 7搭載のInternet Explorer 9でサポートされています。古いブラウザーのサポートが必須の場合など、特別な事情がなければHTML5を使って記述しましょう。
枝豆隊のHTMLファイル、「index.html」のソースコードは以下のように記述します。前に作成したワイヤーフレームを見ながら、各要素を定義しています。header、footer、asideなど、HTML5の新しいセマンティック要素を使っていますが、シンプルな構造のページですので特に難しい点はないでしょう。
■サンプル1 [HTML:index.html]
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width ">
<title>トップ|allWeb 豆はカラダにイイ</title>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" media="all">
</head>
<body>
<!-- header -->
<header>
<hgroup>
<h1><img src="assets/images/all-web-logo-seed-mark.png" alt="ロゴ allWebクリエイター塾"></h1>
<h2>豆はカラダにイイ</h2>
</hgroup>
<nav>
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">枝豆一覧</a></li>
<li><a href="">枝豆隊</a></li>
<li><a href="">アクセス</a></li>
</ul>
</nav>
</header>
<!-- //header -->
<!--contentns-->
<div id="contents">
<div id="main">
<section id="vitamin">
<h3>枝豆の栄養素はスゴい</h3>
<p>枝豆は大豆が未成熟で収穫したものですが、<a href="">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>
</section>
<section id="reciept">
<h3>代表的な豆料理</h3>
<h4>枝豆</h4>
<img src="assets/images/edamame.jpg" alt="イラスト 枝豆"> <p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
<h4>ずんだ</h4>
<img src="assets/images/edamame.jpg" alt="イラスト ずんだ"><p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</section>
</div>
<!--//main-->
<!--sub-->
<div id="sub">
<aside>
<h4>枝豆隊隊長</h4>
<img src="assets/images/edamame.jpg" alt="肖像 枝豆隊長"> <p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</aside>
</div>
<!--//sub-->
</div>
<!--//contents-->
<!-- footer -->
<footer>
<p><small>2004-2012©allWebクリエイター塾</small></p>
</footer>
<!-- //footer -->
</body>
</html>
viewportの指定
head要素内にあるmeta name="viewport"は、スマートフォン向けのviewportの設定です。スマートフォンのブラウザーの多くは「viewport」と呼ばれる仮想ウィンドウサイズが設定されており、標準ではWebサイトを下の表のように縮小して表示しています。
| ブラウザ | 標準viewportサイズ |
|---|---|
| Opera Mobile | 850pixels |
| iPhone Safari | 980pixels |
| Android | 800pixels |
| Windows Phone 7 | 1024pixels |
viewportはHTMLドキュメントにmeta要素でhead要素内へ記述します。viewportの指定方法は、下記のように非常にシンプルです。
<meta name="viewport" content="width=device-width ">
width="content-width"は、「viewportの幅をデバイスのスクリーンの幅に合わせる」という意味です。widthには数字を直接指定しても構いませんが、device-widthを指定すると、解像度が異なるさまざまデバイスに対応できます。
【ワンポイント】viewportの詳しい指定方法
viewportにはほかにもさまざまな指定があります。詳しくは4ページの「【Follow up】viewportを理解しよう」で解説しています。
