ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

footerスタイルの作成

footerスタイルの役割

フッターを表示する「footer」スタイルを作成しましょう。

「footer」にはコピーライトや各ページへのリンク、ホームページ情報や運営者情報などが表示されます。
なお、「さきちんカフェ」ではコピーライトのみ表示しています。

フッターの表示場所

ホームページが縦に長い場合、フッターに他ページへのリンクを表示したり(上までスクロールして戻るのが面倒なので)、「ページトップへ」などのリンクを設置する場合もあります。

覚えておきたいポイント

フッターで回り込みを解除する

contentsスタイルとsidenaviスタイルで設定したfloatを、footerで解除します。

footerスタイルの作成

それではfooterスタイルを作成していきましょう。
入力する項目がこれまでのスタイルよりも多く、間違えやすいので気をつけて入力しましょう!

footerスタイルの作成方法と手順

step.1

まずはセレクタ名を入力します。
「footer」というスタイルを作るので、セレクタ名は「footer」とします。

footer {

}

なお、「footer」タグに直接スタイルを適用するため、「#」や「.」などを付ける必要はありません。そのまま「footer」と入力しましょう。

step.2

次に、プロパティを入力していきましょう。
「footer」では、contentsスタイルとsidenaviスタイルで指定されているfloatの回り込みを解除する必要があります。

ここでclear:both;を入力し、回り込みを解除しましょう。

footer {
clear:both;
}

step.3

次に、高さを指定します。
「footer」には80pxの高さを指定するので、height:80px;を入力します。

footer {
clear:both;
height:80px;
}

step.4

テキストの表示位置を調整しましょう。
「footer」では、テキストを中央寄せに指定します。
text-align:center;を入力し、表示位置を中央にしましょう。

footer {
clear:both;
height:80px;
text-align:center;
}

step.5

フォントサイズの調整を行いましょう。
フォントのサイズを「0.85em」に指定します。

footer {
clear:both;
height:80px;
text-align:center;
font-size:0.85em;
}

step.6

背景画像を表示させましょう。
「img」フォルダ内の「footer.gif」を背景画像として設定します。
background-image:url(img/footer.gif);と入力しましょう。

footer {
clear:both;
height:80px;
text-align:center;
font-size:0.85em;
background-image:url(img/footer.gif);
}

step.7

ここままではさきほど設定した背景画像が繰り返し表示されてしまうので、繰り返し表示させないように指定しましょう。
background-repeat:no-repeat;を入力します。

footer {
clear:both;
height:80px;
text-align:center;
font-size:0.85em;
background-image:url(img/footer.gif);
background-repeat:no-repeat;
}

step.8

次はpadding-topを入力し、上方向に領域内余白を設定します。
領域内余白を設定せずに文字を入力すると背景画像と重なって表示されてしまうので、ここで調整してあげます。
padding-top:30px;を入力しましょう。

footer {
clear:both;
height:80px;
text-align:center;
font-size:0.85em;
background-image:url(img/footer.gif);
background-repeat:no-repeat;
padding-top:30px;
}

step.9

なお、padding-top:30px;を指定したので、縦幅を調整する必要があります。

height:80px;から、padding-topで指定した30pxを引きましょう。

80-30=50pxとなるので、heightは50pxに書き換えます。

footer {
clear:both;
height:50px;
text-align:center;
font-size:0.85em;
background-image:url(img/footer.gif);
background-repeat:no-repeat;
padding-top:30px;
}

step.10

最後に未対応ブラウザ用のおまじないを入力しましょう。
「footer」を未対応ブラウザに認識してもらうためにdisplay:block;を入力します。

footer {
clear:both;
height:50px;
text-align:center;
font-size:0.85em;
background-image:url(img/footer.gif);
background-repeat:no-repeat;
padding-top:30px;
display:block;
}

これで完了です。
最後に、間違って入力していないか確認を行いましょう。

[CSSの記述例]
footerスタイルの入力例

入力が完了したら、「UTF-8N」で上書き保存しておきましょう。
これで「footer」スタイルの完成です。

覚えておきたいポイント

計算忘れに注意しよう

領域内余白(padding)を設定した場合、width(横幅)やheight(縦幅)の値を変更するのを忘れないようにしましょう。
paddingで指定した値の分だけ、widthやheightから引いてあげる必要があります。

HTMLファイルの作成
« 前のページへ sidenaviスタイルの作成

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。