ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
フッターを表示する「footer」スタイルを作成しましょう。
「footer」にはコピーライトや各ページへのリンク、ホームページ情報や運営者情報などが表示されます。
なお、「さきちんカフェ」ではコピーライトのみ表示しています。
ホームページが縦に長い場合、フッターに他ページへのリンクを表示したり（上までスクロールして戻るのが面倒なので）、「ページトップへ」などのリンクを設置する場合もあります。
contentsスタイルとsidenaviスタイルで設定したfloatを、footerで解除します。
それではfooterスタイルを作成していきましょう。
入力する項目がこれまでのスタイルよりも多く、間違えやすいので気をつけて入力しましょう！
まずはセレクタ名を入力します。
「footer」というスタイルを作るので、セレクタ名は「footer」とします。
}
なお、「footer」タグに直接スタイルを適用するため、「#」や「.」などを付ける必要はありません。そのまま「footer」と入力しましょう。
次に、プロパティを入力していきましょう。
「footer」では、contentsスタイルとsidenaviスタイルで指定されているfloatの回り込みを解除する必要があります。
ここでclear:both;を入力し、回り込みを解除しましょう。
次に、高さを指定します。
「footer」には80pxの高さを指定するので、height:80px;を入力します。
テキストの表示位置を調整しましょう。
「footer」では、テキストを中央寄せに指定します。
text-align:center;を入力し、表示位置を中央にしましょう。
フォントサイズの調整を行いましょう。
フォントのサイズを「0.85em」に指定します。
背景画像を表示させましょう。
「img」フォルダ内の「footer.gif」を背景画像として設定します。
background-image:url(img/footer.gif);と入力しましょう。
ここままではさきほど設定した背景画像が繰り返し表示されてしまうので、繰り返し表示させないように指定しましょう。
background-repeat:no-repeat;を入力します。
次はpadding-topを入力し、上方向に領域内余白を設定します。
領域内余白を設定せずに文字を入力すると背景画像と重なって表示されてしまうので、ここで調整してあげます。
padding-top:30px;を入力しましょう。
なお、padding-top:30px;を指定したので、縦幅を調整する必要があります。
height:80px;から、padding-topで指定した30pxを引きましょう。
80-30=50pxとなるので、heightは50pxに書き換えます。
最後に未対応ブラウザ用のおまじないを入力しましょう。
「footer」を未対応ブラウザに認識してもらうためにdisplay:block;を入力します。
これで完了です。
最後に、間違って入力していないか確認を行いましょう。
入力が完了したら、「UTF-8N」で上書き保存しておきましょう。
これで「footer」スタイルの完成です。
領域内余白（padding）を設定した場合、width（横幅）やheight（縦幅）の値を変更するのを忘れないようにしましょう。
paddingで指定した値の分だけ、widthやheightから引いてあげる必要があります。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。