【デイトラ学習記録】Web制作コース中級編旧課題 DAY48 フッターのコーディング

2023年8月6日2023年11月24日

こんにちは、ここぽてとです。

いよいよフッターまで来ました！かなり長かった（笑）でも1つ前のお問い合わせフォームの課題が難しすぎてかなり苦戦しましたが、今回はフッターで最後のところなので気合いを入れて、学習を頑張っていきます！

コーディングの条件

・全体的にリンクの設定は不要
・スマホ時は縦並びにする
・背景はグラデーション

フッターのコーディング方法

背景をグラデーションにする

背景のグラデーションには”linear-gradient”を使って、そのあと色の方向と色の始まりと終わりを指定します。

footer {
    background: linear-gradient(色が変化する方向, 開始色, 終了色));
}

色の方向は指定によって変化できます。

footer{
     background: linear-gradient(to bottom, #666666,#333333);
    }

こうすれば、上が#666666（グレーみたいな色）で、下につれて#333333（黒ぽい色）なっていくようになります。

方向	意味
to top	下から上へ
to right	左から右へ
to left	右から左へ
to bottom	上から下へ

グラデーションの向きを変えるだけで雰囲気もかなり変わりますよ！

HTMLの記号・特殊文字の文字（文字実体参照）

文字参照を使用すると、通常なら文字化けしてしまうような文字や記号を表示させることができます。

表示の方法ですがは、 & にキーワードを指定して、最後に ; を入れると表示することができます。（例）©
今回は著作権のマークを表示したいので、フッターのコピーライトのところに文字絶対参照を使っています。

WEB制作で役立つ文字実体参照をまとめてくださってます！

フッターの3ブロックの作り方

3つ（左・真ん中・右）にブロックを分けてそれを親要素で囲み、横並びにします。左と真ん中と右を全部合わせて100％にするように設定します。それぞれの％はデザインカンプを見ながら調整していきます。

.footer__contents {
  display: flex;　/*横並び*/
}/* 左、中央、右を囲うブロック */

.footer__left {
  width: 25%;
}/* 左のブロック */

.footer__center {
  width: 50%;
}/* 中央のブロック */

.footer__right {
  width: 25%;
}/* 右のブロック */

トップボタンの実装

トップへ戻るボタンは常に右下に表示されるようにすることが多いのでボタン自体を”position: fixed;” で常に固定されるようにコーディングします。レスポンシブ対応は表示位置だけではなく、ボタンの大きさも小さくなるように設定しました。

.totop{
    position: fixed;
    right: 24px;
    bottom: 24px;

    @include mq('sp'){
    right: 20px;
    bottom: 20px;
    }

    a{
    text-decoration: none;
    }

    img{
     width: 60px;
     @include mq('sp'){
    　width: 40px;
    　}
    }
}

まとめ&感想

本日は、フッターのコーディングを製作しました！1つ前のお問い合わせフォームの課題が難しすぎて、こちらは今まで学習してきた知識で作れるのでまだ簡単に感じました。知識が定着して、多少なりとも成長している気がします！今回でデザインカンプをコーディングする学習が終わりました！次からはアニメーションをつけたりする作業なので、とても楽しみです！それでは！

よかったらシェアしてね！