30days

フッターの作り方 【デイトラ解説】

こんにちは、Web制作フリーランスで活動しているヒロ(@hirokiweblax)です。

本日はフッターセクションをやっていこうと思います!

今回は要素の配置だけなので、ここまできた人は躓くポイントはないかと思います。
ですが、最後なので一応解説します!

ピクセルパーフェクト、レスポンシブは行ってないので、コーディング時の参考ぐらいに思ってくれれば幸いです。
ご質問があれば答えますのでDMでお問い合わせください。@hirokiweblax

完成形

HTML

<footer>
  <div class="inner">
    <div class="f_company-info">
      <div class="f_logo">
        <img src="img/logo@2x.png" alt="company">
      </div>
      <div class="f_txt-info">
        <div class="address">
          <p>住所: ほげほげのほげほげ</p>
        </div>
        <div class="tel-number">
          <p>TEL: 0000-00-0000</p>
        </div>
      </div>
    </div>
    <div class="f_nav">
      <ul>
        <li><a href="#card">Card</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#price">Price</a></li>
        <li><a href="#access">Access</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <div class="f_circles">
      <div class="light-blue circle"></div>
      <div class="deep-blue circle"></div>
      <div class="pink circle"></div>
    </div>
  </div>
  <div class="copyright">
    <p>Copyright © 2018 @haniwa008 All rights reserved.</p>
  </div>
  <div class="to-top"><img src="/img/totop.svg" alt="上矢印"></div>
</footer>

SCSS

footer{
  background: linear-gradient(#666666, #333333);
  position: relative;
  .inner{
    max-width: 1063px;
    width: 100%;
    margin: 0 auto;
    padding-top: 74px;
    display: flex;
    justify-content: space-between;
  }
}


.f_logo{
  width: 200px;
  height:39px;
  img{
    width: 100%;
    height: 100%;
  }
}

.f_txt-info{
  font-size: 16px;
  color:white;
  .address{
    margin-top: 30px;
  }
  .tel-number{
    margin-top: 15px;
  }
}

.f_nav{
  color:white;
  margin-top: 9px;
  ul{
    display: flex;
  }
  li{
    margin-left: 30px;
  }
}

.f_circles{
  display: flex;
  padding-right: 13px;
  width: 213px;
  margin-top: 6px;
  .circle{
    width: 30px;
    height: 30px;
    border-radius:50%;
    &:not(:first-child){
      margin-left: 16px;
    }
  }
  .light-blue{
    background-color:#55ACEE;
  }
  .deep-blue{
    background-color:#3B5998;
  }
  .pink{
    background-color:#D93177;
  }
}

.copyright{
  text-align: center;
  color:white;
  font-size: 14px;
  margin-top: 91px;
  padding-bottom: 35px;
}

.to-top{
  position: absolute;
  bottom:15px;
  right:15px;
}

フッターの作り方

まず、背景のグラデーションを作成します。
使うプロパティはlinear-gradientです。縞々の背景を作る時なども使います。

少し扱いが難しいプロパティなので、以下のリンクを参考にしてください。

次にinnerを設定します。
左右の幅が違うので、余白の小さい左(ロゴの左)に余白を合わせます。

丸の右はmarginpaddingで余白を合わせましょう。

.inner{
    max-width: 1063px;
    width: 100%;
    margin: 0 auto;
    padding-top: 74px;
  }

次にコンテンツのブロック分けです。
左、真ん中、右で分けましょう。

「ロゴ」、「ナビ」、「丸」の垂直方向が中央揃えになっているので
ここでflex-boxのalign-items:center;を使いたいところですが、、、

flexを解除したときにロゴと会社情報が近くになるように、上記のブロック分けにしています。

そしてinnerにflexとjustify-contents:space-between;で横並べにします。

ナビや丸の位置がずれていると思うので、幅やマージンを設定して指定の位置に来るようにしましょう。

僕は丸の幅をロゴと同じようにすることで、ナビを真ん中に来るようにしています。

.f_circles{
  display: flex;
  padding-right: 13px;
  width: 213px;
  margin-top: 6px;
}

最後にコピーライト、右下にtotopの画像を配置すれば終わりです。

まとめ

フッターの作り方は以上です。お疲れ様でした。

静的なLPの基本的な作成方法は、今回の模写でほとんど学んでいます。
あとは模写や実務で慣れていきましょう!

ちなみに僕の最初のころはフッターを4時間かけても作成することができませんでした。笑
しかし、今は30分もあれば作れるようになりました!
今できなくても落ち込むことはなくて、日々勉強を積み上げていきましょう!

補足

See the Pen
フッター
by hiro (@hirog)
on CodePen.

See the Pen
フッター
by hiro (@hirog)
on CodePen.