前回まででひとまずindex.htmlとrule.cssは完成しました。あとは残りのmenu01.html〜menu03.htmlのファイルです。
なお、menu01.html〜menu03.htmlとindex.htmlの違いは上の様にメイン画像と文言だけです。該当部分はindex.htmlの以下の青字の部分です。
<!-- index.html -->
<div id="content">
<div id="message">
<h2 class="main_text">大自然に囲まれた素敵なお店です</h2>
<p class ="sub_text">素材を吟味した自然の味わいを大切にした<br>
マスター自慢のパンとお菓子をお楽しみ下さい。</p>
</div>
<div id="main_picture">
<img src="links/home.jpg"
alt="象のイメージキャラクター画像">
</div>
</div>
<!-- index.html -->
そこで、
index.htmlのコピーを3つ作成し、それぞれのファイル名をmenu01.html〜menu03.htmlとし、以下の部分を変更します。
<!-- menu01.html>
<div id="content">
<div id="message">
<h2 class="main_text">季節の果物をふんだんに使ったタルト</h2>
<p class="sub_text">自家農園で育った季節の果物をふんだんに取り入れた<br>
フルーツタルトケーキは当店自慢の品です。</p>
</div>
<div id="main_picture">
<img src="links/cake_01.jpg"
alt="フルーツタルトケーキの画像">
</div>
</div>
<!-- menu01.html>
<!-- menu02.html>
<div id="content">
<div id="message">
<h2 class="main_text">大人気のドロップクッキー</h2>
<p class="sub_text">絶妙の焼き加減で大人気のドロップクッキー<br>
8種類の紅茶と組み合わせてお楽しみ下さい。</p>
</div>
<div id="main_picture">
<img src="links/cake_02.jpg"
alt="ドロップクッキーの画像">
</div>
</div>
<!-- menu02.html>
<!-- menu03.html>
<div id="content">
<div id="message">
<h2 class="main_text">マスターの気まぐれお菓子</h2>
<p class="sub_text">自家農園で育くみ厳選された小麦粉と米粉を使い<br>
丁寧に焼き上げたこだわりクッキーをお楽しみ下さい。</p>
</div>
<div id="main_picture">
<img src="links/cake_03.jpg"
alt="こだわりクッキーの画像">
</div>
</div>
<!-- menu03.html>
これで完成しました。ただし、色味が全く同じなので面白みがありません。最低限の初手メイン画像の背景（div#content）を変更する事にしました。まず下準備としてrule.cssのdiv#contentの複製を3つ作成しdiv#content_01~03とします。
<!-- rule.css -->
div#content {
float: right;
height: 520px;
width: 75%;
background: #4ff1ae;
}
div#content {
float: right;
height: 520px;
width: 75%;
background: #4ff1ae;
}
<!-- rule.css -->
あとは色を変更するだけです。
<!-- rule.css -->
div#content_01 {
float: right;
height: 520px;
width: 75%;
background: #fc7ca9;
}
width: 75%;
background: #fc7ca9;
}
div#content_02 {
float: right;
height: 520px;
width: 75%;
background: #80acf2;
}
div#content_03 {
float: right;
height: 520px;
width: 75%;
background: #9acd32;
}
<!-- rule.css -->
もう少しスマートに処理する経方法もありますが、複雑になるのでこの方法で感性としました。
