CSSレイアウト
複雑な応用型レイアウト
tools（個人ツール）
Yahoo! の個人ツールです。（やっと右カラムの解説に入りました。）
パーツに分けると、下の図のような感じになります。
タイトルはh2、黄色の部分はul、ピンク色のアイテムたちはli + a、「ログイン」はaを用いて書くことにします。
まずは基本のHTMLから。ZIPファイル内のtools1.htmlも参考に。
<h2>ツール</h2>
<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>
<li><a href="#">アイテム７</a></li>
</ul>
<ul>
<li><a href="#">アイテム８</a></li>
</ul>
Yahoo! 個人ツールの解説に使用するHTML, CSSをまとめました。ZIPで圧縮してあります。Yahoo! 個人ツール
次は、CSSでレイアウトを行う際に必要になる タグ, class, id の追加を行います。body, base, left-column, right-columnなどの共通のdiv要素も追加しておきます。
<div id="base">
<div id="left-column">
</div>
<div id="right-column">
<div id="tools">
<h2>ツール</h2>
<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>
<li><a href="#">アイテム７</a></li>
</ul>
<ul>
<li><a href="#">アイテム８</a></li>
</ul>
</div>
</div>
</div>
では、CSSを書いていきます。最初にやることは・・・
- アイテムを横に並べていく（inline要素として表示させる）
- h2要素の文字の大きさ・文字色・背景色を指定する
- ul要素の背景色・ボーダーを指定する
こんなところでしょうか。色などは次のようになります。
- h2
- 文字サイズ：100%
- 文字色：#fff
- 背景色：#4d99e5
- ul
- 背景色：#e5f6ff
- ボーダー：1px solid #4d99e5
ソースコードは次のようになります。ZIPファイル内のtools2.cssもご覧ください。
#tools li { display: inline; }
#tools h2 {
font-size: 100%;
color: #fff;
background: #4d99e5;
}
#tools ul {
background: #e5f6ff;
border: 1px solid #4d99e5;
}
次は、空白・行間などの調整をします。CSSは次のようになります。ZIPファイル内のtools3.cssもご覧ください。
#tools li {
display: inline;
line-height: 150%;
}
#tools h2 {
font-size: 100%;
color: #fff;
background: #4d99e5;
padding: 4px 10px;
}
#tools ul {
background: #e5f6ff;
border: 1px solid #4d99e5;
margin-bottom: 2px;
padding: 4px 10px;
}
後は・・・h2のタイトルの右側が、白くさせるのと、メール、ポイントのアイコンを付けること、アイテムとアイテムの間にハイフンを挿入すること。後もう一つ、「ログイン」というリンクをタイトルの右上のほうに追加します。
まずは、必要なclass等をHTMLに追加します。（ZIPファイル内のtools4.htmlもご覧ください。）
<div id="base">
<div id="left-column">
</div>
<div id="right-column">
<div id="tools">
<h2>ツール <a href="#">ログイン</a></h2>
<ul>
<li class="mail"><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 class="last-item"><a href="#">アイテム７</a></li>
</ul>
<ul>
<li class="points"><a href="#">アイテム８</a></li>
</ul>
</div>
</div>
</div>
次はCSSを書いていきます。「ログイン」を右上に表示するやり方は、categoriesの場合と同じです。また、「ー（ハイフン）」を表示する方法もcategoriesの場合と同じです。
メール、ポイントのアイコンは、li要素の背景画像として表示させます。CSSは次のようになります。ZIPファイル内のZIPファイル内のtools4.cssもご覧ください。
#tools li {
display: inline;
margin-right: 3px;
padding-right: 9px;
line-height: 150%;
background: url("images/hyphen.png") no-repeat right center;
}
#tools .last-item {
margin: 0;
background: none;
}
#tools h2 {
font-size: 100%;
color: #fff;
background: #4d99e5 url("images/tools_title.png") scroll no-repeat right top;
padding: 4px 10px;
position: relative;
}
#tools h2 a {
position: absolute;
top: 1px;
right: 0;
font-weight: normal;
}
#tools ul {
background: #e5f6ff;
border: 1px solid #4d99e5;
margin-bottom: 2px;
padding: 4px 10px;
}
#tools .mail {
background: url("images/mail.png") no-repeat scroll left center;
padding-left: 22px;
padding-right: 0px;
}
#tools .points {
background: url("images/points.png") no-repeat scroll left center;
padding: 5px 0 5px 20px;
}
ZIPファイル内のtools5.htmlとtools5.cssが、個人ツールの完成コードになります。変更点は、文字列を Yahoo! 個人ツールに合わせたことです。CSSの方はtools4.cssと全く同じものです。
