デイトラWeb制作コース中級編DAY19 フッターのコーディング②

2022年6月3日2023年2月16日

今回はコピーライトの部分に背景画像があるパターンです。ちょっとしたアクセントになりますね。

フッターのコーディングbgimg編 HTML

base.htmlと同じです。

フッターのコーディングbgimg編 CSS

base.scssとほとんど同じであるため、セレクタ毎の解説は割愛します。

まずは.footerを上書きします。上パディングのみ広くとり、左右と下は詰めます。

.footer__copyに画像を貼り、パディングとマージンを使い位置調整すれば完成です。

.footer {
  padding: 54px 0 0;
  background: linear-gradient(to bottom, #666, #333);

  @include mq('sp') {
    padding-top: 62px;
    padding-bottom: 0;
  }
}

.footer__copy {
  background: transparent url(../img/copy-bg.png) no-repeat bottom center / 618px 80px;
  min-height: 82px;
  margin-top: 74px;
  padding-top: 38px;
  padding-bottom: 24px;

  @include mq('tab') {
    margin-right: -$padding-tab;
    margin-left: -$padding-tab;
    padding-left: $padding-tab;
    padding-right: $padding-tab;
  }

  @include mq('sp') {
    margin-top: 42px;
    padding-top: 32px;
    padding-bottom: 10px;
    margin-right: -$padding-sp;
    margin-left: -$padding-sp;
    padding-left: $padding-sp;
    padding-right: $padding-sp;
  }
}

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