いよいよラストの工程です。
この工程で、やることは、たいしたことじゃありません。
前のページでやったような、段組もしないですし。
ここでは、
テキストの表示位置を定義してあげるだけです。
このページの文中のリンクは、すべて新しいウィンドウで開きます。
このページの完成サンプルはこちら >>
■フッターボックスの定義内容
.footer{
clear: left;
height: 48px;
padding:17px 0px 0px 0px;
text-align: center;
font-size: 10px;
background: url("フッター用の背景画像までのパス");
background-repeat: no-repeat;
}
今回の変更箇所は、上の赤いテキストの部分。
順をおって説明しますね。
まず、背景画像に、灰色の横線が引いてあって、
テキストを書くようなスペースが出来上がってますよね？
ここの
スペースにテキストが配置されるように、フッターボックスの定義内容を、変更してあげます。
そこで、最初の定義内容だと、タテの位置があってないので、
padding: 17px 0px 0px 0px;
パディングで上のの間隔だけ定義しなおします。
そして、このままでは、ボックスのタテの全体幅が大きくなりすぎてるので、
元のheight:
65px; から、
17px 引き算してあげて、
height: 48px;
と定義しなおします。
次に、ヨコ方向のテキストの位置を定義しますが、
これは、パディングをつかわないで、
テキストを中央表示する属性と値を書き込んであげます。
text-align: center;
これで、スタイルシートの定義変更は終了です。
そして、今度は、テキストを書き換えてください。
Copyright ©Dokuuri-shinbun All rights reserved
ソースは下のようになります。
■HTMLソース
<body>
<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><br>
■<a href="#">はじめての毒売三段活用</a><br>
■<a href="#">７人の毒売</a><br>
■<a href="#">世界の毒売市場</a><br>
■<a href="#">本日の終値</a>
</div>
<div class="box-midashi"><img src="img/tango.gif"></div>
<div class="box-menu">
■<a href="#">毒売とは</a><br>
■<a href="#">毒舌とは一味違う毒売</a><br>
■<a href="#">会長挨拶</a><br>
■<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">
<img src="img/midashi.gif" width="382" height="231">
<div class="comment">
「だって、だいたいみんなそうなんじゃないですか？・・・
<br>
<br>
<br>
<br>
<br>
<br>
<br>
・・・・・」
<br>
<br>
・・・そう言いはなち、氏は話を締めくくってくれた。氏との毒売論議のあと、あまりの感慨の深さにしばらく呆然としていたわたしであったが、ＪＲ新宿駅東口方面へと消えてくその背中から、いつまでも目を離せずにいたのを覚えている。（ビ）
<div class="prof">
カルボナーラ昌明
<br>
<br>
「タイミングの悪さ」という、<br>
時間毒（ジカンドク）を操る、<br>
カリスマ的なポインズンバイヤー。この写真も、「シャッターチャンスにピースサインが間に合わない」という、氏の底知れぬ実力を知らしめる結果となった。（ビ）
</div>
<div class="kaijyo"></div>
</div>
<div class="footer">
Copyright © Dokuuri-shinbun All rights reserved
</div>
</div>
</body>
・・・
やりました！「毒売新聞」完成です（笑）
これで、氏もうかばれることでしょうっ。（＾ー＾）
