デイトラweb制作中級編 DAY19
nakano
フッターのコーディング
①HTML
<footer class="footer">
<div class="footer__inner inner">
<div class="footer__content">
<div class="footer__left">
<div class="footer__logo"><a href=""><img src="./img/logo.png" alt=""></a></div>
<div class="footer__address">住所：ほげほげのほげほげ</div>
<div class="footer__tel">TEL：0000-00-0000</div>
</div>
<div class="footer__center">
<ul class="footer__nav">
<li><a href="">Card</a></li>
<li><a href="">News</a></li>
<li><a href="">Price</a></li>
<li><a href="">Access</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="footer__right">
<ul class="footer__sns">
<li><a href="" target="_blank"><img src="./img/twitter.png" alt=""></a></li>
<li><a href="" target="_blank"><img src="./img/facebook.png" alt=""></a></li>
<li><a href="" target="_blank"><img src="./img/instagram.png" alt=""></a></li>
</ul>
</div>
</div>
<div class="footer__copy">Copyright © 2020 デイトラ All rights reserved.</div>
</div>
</footer>
<div class="to-top"><a href=""><img src="./img/totop.png" alt=""></a></div>文字実態参照
<div>Copyright © 2020 デイトラ All rights reserved.</div>
※そのまま「©」と書くと、文字化けすることもある
ほかにも、「™」や「®」などある ↓
参考記事
リンクの表示先を指定する
<a href="" target="_blank">新しいタブで開く</a>
指定の種類
・同じタブで開く → 「_self」
・新しいタブで開く → 「_blank」
・インラインフレーム内で開く
・新しいウィンドウで開く → 「window.open」
※「_blank」はセキュリティの脆弱性が問題視されている
「_blank」のセキュリティ対策
「noopener」と「noreferrer」を指定する
<a href="" target="_blank" rel="noopener noreferrer">新しいタブで開く</a>
②SCSS「.footer」~「.footer__nav」
.footer {
background: linear-gradient(to bottom, #666666, #333333);
padding: 60px 0 24px;
color: #fff;
@include mq('sp') {
padding: 30px 0 14px;
}
}
.footer__content {
display: flex;
@include mq('sp') {
display: block;
}
}
.footer__left {
width: 34%;
@include mq('sp') {
width: 100%;
}
}
.footer__logo {
width: 205px;
}
.footer__address,
.footer__tel {
font-size: 14px;
}
.footer__address {
margin-top: 22px;
@include mq('sp') {
margin-top: 13px;
}
}
.footer__tel {
margin-top: 5px;
@include mq('sp') {
margin-top: 6px;
}
}
.footer__center {
width: 44%;
@include mq('sp') {
width: 100%;
margin-top: 24px;
}
}
.footer__nav {
display: flex;
@include mq('sp') {
margin-top: 24px;
justify-content: center;
}
li {
&:not(:first-child) {
margin-left: 40px;
@include mq('sp') {
margin-left: 20px;
}
}
a {
text-decoration: none;
}
}
}③SCSS「.footer」~「.footer__nav」
.footer__right {
width: 22%;
@include mq('sp') {
width: 100%;
margin-top: 24px;
}
}
.footer__sns {
display: flex;
justify-content: flex-end;
@include mq('sp') {
justify-content: center;
}
li {
&:not(:first-child) {
margin-left: 16px;
}
a {
text-decoration: none;
}
img {
width: 30px;
}
}
}
.footer__copy {
margin-top: 38px;
font-size: 14px;
text-align: center;
@include mq('sp') {
margin-top: 22px;
}
}
.to-top {
// 画面に固定
position: fixed;
right: 24px;
bottom: 24px;
@include mq('sp') {
right: 12px;
bottom: 12px;
}
a {
text-decoration: none;
img {
width: 60px;
@include mq('sp') {
width: 40px;
}
}
}
}トップに戻るボタン
.to-top {
position: fixed;
right: 24px;
bottom: 24px;
}
デザインだけでなく機能も持たせる方法 → 中級編 DAY5
まとめ
今回はフッターのコーディングをしました。
勉強していて特に気になったのは、リンクの表示先の指定です。
場合によってはセキュリティの問題で引っかかってしまうので、この点は今後気を付けたいと思います。
Day19が終わって、デザインカンプからのコーディングもあと半分になりました。引き続きがんばりたいです！
