６．フッターボックスをコーディネート

この「実践式フローチャート」でやってることは、
他のコンテンツの応用編、まさに実践形式でやってるので、
ちゃんと説明すると、どうしてもこれだけの量になってしまいます。

だから、一気にやるのもいいけど、できれば少しずつゆっくりでいいから、
意味を考えながら進めてほしいなって思います。

さあ、ラストの工程です。
ここでは、コピーライトのテキストと、背景画像を定義するぐらいなので、
前のページよりは、だんぜん楽勝だと思います。


このページの文中のリンクは、すべて新しいウィンドウで開きます。

このページの完成サンプルはこちら >>

■フッターボックスの定義内容

まずは、 height でボックスの縦幅を 30px に定義。

次に、下の画像を背景画像として、定義したげます。
画像
フッターボックスの背景画像

それから、テキストの位置を
text-aligin: center を使って、中央寄せに定義します。

paddingで、ボックス内の余白も定義しましょう。

そして最後に、
font-size で、フォントサイズを 10px に定義して終了。

スタイルシートの定義は、ココまでです。


以下のテキストを、フッターボックス内に入れてあげて、

Copyright ©Bar SASAKURE All rights reserved.

どんよりとした、ダークな酒場「Bar SASAKURE」の完成です。


■フッターボックスのHTMLソース
・・・・・・・・・・・・・


お、おわりました。。。

それでは、また次回作でお会いしましょう。
今度はたぶん、タテ３列のサイトをつくるつもりです。

こんなところまで、お付き合いしていただいて、ありがとう☆
おつかれさまでした。