T08:フッター作成
公開日: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">
© 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;
}
:
完成図

テンプレートコーディング
同じタグのコンテンツ
同じカテゴリーのコンテンツ