HTML/CSS

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

2021年2月21日

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

 

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

どうすればいいですか?

 

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

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

 

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

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

 

※補足

この記事は連載の1つです。

以下の学習ステップを歩んできていることを想定しています。

>>【完全無料】HTMLとCSSの学習ステップ一覧

 

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

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

 

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

 

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

 

<footer> © 2021 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の学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

\ Web制作の副業で今すぐ稼ぎたい方はこちら /

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

 

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

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

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

続きを見る

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

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

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

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

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

続きを見る

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

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS

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