【HTML/CSS】 レイアウトの宿題
CSSを使ったレイアウトの宿題が出ていたので、さまざまなレイアウトをトレースしました。
01 サイト概要風
ソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Spread Experiment Web Site</title> <style> html, body, div, h1, h2, p{ margin: 0; padding: 0; line-height: 1.0; } body{ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .post{ width: 530px; margin: 20px auto; } h1{ font-size: 20px; background:url(img/01.png) no-repeat; padding: 12px 0 12px 45px; border-bottom: solid 2px #FEC900; } h2{ display:inline-block; text-align: center; font-size: 14px; font-weight: normal; color: #fff; background: #FF8800; margin: 12px 0; padding:10px 10px 8px 10px; } p{ text-indent: 1em; line-height: 1.6; margin-bottom: 16px; font-size:14px } </style> </head> <body> <div class="post"> <h1>Spread Experiment Web Site</h1> <h2>カテゴリーA</h2> <p>段落内のテキスト1文字目をインデントします。段落を表す「p」を再定義し、[p の CSS ルール定義]ダイアログが表示されたらカテゴリから[ブロック]を選択します。続けて[Text-indent]に任意の数値を入力し、プルダウンメニューから単位を選択します。これにより、1文字目の左側に指定した値のスペースが追加されます。</p> <p>段落全体をインデントします。STEP-01と同じように「p」を再定義し、カテゴリから[ボックス]を選択します。左右のみをインデントする場合は、最初に[Margin]にある[すべて同一]のチェックをはずします。これにより、上下左右個別にマージンが設定できるようになるので、[Right]と[Left]に任意の数値を入力し、プルダウンメニューから単位を選択します。これにより、段落の左右に指定した値のスペースが追加されます。</p> </div><!--.post--> </body> </html>
02 画像プレビュー風
ソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>お気に入りのギター</title> <style> html, body, div, p{ margin: 0; padding: 0; line-height: 1.0; } body{ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } #container{ text-align: center; margin: 20px auto; width: 510px; overflow: hidden; } img{ vertical-align: bottom; border: none; } .img{ float: left; margin: 5px; } p{ line-height: 1.6; } </style> </head> <body> <div id="container"> <div class="img"> <p> <img alt="" src="img/02.jpg"><br> ES-335 </p> </div> <div class="img"> <p> <img alt="" src="img/03.jpg"><br> Telecaster </p> </div> <div class="img"> <p> <img alt="" src="img/04.jpg"><br> Les Paul Custom </p> </div> <div class="img"> <p> <img alt="" src="img/05.jpg"><br> Firebird </p> </div> <div class="img"> <p> <img alt="" src="img/06.jpg"><br> SG </p> </div> <div class="img"> <p> <img alt="" src="img/07.jpg"><br> Cavern Bass </p> </div> <div class="img"> <p> <img alt="" src="img/08.jpg"><br> Precision Bass </p> </div> <div class="img"> <p> <img alt="" src="img/09.jpg"><br> Jazz Bass </p> </div> <div class="img"> <p> <img alt="" src="img/10.jpg"><br> D-28 </p> </div> </div><!--#container--> </body> </html>
03 イベント告知風
ソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ガラスの靴の持ち主を捜しています!</title> <style> html, body, div, h1, h2, h3, p, ul, li{ margin: 0; padding: 0; line-height: 1.0; } img{ border: none; vertical-align: bottom; } a{ text-decoration: none; } body{ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background:url(img/bg.gif) center repeat-y; color:#711808; font-size: 14px; } #header h2{ text-align: center; margin: 40px 0 20px 0; } #header p{ padding-left: 16px; line-height: 1.5; margin: 0 16px 0 32px; } #container{ margin: 0 auto; width: 600px; } #content{ margin: 30px 0; } #content h3{ margin: 30px 0 10px 10px; } #content p{ line-height: 1.5; margin: 0 16px 0 32px; } #content ul{ list-style: none; margin: 0 16px 0 32px; } #content li{ margin: 0 0 8px 0; text-indent: -1em; line-height: 1.5; } #content h2.centering{ text-align: center; margin: 10px 0 20px 0; } #content p.centering{ text-align: center; margin: 10px 0 20px -10px; } .yes{ padding-right: 16px; } </style> </head> <body> <div id="container"> <div id="header"><img alt="ガラスの靴の持ち主を探しています!" src="img/main.gif"> <h2><img alt="■川崎アゼリア・オープン懸賞 パソコンでご応募する方は" src="img/b_1.gif"></h2> <p>下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、<br> ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p> </div> <div id="content"> <h3>【応募規約】</h3> <ul> <li>○パソコンでのご応募は、お一人様一回限り(複数ご応募いただいた場合は最終応募のみ有効)とさせていただきます。<br> ※但し、郵便ハガキでのご応募は、ハガキ1通を1口として、お一人様何口でもご応募できます。</li> <li>○商店街で同時期に行われる他のキャンペーンと重複して当選することはできません。</li> <li>○当選後の権利譲渡、換金はできません。</li> <li>○応募の際の必要事項に、不備や虚偽があった場合は、無効になります。</li> <li>○ご応募は日本国内在住の方に限らせていただきます。</li> <li>○応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。</li> <li>○景品の"ガラスの靴"は、11月17日から12月25日まで商店街内に展示した靴となりますので、予めご了承ください。また、サイズは23.5cmとなります。</li> </ul> <h3>【個人情報のお取扱いについて】</h3> <p>ご応募にあたり、ご記入いただいた個人情報(郵便番号、住所、氏名、電話番号、年齢)は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。</p> <h3>【個人情報のお取扱いについて】</h3> <p><a href="#">(プライバシーポリシー)</a></p> <h2 class="centering"><img alt="■上記の内容に同意して応募しますか?" src="img/b_2.gif"></h2> <p class="centering"><img alt="はい" src="img/b_yes.gif" class="yes"><img alt="いいえ" src="img/b_no.gif"></p> </div><!--#content--> <div id="footer"> <address> <img alt="応募先・お問い合わせ" src="img/address.gif"> </address> </div><!--#footer--> </div><!--#container--> </body> </html>
04 2カラムレイアウト
ソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Homepage Title</title> <style> html, body, div, h1, h2, p, ul, li, small{ margin: 0; padding: 0; line-height: 1.0; } body{ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background:url(img/bg.gif) center repeat-y #E6E6E6; } #container{ background: #fff; margin: 0 auto; padding: 20px; width: 740px; } #header{ background:url(img/01.jpg) no-repeat center top; height: 160px; padding: 20px; margin-bottom: 30px; } #wrapper{ overflow: hidden; margin-bottom: 14px; } #content{ width: 540px; float:left; } #sidebar{ width: 180px; float: right; } #sidebar li{ border-top: 2px solid #E6E6E6; list-style: none; padding: 10px 0 8px 10px; } #sidebar li:last-child{ border-bottom: 2px solid #E6E6E6; } h1{ font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif; } h2{ background: #C5F54D; padding: 10px 0 8px 20px; font-size:18px; margin-bottom: 30px; } p{ line-height: 1.6; margin-bottom:16px; } #footer{ border-top:solid 2px #C5F54D; text-align: center; padding-top: 10px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>Homepage Title</h1> <p>サブタイトルサブタイトルサブタイトル</p> </div> <div id="wrapper"> <div id="content"> <h2>コンテンツのタイトル</h2> <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p> <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p> </div> <div id="sidebar"> <ul> <li>メニューのリンク1</li> <li>メニューのリンク2</li> <li>メニューのリンク3</li> <li>メニューのリンク4</li> <li>メニューのリンク5</li> <li>メニューのリンク6</li> </ul> </div> </div><!--#wapper--> <div id="footer"> <small>Copyright c AUTHOR NAME, All Rights Reserved.</small> </div> </div><!--#container--> </body> </html>