デイトラweb制作中級編 DAY19

フッターのコーディング

①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 &copy; 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が終わって、デザインカンプからのコーディングもあと半分になりました。引き続きがんばりたいです!

コメントを残す

メールアドレスが公開されることはありません。