カラムレイアウトの設計演習 パターンB
カラムレイアウトの設計
下図を参考にコーディングせよ。素材、テキストは与えられるものを使用。
教科書４８ページ。
#content
方針
#header
- 「PICKUP STREAM」画像はh１とし、float:left、navはfloat:right。それぞれdivで囲む。
- navはdisplay:inlineでインライン要素に変更。
- overflow:hiddenを忘れずに。
#billboard
- #billboardの中は「左側の画像部」と「右側のリード文章部」。imgはインラインブロック要素なのでそのまま、リード文章部は#leadで囲み右へフロート。
- #leadをフロートさせてもimgの高さがつっかい棒になり、#billboardは潰れない。
→それでも親要素にoverflow:hiddenは入れるべきなのか？ - 背景色はグラデーション→Ｐｉｃｋ ｕｐへ
- 「MORE」のアイコン画像はバックグランドで読み込み位置をpaddingで調整。
#content
- 「thumbnail画像」+「ｈ２」+「ｄａｔｅ」+「ｍｏｒｅ」をクラスｐｏｓｔにする。
- クラスｐｏｓｔ全体を＜a＞でマークアップする。
→HTML5ではOK、HTML4.01やXHTML1.0では文法違反なので注意！ - ｐｏｓｔ幅をｐ、ｐｏｓｔ間のマージンをｑとすると
９６０＝４ｐ＋３ｑを満たせば良いので、検討をつけるためにｐ＝２００とするとｑ＝５３・・。そこから見栄えを考慮して数値を決める。
→マージンを２４ｐｘとするとｐｏｓｔ幅は２２２ｐｘ。（お手本は２１６ｐｘ，３２ｐｘ） - 日付はフロートで左へ、「MORE」もフロートで右へ。
#footer
- 「PICKUP×STREAM」とアイコンメニューを同一線上に並べる為に、それぞれをフロートさせる。左、右へ。
- サブメニューの一番最後の右ボーダーを：last-child擬似クラスを使ってnoneにする。→ある要素内で最後に書かれている子要素にスタイルを適用する。
ｐｉｃｋ ｕｐ
現状ではベンダープレフィックスをプロパティや値の先頭につけないと動作しない。
- Firefox （ - moz- ）
- Chrome、Sfari （ - webkit- ）
- IE （ - ms- ）
- Opera （ - o- ）
linear-gradient ( 開始位置と角度 開始色 途中色 終了色）；
ｈｔｍｌ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uｔf-8">
<title>カラムレイアウトの設計</title>
<link rel="stylesheet" href="cｓs/style-1.cｓs">
</head>
<body>
<div id="container">
<div id="header">
<h1 style="float:left">
<img src="img/logo.pnｇ" alt="PICKUP STREAM">
</h1>
<div id="nav">
<ul>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">CATEGORY</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
<li>
<a href="#">CONTACT</a>
</li>
</ul>
</div>
<!-- /#nav -->
</div>
<!-- /#header -->
<div id="#billboaｒd">
<img src="img/basket.jpg" alt="" width="620" height="465">
<div id="lead">
<h2>買い物に出掛けよう</h2>
<p>隣町に新しくできたショッピングセンターには楽しいお店がたくさんあります。１か所にまとまっているので、たくさん歩き回る必要もなく、楽々とお買い物ができておすすめです。</p>
<p class="date">2012年8月3日</p>
<p class="more">
<a href="#">MORE</a>
</p>
</div>
<!-- /#lead -->
</div>
<!-- /#billboaｒd -->
<div id="content">
<div class="post">
<a href="#">
<img src="img/windmill_thumb.jpg" alt="">
<h2>風車と風の関係</h2>
<p>風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上に向かって真正面をむかなければなりません…</p>
<p class="date">2012年8月1日</p>
<p class="more_s">MORE</p>
</a>
</div>
<!-- /.post -->
<div class="post">
<a href="#">
<img src="img/lｅaf_thumb.jpg" alt="">
<h2>ツルを伸ばしてどこまでも</h2>
<p>ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていく…</p>
<p class="date">2012年7月28日</p>
<p class="more_s">MORE</p>
</a>
</div>
<!-- /.post -->
<div class="post">
<a href="#">
<img src="img/sand_thumb.jpg" alt="">
<h2>海岸のデコレーション</h2>
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風…</p>
<p class="date">2012年7月20日</p>
<p class="more_s">MORE</p>
</a>
</div>
<!-- /.post -->
<div class="post">
<a href="#">
<img src="img/flower_thumb.jpg" alt="">
<h2>色とりどりの絨毯</h2>
<p>原生花 園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には…</p>
<p class="date">2012年7月5日</p>
<p class="more_s">MORE</p>
</a>
</div>
<!-- /.post -->
</div>
<!-- /#content -->
<div id="footer">
<p>PICKUPxSTREAM</p>
<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/facｅbook.pｎg" alt="facｅbook">
</a>
</li>
<li>
<a href="#">
<img src="img/googlｅplus.pｎg" alt="googlｅ Plus">
</a>
</li>
<li>
<a href="#">
<img src="img/rsｓ.pｎg" alt="rｓs Feed">
</a>
</li>
</ul>
</div>
<!-- /#iconmenu -->
<div id="submenu">
<ul>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /#submenu -->
<p>
<small>Copyright c PICKUP STREAM, all rights reserved.</small>
</p>
</div>
<!-- /#footer -->
</div>
<!-- /#container -->
</body>
</html>
ｃｓｓ
@charset "uｔf-8";
/* reset */
html,
body,
div,
h1,
h2,
p,
ul,
li,
img a {
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;
}
/* body */
body { margin-top: 25px }
p { line-height: 1.6 }
/* layout */
#container {
width: 960px;
margin: auto;
}
#header {
margin-bottom: 10px;
overflow: hidden;
}
##billboaｒd { margin-bottom: 25px }
#content { margin-bottom: 25px }
/* #header */
/* #nav */
#nav {
float: right;
font-size: 22px;
font-family: 'Mavｅn Pro', Helvetｉca, Arial, sans-serif;
padding-top: 30px;
}
#nav li { display: inline }
#nav li a {
margin-left: 10px;
border-bottom: solid 5px transparent; /* blockにした時に比べ文字と下線の空きが気になる。transparentは線を透明に。追記3/20 text-decorationにすれば空きはできないが下線の色はボーダーボトムで指定しかできないし。*/
color: #000;
}
#nav li a:hover { border-bottom-color: #FF1E97 }
/* #billboaｒd */
#lead {
float: right;
width: 300px;
color: #FFF;
margin-right: 15px;
}
#billboaｒd h2 { margin: 25px 0 }
#billboaｒd .date { margin-top: 15px }
#billboaｒd .more {
font-size: 18px;
font-family: 'Mavｅn Pro', Helvetｉca, Arial, sans-serif;
text-align: right;
margin-top: 10px;
}
#billboaｒd .more a {
color: #FFF;
background: url(../img/more.pｎg) no-repeat right center;
padding: 10px 40px 10px 0;
}
#billboaｒd {
background-color: #333;
background: -webkｉt-gradient(linear,left top, left bottom, from(#000), to(#888));
background: -webkｉt-linear-gradient(#000 0%, #888 100%);
background: -moz-linear-gradient(#000 0%, #888 100%);
background: -o-linear-gradient(#000 0%, #888 100%);
background: -ms-linear-gradient(#000 0%, #888 100%);
background: linear-gradient(#000 0%, #888 100%);
}
/* .post */
.post {
float: left;
width: 222px;
margin: 0 24px 25px 0;
}
.post:last-child { margin-right: 0 }
.post + .post + .post + .post {
/*old iｅ対策*/
margin-right: 0;
}
/* thumbnail */
.post img { width: 222px }
.post h2 {
font-size: 16px;
margin-top: 15px;
}
.post p {
font-size: 12px;
margin: 10px 0;
}
.post .date {
float: left;
font-weight: bold;
}
.post .more_s {
float: right;
color: #FFF;
font-size: 14px;
font-family: 'Mavｅn Pro', Helvｅtica, Arial, sans-serif;
background: #666 url(../img/more_small.pｎg) no-repeat 90% center/*50%とやると正常に表示しないことがある。*/;
padding: 3px 28px 3px 5px;
}
.post a {
color: #000;
display: block;
overflow: hidden; /* これをなくすとフロート部分（date,more_sが反応しなくなる）*/
}
.post a:hover { background-color: #CFFFB2 }
/* #footer */
#footer {
clear: both;
font-family: 'Mavｅn Pro', Helvｅtica, Arial, sans-serif;
color: #ffffff;
background-color: #333;
padding: 10px 10px 30px 10px;
}
#footer p { float: left }
#iconmenu { float: right }
#iconmenu ul { padding-top: 3px }
#iconmenu li { display: inline }
/* #submenu */
#submenu { clear: both }
#submenu ul {
margin: 10px 0 5px 0;
padding-top: 3px;
font-size: 12px;
}
#submenu li { display: inline }
#submenu a {
color: #ff1e97;
font-weight: bold;
border-right: solid 1px #FFF;
padding-right: 6px;
margin-right: 6px;
}
#submenu li:last-child a { border: none }
#submenu li + li + li a { border: none }
/* copy */
p small {
font-size: 12px;
font-weight: bold;
}
課題
h1をdivで囲みフロートレフト（#site｛float:left）していたが、下の行のCSSコーディングをしているうちになぜかフロートが無効になった(FirefoxやChomeで要素調査してもfloatの記述がない)。「overflow:hidden」「clear」の挙動を試していたのでフロートに影響したのは間違いないと思う。W３Cのチェックでは文法解析エラーが発生しましたとなっており、記述を正常に動作していた直前まで戻しても復帰しなくなった。そこでｈ1要素にインラインで記述すると一応解決。謎である。
色々おかしな点があると思うがギブアップ。画像にリンク。
※ローカルだと問題ないが、アップしたものを閲覧するとfirefox、ie11では閲覧に問題ないがchome、safari、operaは正しく表示せず。グラデーションエリアの白文字を表示しない(カラム落ちしている)、#contentのpost右2つがカラム落ち。
Dwのデザインビューで確認するとやはりカラム落ちしている。
<h1 style="float:left">が原因の模様。インラインをやめ、改めてdiv#siteでfloatにすると先ほどまで全く反応しなかったのに今回はインラインと同じカタチでカラム落ちになる。
#billbord img 、#leadをフロート、親要素の高さを確保するために#billboardにoverflow:hiddenにすると#leadのカラム落ちは解決。
>>改善版
しかし、.post_s、.post .date が全体を縮小する際にレイアウト崩れが発生(firefoxだと崩れない)。この部分は教科書のサンプルも先生の模範も崩れるのでよしとする。この縮小していくと崩れる#billboardの問題は瑣末な問題に思えるので後の課題とする。
