２カラムレイアウト演習
２カラムレイアウトの設計
下図を参考にコーディングせよ。素材、テキストは与えられるものを使用。
教科書３８ページ。
方針
#header
- 「PICKUPSTREAMの画像」
divで囲ってfloatで左側へ。アイコン群も浮かすのでフロートさせないとレイアウトが崩れやすいの事。またSEO的には画像検索があるため見出しに画像を入れても全くマイナスというわけではない。 - 「アイコン群」
フロートさせてインライン要素に変更し横並びにする。 - 「ｈｅａｄｅｒｉｍｇ」
今回はレスポンシブデザインを考慮してフルードイメージとする。 - 「ナビ」
ｕｌで横ナビ→基本パターン（liをフロート、親要素のulにオーバーフローヒドン、li aをブロックに変更し、右側だけボーダー指定、ナビなのでホバーだけ）
#content
- 浮かせて左へ
- 見出しが最難関→ｐｉｃｋ ｕｐへ
#sidebar
- 浮かせて右へ
- 見出しとｕｌの組み合わせが上下にあるのでクラスをつけて、基本パターンの縦ナビ（ulのトップ、li aのボトムにボーダーを設定、li aはブロックに変更、擬似クラスは内容に応じて。）
#footer
- html5では<adress>は厳密に連絡先・問合せ先にしか使わないので、Copyrightには<small>を使う。
- clear:both
ｐｉｃｋ ｕｐ
１，２，３はソースコード順
<div id="content> <div class="date><span>1</span> AUG</div> <h2>海岸のデコレーション</h2> <div class="cate>CATEGORY: <a href="#>海と海岸と空</a></div> #content h2 { font-size: 28px; border-bottom: solid 1px #AAA; } .date { float: right; background-color: #0097D8; padding: 8px 22px; border-radius: 55px / 48px; text-align: center; color: #FFF } .date span { display: block; font-size: 32px; } .cate, .cate a { font-size: 14px; color: #666; }
１ .dateボックスをフロートライトにすると包含ボックス一杯まで右に移動する
２ 「１」をブロックレベル要素に変更すると横並びできなくなり、「AUG」は.dateボックス内で匿名ブロックボックスを形成し下に配置される。
ｈｔｍｌ
<!DOCTYPE html>
<html lang="ja>
<head>
<meta charset="utｆ-8>
<title>2カラムレイアウトの設計</title>
<link rel="stylesheet" href="cｓs/style.cｓs>
</head>
<body>
<div id="container>
<div id="header>
<div id="site>
<h1>
<img src="img/logo.pｎg" alt="PICKUP STREAM>
</h1>
</div>
<!-- /#site -->
<div id="iconmenu>
<ul>
<li>
<a href="#>
<img src="img/twittｅr.pｎg" alt="twittｅr>
</a>
</li>
<li>
<a href="#>
<img src="img/faceboｏk.pｎg" alt="Faceboｏk>
</a>
</li>
<li>
<a href="#>
<img src="img/Goｏgleplus.pｎg" alt="Goｏgle Plus>
</a>
</li>
<li>
<a href="#>
<img src="img/rsｓ.pｎg" alt="Rsｓ Feed>
</a>
</li>
</ul>
</div>
<!-- /#iconmenu -->
<div id="headerimg>
<img src="img/header.jpg" alt=">
</div>
<!-- /#headerimg -->
<div id="nav>
<ul>
<li>
<a href="#>HOME</a>
</li>
<li>
<a href="#>ABOUT</a>
</li>
<li>
<a href="#>CONTACT</a>
</li>
</ul>
</div>
<!-- /#nav -->
</div>
<!-- /#header -->
<div id="content>
<div class="date>
<span>1</span>AUG
</div>
<h2>海岸のデコレーション</h2>
<div class="cate>CATEGORY:
<a href="#>海と海岸と空</a>
</div>
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>
<p>
<img src="img/sand.jpg" alt="海岸線で生息する小さな植物>
</p>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>
<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</div>
<!-- /#content -->
<div id="sｉdebar>
<div class="menu>
<h3>CATEGORIES</h3>
<ul>
<li>
<a href="#>山と森林</a>
</li>
<li>
<a href="#>海と海岸と空</a>
</li>
<li>
<a href="#>都市と建築</a>
</li>
<li>
<a href="#>地下</a>
</li>
</ul>
</div>
<!-- /.menu -->
<div class="menu>
<h3>RECENT POSTS</h3>
<ul>
<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>
<!-- /.menu -->
</div>
<!-- /#sｉdebar -->
<div id="footer>
<p>PICKUP STREAM</p>
<p>
<small>Copyright © PICKUP STREAM, all rights reserved.</small>
</p>
</div>
<!-- /#footer -->
</div>
<!-- /#container -->
</body>
</html>
ｃｓｓ
@charset "utｆ-8";
/* reset
================================= */
html,
body,
div,
h1,
h2,
h3,
p,
ul,
li,
img,
a 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 {
border: none;
vertical-align: bottom;
}
/* layout
================================= */
body {
margin: 25px 0;
font-size: 16px;
}
#container {
width: 960px;
margin: 0 auto;
}
#header { margin-bottom: 50px }
#content {
width: 600px;
float: left;
margin-bottom: 50px;
}
#sidebar {
width: 300px;
float: right;
margin-bottom: 50px;
}
#footer { clear: both }
/* #site
================================= */
#site { float: left }
#headerimg img { margin-top: 5px }
/* #iconmenu
================================= */
#iconmenu {
float: right;
text-align: right;
}
#iconmenu ul { padding-top: 3px }
#iconmenu li { display: inline }
/* #nav
================================= */
#nav {
font-family: Helvetｉca, Arial, sans-serif;
font-size: 14px;
border-top: solid 1px #FFF;
background: #000;
}
#nav ul { overflow: hidden }
#nav li { float: left }
#nav li a {
display: block;
width: 120px;
padding: 6px 0;
border-right: solid 1px #FFF;
color: #FFF;
text-align: center;
}
#nav li a:hover { background-color: #0097D8 }
/* #content
================================= */
#content p {
line-height: 1.6;
margin-bottom: 20px;
}
#content h2 {
font-size: 28px;
border-bottom: solid 1px #AAA;
margin-bottom: 6px;
padding-bottom: 12px;
}
.date {
float: right;
background-color: #0097D8;
padding: 8px 22px;
border-radius: 55px / 48px;
text-align: center;
font-family: Helvetｉca, Arial, sans-serif;
font-weight: bold;
color: #FFF;
}
.date span {
display: block;
font-size: 32px;
}
.cate,
.cate a {
font-size: 14px;
color: #666;
margin-bottom: 20px;
}
/* .menu
================================= */
.menu { margin-bottom: 50px }
.menu h3 {
font-family: Helvetｉca, Arial, sans-serif;
font-size: 26px;
color: #66C1E8;
margin-bottom: 5px;
}
.menu ul { border-top: solid 1px #AAA }
.menu li { font-size: 14px }
.menu li a {
display: block;
color: #666;
padding: 10px 0 10px 20px;
background: url(../img/listmark.pｎg) no-repeat 0 50%;
border-bottom: solid 1px #AAA;
}
.menu li a:hover { background-color: #B4F0FF }
/* #footer
================================= */
#footer {
font-family: Helvetｉca, Arial, sans-serif;
color: #FFF;
background-color: #000;
padding: 10px 10px 20px 10px;
}
#footer small {
font-size: 12px;
font-weight: bold;
display: block;
margin-top: 10px;
}
