CSSレイアウト
複雑な応用型レイアウト
footer (フッター部)
Yahoo!のトップページでは、フッターはYahoo!の「会社概要」や「利用規約」などのリンク集となっています。
この部分も、今までと同じように書いていけばOKです。まずは基本のHTMLから。ZIPファイル内のfooter_1.htmlも参考に。
Yahoo! フッター部の解説に使用するHTML, CSSをまとめました。ZIPで圧縮してあります。Yahoo! 個人ツール
<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>
HTMLは以上です。次はCSSですが・・・ここまでちゃんと読んでくれた方なら、このくらいのCSSは簡単に書けてしまうはずです。ぜひチャレンジしてみましょう。
必要なタグを追加すると、次のようになります。このHTMLのCSSを書いてみてください。空のCSSファイルがZIPフォルダ内にfooter2.cssという名前で用意してあります。（このHTMLはZIPファイル内のfooter2.htmlになります。）
<div id="base">
<ul id="footer">
<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 class="last-item"><a href="#">リンク７</a></li>
</ul>
</div>
ZIPファイル内のfooter3.html, footer3.cssがYahoo!フッター部の完成コードになります。参考にしてください。
