［レスポンシブ］レスポンシブWebデザイン①
「レスポンシブ」とか色々な呼び方がありますが
正確な名前は「レスポンシブWebデザイン」。
ASCIIさんの「ゼロから始めるレスポンシブWebデザイン入門」に沿って、基礎から学んでいきます。
概念などはおいおい書いていくとして、今回はいきなりレスポンシブWebデザインのページをつくります。
完成図
PC用
レスポンシブWebデザインはHTML5でマークアップします。
マークアップしたら、HTML 5 OutlinerでアウトラインとThe W3C Markup Validation Serviceのチェックを忘れずにしましょう。
①［マークアップしたHTML］
※私がテキストを見ずにマークアップしたもので、ASCII掲載のものではありません。
<body>
<div id="container">
<header>
<h1><img src="img/2-1-zu03_a.jpg" alt="枝豆隊ロゴ"></h1>
<p>豆はカラダにイイ</p>
<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>
<main>
<section id="content">
<h2>枝豆の栄養素はスゴい</h2>
<p>枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>
<h3>代表的な豆料理</h3>
<h4>枝豆</h4>
<p><img src="img/2-1-zu03_b.jpg" alt="イラスト 枝豆"></p>
<p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
<h4>ずんだ</h4>
<p><img src="img/2-1-zu03_c.jpg" alt="イラスト ずんだ"></p>
<p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</section><!--/#content-->
<aside>
<h2>枝豆隊隊長</h2>
<p><img src="img/2-1-zu03_d.jpg" alt="肖像 枝豆隊長"></p>
<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</aside>
</main>
<footer>
<p><small>2004-2015©枝豆隊</small></p>
</footer>
</div><!--/#container-->
</body>
②head要素内にviewportの設定を書きます。
<meta name="viewport" content="width=device-width">
width="content-width"は、「viewportの幅をデバイスのスクリーンの幅に合わせる」という意味。device-widthを指定すると、解像度が異なる様々なデバイスに対応できる。
