コピーライト表記を含むフッタ部分の見栄えを調整しましょう。
コピーライト表記の部分が左寄せになっているので、見栄えが良くなるようにセンタリング配置にします。
base.cssに以下の記述を追加してください。
@charset "utf-8"; /*============================================ 全般的なスタイル ============================================*/ * { margin:0; padding:0; /*全要素のマージン・パディングをリセット*/ } body { background-color:#cccccc; /*ページ全体の背景色*/ background-image:url("images/bg_body.png"); /*ウェブページ全体の背景画像*/ font-size:95%; /* フォントサイズを95%にする */ font-family: "MS ゴシック",sans-serif; /* フォントの種類をゴシック系にする */ line-height:1.5; /* 行の高さを1.5倍にする */ color:#333333; /* 文字色を濃い目のグレーにする */ } div#pagebody { width:1000px; margin:0 auto; /*内容全体をセンタリング*/ background-color:#ffffff; /*内容全体の背景色*/ background-image:url("images/bg_pagebody.png"); /*コンテンツ全体の背景画像*/ background-repeat:repeat-y; /*背景画像を縦方向に繰り返す*/ } img {border:0;} /*画像のボーダーを0にする*/ p { width:660px; /*幅の指定*/ margin:10px; /*マージン*/ text-indent:1em; /*インデント幅*/ } hr { clear:both; /*フロート配置をクリアする*/ width:680px; /*幅の指定*/ margin:10px 0px; /*マージン*/ border:1px dotted #cccccc; /*内容の区切りをグレーの点線表示にする*/ } /*============================================ ヘッダ ============================================*/ div#header { height:80px; /*ヘッダ部分の高さ*/ } div#header h1 { padding:10px 0px 5px 20px; /*見出しの位置調整*/ font-size:18px; /*フォントのサイズ*/ font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/ } div#header h1 a {text-decoration:none;} /*リンクの下線を無くす*/ /*============================================ メインメニュー ============================================*/ ul#menu { width:960px; height:50px; /*メインメニュー部分の幅と高さ*/ margin:0px 20px; /*上下マージン0px、左右マージン20px*/ } #menu li { list-style-type:none; /*リストマーカー無しにする*/ display:inline; /*リスト項目をインライン表示にする*/ float:left; /*リスト項目を横に並べる*/ } #menu li a { background-color:navy; /*背景色*/ color:#ffffff; /*文字色*/ display:block; /*リンク部分をブロック表示にする*/ width:240px; height:35px; /*幅と高さ*/ padding:15px 0px 0px 0px; /*上パディング*/ text-align:center; /*テキストをセンター揃えにする*/ text-decoration:none; /*リンク部分を下線無しにする*/ background-image:url(images/bg_menu1.png); /*背景画像を指定*/ background-repeat:no-repeat; /*背景画像を繰り返さない*/ } #menu li a:hover { background-color:#000066; /*リンクにマウスが乗ったら背景色を変更する*/ background-image:url(images/bg_menu2.png); /*リンクにマウスが乗ったら背景画像を変更する*/ } /*============================================ ヘッダ画像 ============================================*/ #img_index { width:960px; height:360px; /*トップページのヘッダ画像の表示サイズを指定*/ margin:5px 20px; /*マージン*/ } /*============================================ サブメニュー(左カラム) ============================================*/ h2 { width:160px; height:43px; /*幅と高さ*/ padding:17px 0px 0px 100px; /*パディング*/ font-size:16px; /*フォントサイズ*/ background-image:url(images/bg_h2.png); /*背景画像*/ background-repeat:no-repeat; /*背景画像を繰り返さない*/ background-color:#000033; /*背景色*/ color:#ffffff; /*文字色*/ } div#submenu { width:260px; /*幅の指定*/ margin:10px 10px 10px 25px; /*位置調整*/ float:left; /*カラムを左寄せにする*/ } div#submenu ul li { list-style-type:none; /*リストマーカー無しにする*/ } div#submenu ul li a { display:block; /*リンク部分をブロック表示にする*/ height:45px; /*高さを45pxにする*/ padding:15px 0px 0px 30px; /*パディング*/ text-decoration:none; /*リンクの下線を無くす*/ border-bottom:1px dotted gray; /*リンク領域の下部にボーダーを付ける*/ background-image:url(images/bg_submenu.png); /*リンク領域に背景画像を付ける*/ background-repeat:no-repeat; /*背景画像を繰り返さない*/ color:#333333; /*文字色*/ } div#submenu ul li:first-child a { border-top:1px dotted gray; /*一番上のリンクに上線を表示*/ } div#submenu ul li a:hover { text-decoration:underline; /*リンクにマウスが乗ったら下線を表示*/ } div#submenu ul li a:before { content: url("images/icon_submenu.png");/*アイコン画像を挿入*/ margin:0px 10px 0px 0px; /*マージン*/ vertical-align:text-top; /*縦方向の表示位置*/ } /*============================================ インフォメーション(右カラム) ============================================*/ div#info { width:660px; /*幅の指定*/ float:left; /*カラムを左寄せにする*/ padding:10px 20px 0px 0px; /*パディング*/ } h3 { font-size:14px; /*文字サイズ*/ width:660px; /*横幅*/ padding:10px 0px 10px 20px; /*パディング*/ background-color:#003399; /*背景色*/ color:#ffffff; /*文字色*/ border-radius:3px; /*角丸にする*/ } .infoimg_index { width:200px; height:150px; /*画像の表示サイズを指定*/ margin:0px 0px 20px 20px; /*マージン*/ float:right; /*画像を右寄せにする*/ } hr { clear:both; /*フロート配置をクリアする*/ } /*============================================ フッタ ============================================*/ div#footer { clear:both; /*回り込みを解除する*/ height:40px; /*高さの指定*/ padding:10px 0px 0px 0px; /*パディング*/ font-size:x-small; /*フォントサイズを小さくする*/ text-align:center; /*センタリング*/ }
保存をしたらブラウザで表示してみましょう。
フッタ部分の高さやコピーライト表記の表示位置が調整されて、フォントサイズが小さくなれば成功です。
height:40px; は、フッタボックスの高さ、 padding:10px 0px 0px 0px; はパディング(内側余白)、 font-size:x-small; はフォントサイズを指定しています。
font-sizeプロパティにはx-smallというキーワード値を指定しましたが、他にも14pxのような数値や80%のようなパーセント値で指定することも可能です。
text-align:center; は、フッタの内容がセンター寄せになるようにスタイル指定しています。
text-alignプロパティの値にcenterを指定すればセンター寄せ、leftを指定すれば左寄せ、rightを指定すれば右寄せになります。
text-align:center; を指定する前にはフッタの内容が左寄せになっていましたが、
これは、日本語の場合にはtext-alignプロパティの初期値がleftになっているためです。
今回で、トップページ(index )は完成とします。
さらにこだわるなら、いくらでもスタイリングの指定を増やすことは可能ですが、どこかで完成と決めなければキリがありません。
どこまで手を入れた時点で完成とするのがベストかについては、絶対の正解があるわけではありません。
全体からディテールまで矛盾なく、できるだけ少ない手数でまとめるのが、デザインが目指すべき方向性のひとつでしょう。
ここまでの制作段階で、サンプルサイトは以下の状態となっています。
<前へ | 目次へ | 次へ> |