トップページ:フッター作成

トップページ:メイン作成」の次はフッターの作成です。marginとpaddingの違いや簡単な色の指定方法等も説明しています。通常、フッターには著作権や留意事項等を記載します。

トップページフッターのスタイルシート作成

 「デザイン」で考えたレイアウトで以下のフッター部分を作っていきます。

トップページ:フッター作成1

 スタイルシートでは以下を追加します。

【トップページフッターのスタイルシート記述例】
#footer {
padding: 10px 0px 10px 0px;
border-top: 1px rgb(0,176,240) solid;
text-align: center;
}

 #footerはこれまで説明してきた通り、#が付いているため独自定義で独自の名前が付けられます。

 paddingはこれまで説明してきたmarginと同様に余白を示しますが、以下の違いがあります。

トップページ:フッター作成2

 水色で塗りつぶした部分が定義したボックスの範囲です。つまり、marginは定義した範囲の外側の余白を定義し、paddingは内側の余白の定義をします。

 どちらでも同じように表示される事もありますが、例えば定義したボックスとボックスの間に余白を設ける場合はmarginを使います。

トップページ:フッター作成3

 定義したボックスと中の文字の間に余白を設ける場合はpaddingを使います。

トップページ:フッター作成4

 今回はフッターの上部に線を引いて文字を書く所と余白を設けるためpaddingの方を使っています。

トップページ:フッター作成5

 border-topは上の線です。solidは実線、1pxは線の太さを示しています。solid以外にもdotted(点線)、double(二重線)等が指定出来ます。

 rgbで色を示していますが、例えばExcel等でデザインしてその色をそのまま使いたい場合、書式設定等で色を選択する画面で「その他の色」をクリックすると「色の設定」画面になります。そこで「ユーザー設定」タブをクリックするとRGBが表示されます。

トップページ:フッター作成6

 スタイルシートにこの数字をそのまま記述する事でデザインした色を反映させる事が出来ます。

 text-alignは文字をセンタリングする事を定義しています。「トップページ作成:ヘッダー」等ではmargin: 0 auto 0 auto;というようにmarginを使ってセンタリングしていますが、<div>等で定義するボックスをセンタリングするためです。文字通りテキストであればtext-align: center;でセンタリング可能です。

トップページフッターのhtml作成

 htmlではスタイルシートで定義したfooterをこれまでのhtmlに追加で配置するだけです。

【トップページフッターのhtml記述例】
<div id="footer">
フッター
</div>

 上記追加はこれまで記載したhtml中の</body>の前で</div>でpageを閉じる前に行って下さい。

ここまでの作成結果

 ここまでのスタイルシートとhtmlをコピーしてこれまでのスタイルシートとhtmlに張り付けて保存し、ブラウザで表示すると以下のようになります。

トップページ:フッター作成7

 上記は実際のサイズを縦横半分にしています。

前のページトップページ:メイン作成」    次のページトップページ:ボックス配置

  • このエントリーをはてなブックマークに追加