フッター

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

SNSリンクを掲載したフッター

<footer>
<ul class="footer-nav">
    <li>
        <a href="https://twitter.com/">Twitter</a>
    </li>
    <li>
        <a href="https://facebook.com/">Facebook</a>
    </li>
    <li>
        <a href="https://youtube.com/">YouTube</a>
    </li>
    <li>
        <a href="https://instagram.com/">Instagram</a>
    </li>
            </ul><li><a href="https://twitter.com/">Twitter</a></li>
<a href="https://facebook.com/">Facebook</a>
<a href="https://youtube.com/">YouTube</a>
<a href="https://instagram.com/">Instagram</a>
<small>© 2021 Cat Blog</small>

フッターの下にスペースができないようにする

<html>と<body>タグに対して「height:100%」とすることで
<article>タグに対してflex:1とすることでフッターを押し下げることができます。

<body>
<article>
        <h1>自己紹介</h1>
        <p>
            Webデザイナー+WebデベロッパーのManaです。
            日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。
            カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。
            現在はWebサイト制作のインストラクターとして教育関連頑張ってます。
        </p>
</article>
<footer>
        <p><small>© 2020 Mana</small></p>
</footer>
</body>

html, body {
    height: 100%;
}
body {
    color: #333;
    line-height: 1.6;
    font-family: sans-serif;

    display: flex;
    flex-direction: column;
}
article {
    flex: 1;
    padding: 2rem;
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
footer {
    background: #0bd;
    color: #fff;
    text-align: center;
    padding: 2rem 0;
}