フッターの制作

フッターの制作アイキャッチ画像

では今回はフッターの制作を行います。

今回のボリュームはすごく短いです(笑)

このレッスンでの表示目標

デザイン目標値

HTML

footerタグは閉じタグ</main>のすぐ下に書いてください。

<footer>
    <img src="images/logo_wh.png" alt="LIFE STYLEロゴ">
    <small>© LIFE STYLE.Inc.</small>
</footer>

CSS

footer{
    background-color: #707070;
    color: #fff;
    text-align: center;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 70px 0;
}

footer img{
    margin: 0 auto 40px;
}

では、解説していきます。

コードの解説

まずは<footer>タグにbackground-color: #707070;とcolor: #fff;とtext-align: center;を

<footer>タグの中の<img>タグmarginをに設定しましょう。

footer{
    background-color: #707070;
    color: #fff;
    text-align: center;
}

footer img{
    margin: 0 auto 40px;
}

実行結果は以下になります。

実行結果

少しまだデザインとは違います。

背景を横幅いっぱいにして上下の余白を出します。

以下のCSSを<footer>タグに追加してください。

footer{
    background-color: #707070;
    color: #fff;
    text-align: center;
    width: 100vw; /* 追加したコード */
    margin: 0 calc(50% - 50vw); /* 追加したコード */
    padding: 70px 0; /* 追加したコード */
}

これで<footer>タグが幅いっぱいに、上下の余白もでました。

実行結果 CSS実行結果

これでフッターの設定は以上になります。

次がサイト制作「Lifestyle」（入門）最後のレッスンになります。

最後はレスポンシブ（幅の違うデバイス）への対応となります。

では次のレッスンへ行きましょう！