CSSレイアウト
複雑な応用型レイアウト
tips（トピックス、特集、お知らせ・・・）
tips と勝手に名づけてしまいましたが、トピックス、特集、お知らせなどのスペースを指しています。
見れば分かるとおり、（文字部分は加工してありますが^^;）周りのタイトル、ボックスはほぼ個人ツールの色違いです。早速作ってしまいましょう。
今回は、トピックスの部分だけの解説となります。特集、お知らせなどもほぼ同じように作成することが出来ます。
まずはHTMLから。ZIPファイル内のtips1.htmlもご覧ください。
<h2 class="first-tip"><a href="#">トピックス</a></h2>
<ul class="tip-box">
<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>
<li><a href="#">トピックス７</a></li>
<li><a href="#">一覧</a></li>
</ul>
Yahoo! Tipsの解説に使用するHTML, CSSをまとめました。ZIPで圧縮してあります。Yahoo! Tips
次に、CSSを適用する際に必要なタグ・class・idなどを追加します。ZIPファイル内のtips2.htmlもご覧ください。
<div id="base">
<div id="left-column">
</div>
<div id="right-column">
<div class="tips">
<h2><a href="#">トピックス</a></h2>
<ul class="tip-box">
<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>
<li><a href="#">トピックス７</a></li>
<li><a href="#">一覧</a></li>
</ul>
</div>
</div>
</div>
では、CSSを書いていきましょう。ほとんど個人ツールと同じです。ただし、ulのボーダーは左右のみに表示させます。
- h2
- 文字サイズ：100%
- 文字色：#fff（a要素に指定）
- 背色：#9b72cf url("images/tip_title_top.png") scroll no-repeat right top
- ul
- 背景色：#f1f1fd
- ボーダー：1px solid #9b72cf
ソースコードは次のようになります。ZIPファイル内のtips2.cssもご覧ください。
.tips h2 {
font-size: 100%;
background: #9b72cf url("images/tip_title_top.png") scroll no-repeat right top;
border-bottom: 2px solid #9b72cf;
padding: 4px 8px;
}
.tips h2 a { color: #fff; }
.tip-box {
color: #000;
background: #f1f1fd;
border-right: 1px solid #9b72cf;
border-left: 1px solid #9b72cf;
padding: 3px 4px;
}
後やるべきことは、マーカーを表示させることと、空白・行間の調整。また、「一覧」を右寄せで表示させること。
「一覧」の行は、次のように書き換えてください。
<li class="a-look"><a href="#">一覧</a></li>
マーカーですが、CSS講座 list-style-imageにあるとおり、line-heightと一緒に使うと、マーカーの位置がずれてしまうので、今回は背景画像として表示させることにします。
追加のCSSは次のようになります。
.tips li {
line-height: 150%;
padding-left: 6px;
margin-left: 2px;
background: url("images/dot.png") no-repeat scroll left center;
list-style: none;
}
.tips .a-look {
text-align: right;
background: none;
width: 98%;
}
これで、トピックスの部分は完成です。特集やお知らせなどもほとんど同じ事を繰り返していけば作成することが出来ます。
特集、お知らせの部分は解説しませんが、ZIPファイル内のtips4.html, tips4.cssがそれらを含めたソースコードになりますので、一通り目を通しておくと良いかもしれません。
