各要素のレイアウトが上手くいかない場合は背景色を入れて可視化したり、webデベロッパーツールで要素を可視化出来るようにしましょう。
コーディング例
HTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Cotorier Cafe</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header> <h1>Cotorier Cafe</h1> <p class="text">毎日のおいしいごはんとおまけをすこし</p> <p class="logo"><img src="img/logo.jpg" alt=""></p> <nav> <ul> <li><a href="#">お店のこと</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">アクセス</a></li> </ul> </nav> </header> <div id="main"> <div id="mainText"> <h2>毎日食べたい、<br>おうちみたいなごはんやおやつ</h2> <p class="textInfo">Cotorier Cafe（コトリエ カフェ）は、あなたのもうひとつの「おうち」に なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、 「ただいま」を心よりお待ちしています。</p> <p id="mainShop"><a href="#">お店について</a></p> </div> <p id="mainImg"><img src="img/main.jpg" alt=""></p> </div> <div id="menu"> <h3>おすすめメニュー</h3> <p id="all"><a href="#">すべてのメニュー</a></p> <div id="menuPhoto"> <div class="menuFood"> <h4>日替わりごはんセット</h4> <p class="photo"><img src="img/photo1.jpg" alt="#"></p> <p class="photoText">春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら</p> </div> <div class="menuFood"> <h4>週替わりカレー</h4> <p class="photo"><img src="img/photo2.jpg" alt="#"></p> <p class="photoText">甘辛たけのこカレー ゆでたまごつき</p> </div> <div class="menuFood"> <h4>季節のおやつ</h4> <p class="photo"><img src="img/photo3.jpg" alt="#"></p> <p class="photoText">西か東か！さくらもち食べ比べ対決セット</p> </div> <div class="menuFood"> <h4>ひとくち晩酌</h4> <p class="photo"><img src="img/photo4.jpg" alt="#"></p> <p class="photoText">今だけ！いちごごろごろサングリア</p> </div> </div> </div> <div id="info"> <div id="infoShop"> <h3>お店からのお知らせ</h3> <dl> <dt>■ 2016-12-14</dt> <dd>年末年始の営業について</dd> <dt>■ 2016-11-21</dt> <dd>今週の日替わりメニュー（11/21 - 11/27)</dd> <dt>■ 2016-11-14</dt> <dd>今週の日替わりメニュー（11/14 - 11/20）</dd> <dt>■ 2016-11-10</dt> <dd>冬限定のおやつがスタートしました！</dd> </dl> </div> <div id="sns"> <p>こちらもどうぞ</p> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Pinterest</a></li> <li><a href="#">Blog</a></li> </ul> </div> </div> <div id="access"> <h3>店舗情報</h3> <p><a href="#">地図・アクセス方法</a></p> <dl> <dt>住所</dt> <dd>東京都杉並区高円寺南7丁目7-4 ことりやビル２F<br>(東京メトロ丸ノ内線新高円寺駅から徒歩7分)</dd> <dt>電話</dt><dd>03-0000-0000</dd> <dt>営業時間</dt><dd>11:00 - 23:30（L.O. 23:00）<br>ランチタイム：11:00 - 15:00（L.O. 14:30）</dd> <dt>定休日</dt><dd>日曜日・祝日</dd> </dl> </div> <footer> <p><small>Copyright© Cotorier Cafe. All rights Reserved.</small></p> </footer> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ /*reset*/ html, body, div, h1, h2, h3, h4, p, ul, li, dl, dt, dd { margin:0; padding:0; line-height:1.0; font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } a { text-decoration:none; color:#222; } ul { list-style:none; } img { border:0; vertical-align:bottom; } /*PCレイアウト*/ #container { width: 960px; margin:0 auto; position: relative; } header { background: #F9E4C0; overflow:hidden; padding-top: 10px; } header h1 { font-size:30px; position: absolute; top: 50px; left: 100px; } header .text{ font-size: 14px; position: absolute; top: 30px; left: 100px; } header .logo { position:absolute; top:20px; left:20px; } header nav { float: right; margin: 0 10px 10px 0; } header ul { overflow: hidden; } header li { float: left; margin-right: 20px; } header li:last-child { margin-right:0; } header li a { display: block; width:140px; height:80px; background:#FFF9CC; text-align: center; line-height: 80px; } /*メイン部分*/ #main { overflow: hidden; padding-top: 40px; } #mainText { width:600px; float: left; } h2 { font-size: 40px; font-weight:normal; line-height: 1.6; } .textInfo { line-height:1.6; margin-bottom: 20px; } p#mainImg { width: 300px; float: right; margin-top: 30px; } #mainShop a { display: block; width:500px; height:60px; background:#FFF9CC; border: 1px #333 solid; box-sizing: border-box; margin-bottom: 40px; text-align: center; line-height:60px; font-size:20px; } /*メニュー部分*/ #menu { background:#FFE380; overflow: hidden; } #menu h3 { width:320px; float: left; font-size: 36px; margin: 20px 10px 40px 10px; font-weight: normal; } #all { margin: 20px 10px 10px 0; } #all a { display: block; float: right; background:#FFC; width:220px; height:50px; text-align:center; line-height:50px; } #menuPhoto { overflow: hidden; clear: both; } #menu h4 { text-align: center; font-size:18px; font-weight:normal; margin-bottom: 10px; } .menuFood { float: left; width:220px; margin:10px; } .photo img { border-radius: 20px; } .photoText { margin: 10px 0 30px 0; line-height: 1.5; } /*お知らせ部分*/ #info { overflow: hidden; padding-top: 40px; } #info h3 { font-size:28px; font-weight: normal; margin-bottom: 30px; } #infoShop { float: left; width: 440px; margin:0 0 30px 10px; } #info dt { float: left; clear:both; } #info dd { margin-left:30px; margin-bottom: 20px; } #sns { float: right; width:480px; overflow:hidden; } #sns p { font-size:28px; text-align: center; margin-bottom: 10px; } #sns li { float: left; margin: 10px; } #sns li a { display: block; width:220px; height:60px; border-radius: 8px; background: #FFCC66; line-height: 60px; text-align:center; } /*アクセス部分*/ #access { background: #FACFB3; padding: 10px; } #access h3 { font-size: 28px; margin-top: 20px; font-weight: normal; width:120px; float: left; } #access p { width:190px; height: 40px; background: #FFC; float: left; margin:10px 0 40px 40px; } #access p a { display:block; text-align:center; line-height:40px; } #access dl { clear: both; overflow: hidden; margin-bottom: 30px; } #access dt, #access dd { float: left; line-height: 1.6; } #access dt { width: 80px; height: 70px; } #access dd { width: 380px; height: 70px; } /*フッター部分*/ footer { background: #FFF683; height:60px; text-align:center; } footer p { line-height: 60px; font-size: 18px; }
