CSSでフッターを整えよう【WEB制作の基本です】

あなた

WEBサイトのフッターを修正したいです。

どうすればいいですか？

前回はCSSで画像を縦並びにする方法について解説してきました。

前回の記事：CSSで画像を縦並び＆右寄せしよう【すぐにできる】

CSSで画像の配置は修正できたものの、こんどはフッター（WEBサイトの1番下に表示する要素）のレイアウトが崩れてしまっています。

今回はフッターを直していきます。

ちなみにこの記事は連載記事の1つです。こちらから学習を進めておいてください。

>>HTMLとCSSの学習ステップ一覧はコチラ

【この記事でわかること】

【この記事の信頼性】

ではさっそく見ていきましょう。

CSSでフッターを修正しよう

今回CSSで装飾していく　HTML部分は次の箇所です。

<footer> © 2016 Tenshikun All rights reserved.</footer>

ちなみに現在はこんな感じで崩れちゃっていますね。

さっそく修正していきましょう。

追加するCSS

以下のCSSを追加しましょう。

footer {
    clear: both;
    height: 20px;
    width: 900px;
    background-color: #000;
    font-size: 10px;
    text-align: center;
    color: #FFF;
    line-height: 17px;
    margin: 0 auto 0 auto;
}

ここまで制作してきた中でほとんど見てきたプロパティなので、大体は理解できると思いますが「clear:both」だけははじめて出てきましたね。

clear:bothとは

clear:bothはfloatを解除するために必要です。

具体的に、見てみましょう。

次の画像は「clear:both」が無いものです。

レイアウトが崩れています。

実は、ここでclear:bothがないと、1つ前の要素で使ったfloatというプロパティの影響を受け続けてしまうのです。

前回で画像の位置を修正するときに「float」を使いましたよね？

それが影響してしまっているのです。

あなた

そ、そんなことがあるんですね。

はい。

floatを使うときは要注意ですよ。

人によってはfloatは極力使わないほうがいいという方もいます。

てんし君

ということで

でfloatを解除してあげていることがわかったと思います。

フッターができたことでWEBサイトが完成です

ここまでWEBサイトを制作してきましたが、これで一旦すべて完成です。

どうでしたでしょうか？

「なんとなくHTMLとCSSの使い方がわかった」

「WEBサイトを作るのが楽しい」

「意外と簡単」

と思っていただければ幸いです。

どんどん作ってみよう

もちろんHTMLとCSSには覚えることがもっとあります。

しかし、1つ1つをテキストで覚えるよりもトライアンドエラーを繰り返して、覚えていくのが良いかなと思います。

どんどんWEBサイトを作っていきましょう。

今回は以上です。

次回からは作ったWEBサイトを誰でも見ることができるようにしていきます。

HTMLとCSSの教材をまだ準備していない方は準備しましょう。

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

学習ステップの全体はコチラ

>>HTMLとCSSの学習ステップ一覧