2カラムレイアウト基本
2カラムレイアウト基本
- 画像は適宜選択する
Homepage Title サブタイトルサブタイトルサブタイトル コンテンツのタイトル コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。 コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。 メニューのリンク1 メニューのリンク2 メニューのリンク3 メニューのリンク4 メニューのリンク5 Copyright © AUTHOR NAME, All Rights Reserved.
解答例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>2カラムレイアウト</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header"> <h1>Homepage Title</h1> <p>サブタイトルサブタイトルサブタイトル</p> </div><!-- /#header --> <div id="wrapper"> <div id="content"> <h2>コンテンツのタイトル</h2> <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p> <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p> </div><!-- /#content --> <div id="nav"> <ul> <li><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div><!-- /#nav --> </div><!-- /#wrapper --> <div id="footer"> <p><small>Copyright © AUTHOR NAME, All Rights Reserved.</small></p> </div><!-- /#footer --> </div><!-- /#container --> </body> </html>
@charset "utf-8"; /* reset */ html, body, div, h1, h2, p, ul, li, 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; } /* font-size */ html { font-size: 62.5%; } /* =10px */ body { font-size: 16px; font-size: 1.6rem; } /* =16px */ h1 { font-size: 36px; font-size: 3.6rem; } h2 { font-size: 18px; font-size: 1.80rem; } p { font-size: 16px; font-size: 1.6rem; } li { font-size: 14px; font-size: 1.4rem; } small { font-size: 10px; font-size: 1.0rem; } /* body */ body { color: #333; background: #E6E6E6; } /* layout */ #container { width: 760px; margin: 20px auto; padding: 16px; background: #FFF; } #header { height: 180px; margin-bottom: 30px; padding: 20px 0 0 20px; background: url(../img/header01.jpg) no-repeat center top; } #content { width: 550px; float: left; } b#nav { width: 180px; float: right; } #wrapper { overflow: hidden; margin-bottom: 10px; } #footer { padding: 10px; text-align: center; border-top: 1px solid #AAA; } /* #header */ #header h1 { font-family:Verdana, Geneva, sans-serif; margin-bottom: 15px; } /* #content */ #content h2 { background: #C1F569; margin-bottom: 20px; padding: 12px 0 10px 18px; } #content p { line-height: 1.6; margin-bottom: 20px; } /* #nav */ #nav li a { display: block; padding: 12px 0 10px 1.0em; border-bottom: 1px solid #AAA; font-weight: bold; color: #333; } #nav li:first-child a { border-top: 1px solid #AAA; } #nav li a:hover { color: #F90; }