HTML/CSS

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

2021年2月21日

CSSでフッターを整えよう【WEB制作の基本です】と書かれた画像

 

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

どうすればいいですか?

 

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

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

 

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

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

 

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

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

 

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

CSSでフッターを修正する方法

 

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

 

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

 

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

 

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

 

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

 

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

 

フッターが崩れているWEBサイト

 

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

 

追加する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をなくした画像

 

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

 

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

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

 

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

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

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

てんし君

 

ということで

clear: both;

 

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

 

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

 

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

どうでしたでしょうか?

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

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

「意外と簡単」

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

 

どんどん作ってみよう

 

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

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

 

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

 

今回は以上です。

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

 

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

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

 

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

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

 

 

プログラミングスクールに関する情報

2021年最新プログラミングスクール おすすめランキング 【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきまし ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。 1位:テックキャンプ  【転職成功率 ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-HTML/CSS

© 2021 エンジニアてんし君ブログ