レフトボックスをコーディネートしていきましょう。
サンプルを見てわかるとおり、２つのボックスメニューが付け加えられてます。
でも、見た目には、３つですが、
これは、６つの<DIV>ボックスによって、つくられています。
このページの文中のリンクは、すべて新しいウィンドウで開きます。
このページの完成サンプルはこちら >>
■「トピックス」、「単語説明」、「過去の記事」と書かれた画像が入ってるボックスの定義内容
.box-midashi{
background-color: #4C4C4C;
text-align: center;
}
まず、背景色を定義してます。
それから、テキストを中央に表示するために、text-align: center を定義。
「トピックス」、「単語説明」、「過去の記事」と書かれたやつは、下の画像です。
これをふつうに入れて完成。
↓画像 ↓画像 ↓画像
■メニューリンクが書いてあるボックスの定義内容
.box-menu{
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
padding:0px 0px 0px 5px;
margin:0px 0px 10px 0px;
}
このボックスは、枠線が指定してあります。
左、右、下のみ定義してあげてください。
それから、パディングで、ちょっと見栄えよく間隔を空けてあげましょう。
そして最後に、
下のボックスとの間隔を空けるために、
margin:0px 0px 10px 0px;
と定義して完成。
ここまでの、ソースは下のような感じです。
■HTMLソース
<div class="base">
<div class="header"><img src="img/title.gif"><img src="img/usp.gif"></div>
<div class="left">
<div class="box-midashi"> <img src="img/topix.gif"> </div>/*トピックス*/
<div class="box-menu"></div> /*メニュー部分*/
<div class="box-midashi"> <img src="img/tango.gif"> </div>/*単語説明*/
<div class="box-menu"></div> /*メニュー部分*/
<div class="box-midashi"><img src="img/kako.gif"></div>/*過去の記事*/
<div class="box-menu"></div> /*メニュー部分*/
</div>
<div class="center"> </div>
<div class="footer"> </div>
</div>
</body>
つぎは
メニューをつくります。
ただテキスト書いてあるだけなので、たぶん簡単だと思います。
あたらしく定義するスタイルシートの内容です。
これを、コピペして、定義してください。
a:link{
color:#444444;
text-decoration:none;
}
div a:hover {
color: #E3004A;
text-decoration:none;
}
a:visited {
color:#444444;
text-decoration: none;
}
リンク色と、オンマウス時のカラーの指定するために、このように記述しときます。
そして、HTMLソースにこのように記述します。
<div class="base">
<div class="header"><img src="img/title.gif"><img src="img/usp.gif"></div>
<div class="left">
<div class="box-midashi"><img src="img/topix.gif"></div>
<div class="box-menu">
■<a href="#">東関東毒売協会会長の一日</a>
■<a href="#">はじめての毒売三段活用</a>
■<a href="#">７人の毒売</a>
■<a href="#">世界の毒売市場</a>
■<a href="#">本日の終値</a>
</div>
<div class="box-midashi"><img src="img/tango.gif"></div>
<div class="box-menu">
■
<a href="#">毒売とは</a>
■<a href="#">毒舌とは一味違う毒売</a>
■<a href="#">会長挨拶</a>
■<a href="#">ニューヨーク・ムズムズ紙</a>
</div>
<div class="box-midashi"><img src="img/kako.gif"></div>
<div class="box-menu">
■<a href="#">まさるへ</a><br>
■<a href="#">弟７回１級毒売士認定試験</a><br>
■<a href="#">さらなる高みへの挑戦</a><br>
■<a href="#">特定地域に広がる波紋</a>
</div>
</div>
<div class="center"></div>
<div class="footer"></div>
</div>
「box-menu」とクラス指定されている<DIV>ボックスの間に、
上の赤いテキストの箇所をコピペして、完成です。
