Tailwind CSSでフッターを固定する方法

WEB制作
Tailwind CSSでフッターを固定する方法

Tailwind CSSで、コンテンツが少ないときは画面の下側、コンテンツの多いときはコンテンツの終わりにフッターを設置する方法を紹介いたします。

コンテンツの少ない時にフッターが画面の下側に来るように設定してあげとくと、HPがより美しくなると思います。

目次

デモ

See the Pen Fixed Footer with Tailwind CSS by mizusawa (@webty_mizusawa) on CodePen.

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sticky Footer with Tailwind CSS</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex flex-col min-h-screen">
    <main class="flex-grow">
        <section class="container mx-auto px-4">
            <h1 class="my-6 text-center text-2xl font-bold">Sticky Footer with Tailwind CSS</h1>
            <p class="my-6 text-center">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam purus risus, venenatis non arcu at, dictum euismod risus. Pellentesque faucibus dui sit amet eleifend gravida. Praesent dapibus sapien sit amet mauris tempor ultrices non luctus tellus. 
            </p>
        </section>
    </main>
    <footer class="bg-gray-200">
        <p class="p-2 text-center text-xs">Copyright © 2019 Webty, inc. All Rights Reserved.</p>
    </footer>
</body>
</html>

解説

要素全体にflex flex-col min-h-screen、コンテンツ要素にflex-growクラスを設定することで、コンテンツ要素が縦方向に伸びるようになり、フッターが画面の一番下に表示されるようになります。