HTMLでのスティッキーフッターの作成 – HTMLで始めるホームページ作成

HTMLでのスティッキーフッターの作成 – HTMLで始めるホームページ作成

ホームページ作成において、フッターを常に下部に固定しておくことは、ユーザビリティの向上に役立ちます。この記事では、HTMLとCSSを使ってスティッキーフッターを作成する方法について説明します。さらに、コード例を使って詳しく解説します。

スティッキーフッターとは

スティッキーフッターは、ページのコンテンツ量に関係なく、常に画面の下部に固定されるフッターのことを指します。これによって、ユーザーは重要なリンクや情報にいつでもアクセスすることができます。

スティッキーフッターの実装方法

まず、基本的なHTMLとCSSの構造を確認しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>スティッキーフッター</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .content {
            flex: 1;
        }
        .footer {
            background: #ccc;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <!-- コンテンツ -->
        </div>
        <div class="footer">
            フッター
        </div>
    </div>
</body>
</html>

コードの解説

HTMLの構造

上記のコードでは、全体を<div class="container">で囲み、その中に<div class="content">と<div class="footer">を配置しています。コンテナの高さを100vhとし、コンテンツ部分はflex: 1で残りのスペースを占めるようにしています。フッターはbackgroundやpaddingでスタイルを調整しています。

CSSのスタイル

CSSでは、HTMLとbodyの高さをheight: 100%に設定し、マージンをゼロにしてページ全体の高さを保持しています。また、フレックスボックスを利用して、コンテンツ部分とフッターの位置を調整しています。その結果、フッターは常に画面の下部に固定されます。

まとめ

このようにして、HTMLとCSSを使ってスティッキーフッターを簡単に作成できます。フッターが常に画面下部に表示されることで、ユーザーは重要な情報にアクセスしやすくなります。是非、自分のプロジェクトに取り入れてみてください。また、さらに詳しい情報が必要な場合は、こちら(外部リンク)のドキュメントも参考にしてください。

「良いUIはユーザーの体験を向上させる。」

あなたのホームページ作成が成功することを願っています。

コメントを残す