Learning site for website creation

T08:フッター作成

公開日:2021年11月14日 更新日:2021年11月14日

フッター作成

tmp_common.html

<footer class="Footer">
  <div class="Footer_body">
    <div class="Footer_logo">
      <div class="Logo">
        <a class="Logo_link -white" href="index.html">
          <div class="Logo_jp">
            東中野法律事務所
          </div>
          <div class="Logo_en">
            Higashi Nakano Law Office
          </div>
        </a>
      </div>
    </div>
    <div class="Footer_tel">
      <div class="Tel">
        <div class="Tel_header -white">
          ご予約・ご相談随時受付中
        </div>
        <div class="Tel_body">
          03-0000-0000
        </div>
        <div class="Tel_footer">
          受付時間 月曜~金曜:9:00-18:00
        </div>
      </div>
    </div>
    <div class="Footer_btn">
      <div class="btnBox">
        <a class="btn -type2" 
         href="contact/index.html">
          お問い合わせ・ご相談
        </a>
      </div>
    </div>
  </div>

  <div class="Footer_copyright">
    &copy; 2021 東中野法律事務所.
  </div>
</footer>

フッターデザインを定義

/* Footer */
.Footer {
  background-color: #3f51b5;
  color: #fff;
  margin-top: auto;
}

.Footer_body {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #5c6bc0;
  padding: 0.8em 0;
}

.Footer_logo {
  margin-right: auto;
}

.Footer_copyright {
  font-size: 0.7em;
  text-align: center;
  padding: 20px;
}

.Footer .btn {
  box-shadow: 0 0 5px #5b6bc0;
  margin: 0 0.5em 0 1em;
}

電話番号

css/_Tel.css

/* Tel */
    :
.Tel_header.-white {
  color: #fff;
}
    :

ロゴ

css/_Logo.css

/* Logo */
    :
.Logo_link.-white {
  color: #fff;
}
    :

完成図

テンプレートコーディング