固定レイアウト：パスタとワインの店

固定レイアウト

パスタとワインの店
擬似クラス無し
floatが重なった時の指定がポイント

パスタとワインの店 アテラ
concept
pasta
drink
side
access

LunchPastaWine
現在実施中のキャンペーンやお得な情報

今日のパスタ
Today's Pasta 今日の日替わりパスタ
ペンネアラビアータ
（ピリ辛トマトソースのペンネ）

news
2015.3.24今年も冷製パスタをお出しし始めました
2015.3.18トマトソースの作成ビデオを公開しました

CouponTickets ランチセットご注文時ドリンク１杯無料

(c)2015 パスタとワインの店アテラ

素材

指定要件

以下のid名を使用する

正しいマークアップ（文書構造）をする
文法チェックをし、破綻のない構造と記述にする（必須 !!）
CSSを外部リンクとして読み込む
リセットを記述する
全体の共通値を記述する（body要素）
外枠からレイアウトの幅指定をする
レイアウトブロックの内容を記述する

CSS3

box-shadow

「横のずれ」「縦のずれ」「ぼかしの幅」「影の色」の順に記述する
ベンダープレフィックスも記述する

-moz-box-shadow: 1px 1px 5px #666;　/* Firefox用 */  
-webkit-box-shadow: 1px 1px 5px #666;　/* Safari,Google Chrome用 */  
box-shadow: 1px 1px 5px #666;

text-shadow

「横のずれ」「縦のずれ」「ぼかしの幅」「影の色」の順に記述する
ベンダープレフィックスも記述する

-moz-text-shadow: 1px 1px 3px #666;　/* Firefox用 */  
-webkit-text-shadow: 1px 1px 3px #666;　/* Safari,Google Chrome用 */  
text-shadow: 1px 1px 3px #666;

:last-child疑似クラス

ある要素内で最後に書かれている子要素にスタイルが適用されます
IE8までは対応していません

border-radius

ボックスの４つのコーナーの角丸をまとめて指定する際に使用します
それぞれの角丸コーナーは４分の１楕円になりますが、楕円の形状は水平方向と垂直方向の２つの半径の組み合わせで決定されます

HTML5

audio

<video width="270" height="152" poster="img/poster.jpg" controls >
<source src="img/pastaSauce.mp4" type="video/mp4">
<source src="img/pastaSauce.webm" type="video/webm">
</video>

a要素の解釈

HTML5では、「ブロックレベル要素」と「インラインレベル要素」という概念がありません
ですから、div要素の親要素にa要素があっても問題ありません

この課題はfloatがポイントなので、コンテンツの役割を実際の運営サイトのように更新することには無理があります。
しかし、HTML5の要素が適用できるモダン・ブラウザのみにおいては、以下のようなことが可能です。

<a href="#">
<div id="recommend">
<h2><img src="img/todaypastaText.png" alt="Today's Pasta 今日の日替わりパスタ"></h2>
<p>ペンネアラビアータ<br>（ピリ辛トマトソースのペンネ）</p>
</div><!-- /#recommend -->
</a>

「recommend」スペース全体がリンクのスペースになっています。
もちろん、すべてのブラウザで可能なわけではありません。

画像は埋め込みではなく、背景画像にしてあります。
p要素とimg要素のalt属性の文字が、二重に読まれることを避けるためです。

解答例

基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>パスタとワインの店</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1><img src="img/logo.png" alt="atella"></h1>
<ul>
<li><a href="#"><img src="img/menu_concept.png" alt="concept"></a></li>
<li><a href="#"><img src="img/menu_pasta.png" alt="pasta"></a></li>
<li><a href="#"><img src="img/menu_drink.png" alt="drink"></a></li>
<li><a href="#"><img src="img/menu_side.png" alt="side"></a></li>
<li><a href="#"><img src="img/menu_access.png" alt="access"></a></li>
</ul>

<ul>
<li><a href="#"><img src="img/subimage01.jpg" alt="Lunch"></a></li>
<li><a href="#"><img src="img/subimage02.jpg" alt="Pasta"></a></li>
<li><a href="#"><img src="img/subimage03.jpg" alt="Wine"></a></li>
</ul>

<h2 class="info"><img src="img/campain.png" alt="現在実施中のキャンペーンやお得な情報"></h2>

<h2><img src="img/todaypastaText.png" alt="Today's Pasta 今日の日替わりパスタ"></h2>
<p>ペンネアラビアータ<br>（ピリ辛トマトソースのペンネ）</p>
<h2><img src="img/newsText.png" alt="news"></h2>
<dl>
<dt>2015.3.24</dt><dd>今年も冷製パスタをお出しし始めました</dd>
<dt>2015.3.18</dt><dd>トマトソースの作成ビデオを公開しました</dd>
</dl>

<h2><a href="#"><img src="img/coupon.png" alt="CouponTickets ランチセットご注文時ドリンク１杯無料"></a></h2>
<video width="270" height="152" poster="img/poster.jpg" controls >
<source src="img/pastaSauce.mp4" type="video/mp4">
<source src="img/pastaSauce.webm" type="video/webm">
</video>

<p><small>&copy;2015 atella all right reserved.</small></p>

</body>
</html>

この記述をレイアウト用にグループ化していきます。
その記述は、文書構造には影響しません。

CSSの記述

floatしている要素には「幅」指定
floatしている要素の親要素には「overflow: hidden;」指定
空きは、bottomで指定
alt属性の不要な画像は、背景画像として読み込む
背景画像は、repeat設定をする
繰り返しの左右の空きは、「 :first-child 」「 :last-child 」で設定

resetとbody

すべてのサイトの基準

@charset "utf-8";

/* reset */
html, body, h1, p, ul, li, dl, dt, dd, small {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}

/* body */
body {
  font-size: 16px;
  color: #333;
  background: url(img/back.jpg) repeat;
}