練習サイト構築手順（2）
トップページ以外のまとめ
- 練習サイト構築手順（1）までで、#header・#nav・#sidebar・#footerは完了しています。#contentの設定を中心に進めます
《products.html》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <title>行列のできるケーキショップ｜商品のご紹介</title> <link href="css/common.css" rel="stylesheet" media="all"> <link href="css/style.css" rel="stylesheet" media="all"> </head> <body> <!-- #container --> <div id="container"> <!-- #header --> <div id="header"> <h1><a href="index.html"><img src="img/logo.jpg" alt="CakeShop" width="260" height="55"></a></h1> <!-- #nav --> <div id="nav"> <ul> <li id="menu_index"><a href="index.html"></a></li> <li id="menu_products" class="this"><a href="products.html"></a></li> <li id="menu_shop"><a href="shop.html"></a></li> <li id="menu_mail"><a href="mailto:xxxxxx@xxxxx.jp"></a></li> </ul> </div><!-- /#nav --> </div><!-- /#header --> <!-- #wrapper --> <div id="wrapper"> <!-- #content --> <div id="content"> <h2><img src="img/item_title.gif" width="475" height="25" alt="商品のご紹介" /></h2> <ul class="list"> <li><a href="#item1">ショートケーキ</a></li> <li><a href="#item2">バースデーケーキ</a></li> <li><a href="#item3">洋菓子</a></li> </ul> <h3 class="product_category"><a name="item1" id="item1">ショートケーキ</a></h3> <!-- .product --> <div class="productItem"> <h4><img src="img/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真">チーズスフレ</h4> <p class="product_price">1個 480円</p> <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p> <ul> <li><a href="item.html"><img src="img/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a></li> <li><a href="img/item_photo01.jpg"><img src="img/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a></li> </ul> </div><!-- /.product --> <h3 class="product_category"><a name="item2" id="item2">バースデーケーキ</a></h3> <!-- .product --> <div class="productItem"> <h4><img src="img/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真">苺のバースデーケーキ</h4> <p class="product_price">1個 2,480円</p> <p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p> <ul> <li><a href="#"><img src="img/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a></li> <li><a href="img/item_photo02.jpg"><img src="img/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a></li> </ul> </div><!-- /.product --> <h3 class="product_category"><a name="item3" id="item3">洋菓子</a></h3> <!-- .product --> <div class="productItem"> <h4><img src="img/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真">焼菓子の詰め合わせ</h4> <p class="product_price">1箱 1,680円</p> <p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p> <ul> <li><a href="#"><img src="img/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a></li> <li><a href="img/item_photo03.jpg"><img src="img/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a></li> </ul> </div><!-- /.product --> </div><!-- /#content --> <!-- #sidebar --> <div id="sidebar"> <ul> <li><a href="index.html" class="banner"><img src="img/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a></li> <li><a href="index.html" class="banner"><img src="img/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a></li> </ul> </div><!-- /#sidebar --> </div><!-- /#wrapper --> <!-- #footer --> <div id="footer"> <p><small>Copyright (C) 2013 CakeShop Corporation. All Rights Reserved.</small></p> </div><!-- /#footer --> </div><!-- /#container --> </body> </html>
/* product */ #content ul { margin: 0 0 20px 0; } #content ul.list li a { color: #746224; font-size: 18px; font-weight: bold; line-height: 36px; text-decoration: none; background-image: url(../img/mark.gif); background-repeat: no-repeat; background-position: left 2px; margin-left: 16px; padding: 0 0 0 20px; } #content ul.list li a:hover { color: #ae2d56; text-decoration: underline; } h3.product_category { background-color: #9F8638; color: white; background-image: url(../img/bg_h3.jpg); background-repeat: no-repeat; line-height: 34px; padding-left: 16px; } .productItem { margin-bottom: 20px; padding: 0 0 30px 0; border-bottom: 1px dotted #999999; } .productItem h4 { color: #015790; font-size: 20px; font-family: "ヒラギノ明朝 Pro W3", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; margin: 12px 0 10px 0; } .productItem h4 img { float: left; margin: 0 12px 0 0; } .productItem p { font-size: 14px; line-height: 1.3; margin: 0 0 11px 0; } .productItem p.product_price { font-weight: bold; } .productItem li { float: left; display: inline; margin-right: 16px; }
《item.html》
- 若干無謀な設定もあります
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <title>行列のできるケーキショップ｜商品のご紹介</title> <link href="css/common.css" rel="stylesheet" media="all"> <link href="css/style.css" rel="stylesheet" media="all"> </head> <body> <!-- #container --> <div id="container"> <!-- #header --> <div id="header"> <h1><a href="index.html"><img src="img/logo.jpg" alt="CakeShop" width="260" height="55"></a></h1> <!-- #nav --> <div id="nav"> <ul> <li id="menu_index"><a href="index.html"></a></li> <li id="menu_products" class="this"><a href="products.html"></a></li> <li id="menu_shop"><a href="shop.html"></a></li> <li id="menu_mail"><a href="mailto:xxxxxx@xxxxx.jp"></a></li> </ul> </div><!-- /#nav --> </div><!-- /#header --> <!-- #wrapper --> <div id="wrapper"> <!-- #content --> <div id="content"> <h2><img src="img/item_title.gif" width="475" height="25" alt="商品のご紹介"></h2> <h3 class="product_name">チーズスフレ</h3> <p><img src="img/item_photo01.jpg" width="475" height="285" alt="チーズスフレ 商品写真"></p> <h4 class="item">当店人気メニュー！</h4> <p class="product_detail">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。チョコとオレンジのトッピングが、やわらかな味わいの中にアクセントを与えてくれます。</p> <p class="product_detail">甘さ控えめとなっておりますので、カロリーが気になる方も安心です。お茶のお供にも是非どうぞ。</p> <p class="product_price">価格： 480円 (税込)</p> <p class="orderbtn"><a href="order.html"><img src="img/buy_btn.gif" width="120" height="20" alt="この商品を購入する"></a></p> </div><!-- /#content --> <!-- #sidebar --> <div id="sidebar"> <ul> <li><a href="index.html" class="banner"><img src="img/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a></li> <li><a href="index.html" class="banner"><img src="img/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a></li> </ul> </div><!-- /#sidebar --> </div><!-- /#wrapper --> <!-- #footer --> <div id="footer"> <p><small>Copyright (C) 2013 CakeShop Corporation. All Rights Reserved.</small></p> </div><!-- /#footer --> </div><!-- /#container --> </body> </html>
/* item */ h3.product_name { color: #015790; font-size: 26px; font-family: "ヒラギノ明朝 Pro W3", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; margin-bottom: 8px; } h4.item { font-size: 20px; font-weight: bold; color: #F03; margin: 15px 0 12px 0; padding: 3px 0 3px 8px; border-left: 5px solid #F03; } p.product_detail { line-height: 1.4; margin-bottom: 10px; } p.product_price { font-weight: bold; margin: 15px 0 0 0; } p.orderbtn { margin: 20px 0; padding-top: 20px; border-top: 1px dotted #999999; }
《order.html》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <title>行列のできるケーキショップ｜商品のご購入</title> <link href="css/common.css" rel="stylesheet" media="all"> <link href="css/style.css" rel="stylesheet" media="all"> </head> <body> <div id="container"> <!-- #header --> <div id="header"> <h1><a href="index.html"><img src="img/logo.jpg" alt="CakeShop" width="260" height="55"></a></h1> <!-- #nav --> <div id="nav"> <ul> <li id="menu_index"><a href="index.html"></a></li> <li id="menu_products" class="this"><a href="products.html"></a></li> <li id="menu_shop"><a href="shop.html"></a></li> <li id="menu_mail"><a href="mailto:xxxxxx@xxxxx.jp"></a></li> </ul> </div><!-- /#nav --> </div><!-- /#header --> <!-- #wrapper --> <div id="wrapper"> <!-- #content --> <div id="content"> <h2><img src="img/shopping_title.gif" width="475" height="25" alt="商品のご購入"></h2> <form action="#" method="post" id="myform"> <p><label for="user">名前</label></p> <input type="text" id="username" name="username" size="45"><br> <p><label for="email">Eメール</label></p> <input type="text" id="email" name="email" size="45"><br> <p><label for="zip">郵便番号</label></p> <input type="text" id="zip" name="zip" maxlength="7">（ハイフンなし） <p><label for="address">ご住所</label></p> <textarea name="address" rows="5" cols="40"></textarea> <p><label for="orderitem">注文商品</label></p> <input type="checkbox" name="products" value="チーズスフレ">チーズスフレ <select name="cheese_number"> <option value="1" selected="selected">1個</option> <option value="2">2個</option> <option value="3">3個</option> </select><br> <input type="checkbox" name="products" value="苺のバースデーケーキ">苺のバースデーケーキ <select name="birthday_number"> <option value="1" selected="selected">1個</option> <option value="2">2個</option> <option value="3">3個</option> </select><br> <input type="checkbox" name="products" value="洋菓子の詰め合わせ">洋菓子の詰め合わせ <select name="sweets_number"> <option value="1" selected="selected">1個</option> <option value="2">2個</option> <option value="3">3個</option> </select> <p class="trigger"><label for="trigger">当店をどこでお知りになりましたか？</label></p> <input type="radio" name="enquete" value="検索サイトから">検索サイトから <input type="radio" name="enquete" value="ご家族・ご友人から">ご家族・ご友人から <input type="radio" name="enquete" value="広告・チラシ等">広告・チラシ等 <input type="radio" name="enquete" value="その他" checked="checked">その他 <p><input type="submit" value="送信する"><input type="reset" value="取り消し"></p> </form> </div><!-- /#content --> <!-- #sidebar --> <div id="sidebar"> <ul> <li><a href="index.html" class="banner"><img src="img/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a></li> <li><a href="index.html" class="banner"><img src="img/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a></li> </ul> </div><!-- /#sidebar --> </div><!-- /#wrapper --> <!-- #footer --> <div id="footer"> <p><small>Copyright (C) 2013 CakeShop Corporation. All Rights Reserved.</small></p> </div><!-- /#footer --> </div><!-- /#container --> </body> </html>
/* order */ #myform { margin: 0 0 30px 10px; } #myform p { font-weight: bold; margin: 12px 0 5px 0; } #myform p.trigger { margin-top: 20px; } #myform input,#myform textarea { margin-bottom: 6px; }
《shop.html》
- 地図は、余裕があれば見やすいものに描き変えましょう
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <title>行列のできるケーキショップ｜店舗案内</title> <link href="css/common.css" rel="stylesheet" media="all"> <link href="css/style.css" rel="stylesheet" media="all"> </head> <body> <!-- #container --> <div id="container"> <!-- #header --> <div id="header"> <h1><a href="index.html"><img src="img/logo.jpg" alt="CakeShop" width="260" height="55"></a></h1> <!-- #nav --> <div id="nav"> <ul> <li id="menu_index"><a href="index.html"></a></li> <li id="menu_products"><a href="products.html"></a></li> <li id="menu_shop" class="this"><a href="shop.html"></a></li> <li id="menu_mail"><a href="mailto:xxxxxx@xxxxx.jp"></a></li> </ul> </div><!-- /#nav --> </div><!-- /#header --> <!-- #wrapper --> <div id="wrapper"> <!-- #content --> <div id="content"> <h2><img src="img/shop_title.gif" width="475" height="25" alt="店舗案内"></h2> <p><img src="img/shop.jpg" width="475" height="317" alt="店舗写真"></p> <table summary="ケーキショップの所在地"> <tr> <th>社名</th><td>行列のできるケーキショップ</td> </tr> <tr> <th>住所</th><td>行列県一途市三番町4-1-3<br>ケーキビル1F</td> </tr> <tr> <th>TEL</th><td>000-0000-0000</td> </tr> <tr> <th>定休日</th><td>水曜日</td> </tr> <tr> <th>営業時間</th><td>午前9:00〜午後8:00</td> </tr> </table> <p class="map"><img src="img/map.png" width="326" height="286" alt="所在地図"></p> </div><!-- /#content --> <!-- #sidebar --> <div id="sidebar"> <ul> <li><a href="index.html" class="banner"><img src="img/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a></li> <li><a href="index.html" class="banner"><img src="img/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a></li> </ul> </div><!-- /#sidebar --> </div><!-- /#wrapper --> <!-- #footer --> <div id="footer"> <p><small>Copyright (C) 2013 CakeShop Corporation. All Rights Reserved.</small></p> </div><!-- /#footer --> </div><!-- /#container --> </body> </html>
/* shop */ #content h2 img,#content img,table { margin-bottom: 10px; } table { width: 475px; border: 1px #B2B2B2 solid; border-collapse: collapse; } td { border: 1px #B2B2B2 solid; width: 70%; background-color: #FFF; padding: 7px 5px 5px 1em; /* 左側１文字分空ける */ line-height: 1.3; } th { border: 1px #B2B2B2 solid; text-align: right; vertical-align: middle; width: 30%; background-color: #E8E2D6; padding: 6px 1em 5px 5px; /* 右側１文字分空ける */ } p.map { text-align: center; }
