【HTML】2カラムレイアウトのページを作る
課題であがっていた2カラムレイアウトを参考に、作って見ました。
ブラウザレビュー(演習結果)
ポイント
- 必要のないDIVを使わない。
- 画像を右側へフロートさせている。
- フロートさせた画像の高さを保持したいので、overflow:hiddenを使っています。これで、p内の文章が少なくても、画像の下辺がpの下辺になってくれます。文章が多くなった場合でも画像の下に文章が回りこみます。回り込みさせたくない場合はまた別な方法があるかもしれません。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>卵料理カフェ Cockeyolly</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="sub"> <h1><img src="img/logo.gif" alt="卵料理カフェ Cockeyolly"></h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">ニュース</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">今月のおすすめ</a></li> <li><a href="#">オリジナル雑貨</a></li> <li><a href="#">マップ</a></li> <li><a href="#">メール</a></li> </ul> </div><!--sub--> <div id="main"> <h2><img src="img/title.gif" alt="今月のおすすめ"></h2> <div class="content"> <h3>きのこのオムライス</h3> <p><img src="img/photo01.jpg" alt="きのこのオムライス"> ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。:800円 </p> </div><!--content--> <div class="content"> <h3>シーフードスパゲッティシーフードスパゲッティ<br> バルサミコ風味</h3> <p><img src="img/photo02.jpg" alt="シーフードスパゲッティシーフードスパゲッティ バルサミコ風味"> エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。:900円 </p> </div><!--content--> <div id="footer"> <small>(c)2014 卵料理カフェ Cockeyolly</small> </div> </div><!--main--> </div><!--container--> </body> </html>
CSS
@charset "utf-8"; html, body, div, ul, li, h1, h2, h3, p, 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{ vertical-align: bottom; border: none; } /* body */ body{ background:url(../img/bg_img.gif) repeat-y; font-size: 16px; } #container{ overflow: hidden; width: 660px; } /* sub */ #sub{ width: 160px; float: left; } h1{ padding: 30px; margin-bottom: 20px; } li{ line-height: 2.0; } li a{ display: block; color: #FFF; font-weight: bold; padding: 0 0 0 16px; } li a:hover{ color: #FEFF95; } /* main */ #main{ width: 480px; float: left; margin: 30px 0 0 20px; } #main h2{ text-align: center; margin-bottom: 85px; } .content{ margin-bottom: 60px; } .content h3{ border-left: solid 7px #D98200; color: #826047; line-height: 1.3; padding-left:0.5em; margin-bottom: 20px; } .content p{ line-height: 1.6; overflow: hidden; } .content p img{ float: right; margin: 0 0 10px 10px; } #footer{ text-align: center; color: #AAA; font-weight: bold; border-top: 2px #AAA solid; padding: 10px; }