プログラミング

固定フッターの作成方法

最終更新： 03/03/2025
1 分の読み

ウェブサイトに固定フッター（テディエル）を作成する方法は、HTMLとCSSを使用して簡単に実現できます。固定フッターとは、スクロールしても画面の下部に固定されて表示されるフッターのことです。このようなフッターは、サイト全体で一貫性を保ち、ユーザーがどのページにいても重要な情報に簡単にアクセスできるようにするために有効です。

以下では、HTMLとCSSを使用して固定フッターを作成する方法をステップバイステップで説明します。

関連記事

1. HTML構造の作成

最初に、HTMLで基本的な構造を作成します。ここでは、フッターをサイトの一番下に配置するための要素を定義します。

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定フッターの例title>
  <link rel="stylesheet" href="style.css">
head>
<body>
  <div class="content">
    <h1>ウェブサイトのコンテンツh1>
    <p>ここにウェブサイトのコンテンツが表示されます。p>
  div>
  
  <footer class="footer">
    <p>© 2025 あなたの会社名. All rights reserved.p>
  footer>
body>
html>

上記のコードでは、サイトのコンテンツ部分とフッター部分をそれぞれ

と

で囲っています。フッターには著作権情報が含まれており、後でCSSを使って固定表示させます。

2. CSSで固定フッターのスタイルを設定

次に、CSSを使用してフッターを固定するためのスタイルを設定します。position: fixed;プロパティを使ってフッターを画面下部に固定します。

css
/* style.css */

/* 全体のスタイル */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.content {
  padding: 20px;
  height: 1000px; /* コンテンツ部分が長くなるように調整 */
}

.footer {
  position: fixed; /* フッターを固定する */
  bottom: 0; /* 画面の一番下に配置 */
  left: 0;
  width: 100%; /* フッターの幅を画面いっぱいにする */
  background-color: #333; /* フッターの背景色 */
  color: white; /* フッターの文字色 */
  text-align: center; /* 文字を中央揃え */
  padding: 10px 0; /* フッター内の余白 */
}

.footer p {
  margin: 0; /* pタグのデフォルトのマージンを削除 */
}

3. フッターの固定表示の解説

  • position: fixed;
    このプロパティは、フッターを画面に固定するために使用されます。スクロールしてもフッターは画面下部にとどまり、ユーザーがどの部分を見ていてもフッターが表示され続けます。

  • bottom: 0;
    これにより、フッターは画面の下端に配置されます。

  • left: 0;
    フッターの左端を画面の左端に合わせます。

  • width: 100%;
    フッターの幅を画面全体に広げます。

  • background-color: #333;
    フッターの背景色を設定します。ここではダークグレーにしていますが、色は自由に変更できます。

  • color: white;
    フッター内の文字色を白に設定します。

  • text-align: center;
    フッター内のテキストを中央揃えにします。

  • padding: 10px 0;
    フッター内の上下の余白を設定します。

4. レスポンシブ対応

このフッターは、デスクトップビューだけでなく、モバイル端末にも対応できるようにレスポンシブデザインを考慮します。特に、モバイル端末ではフッターが画面を覆いすぎないようにするため、コンテンツ部分に適切な余白を確保します。

css
@media (max-width: 600px) {
  .footer {
    font-size: 14px; /* モバイルではフォントサイズを小さく */
  }
}

上記のコードは、画面幅が600px以下の場合に、フッター内のフォントサイズを小さくして、モバイル画面でも見やすいように調整しています。

5. 完成したHTMLとCSSのコード

最終的なHTMLとCSSのコードは次の通りです。

HTML

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定フッターの例title>
  <link rel="stylesheet" href="style.css">
head>
<body>
  <div class="content">
    <h1>ウェブサイトのコンテンツh1>
    <p>ここにウェブサイトのコンテンツが表示されます。p>
  div>
  
  <footer class="footer">
    <p>© 2025 あなたの会社名. All rights reserved.p>
  footer>
body>
html>

CSS

css
/* style.css */

/* 全体のスタイル */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.content {
  padding: 20px;
  height: 1000px; /* コンテンツ部分が長くなるように調整 */
}

.footer {
  position: fixed; /* フッターを固定する */
  bottom: 0; /* 画面の一番下に配置 */
  left: 0;
  width: 100%; /* フッターの幅を画面いっぱいにする */
  background-color: #333; /* フッターの背景色 */
  color: white; /* フッターの文字色 */
  text-align: center; /* 文字を中央揃え */
  padding: 10px 0; /* フッター内の余白 */
}

.footer p {
  margin: 0; /* pタグのデフォルトのマージンを削除 */
}

/* モバイル向けのレスポンシブ設定 */
@media (max-width: 600px) {
  .footer {
    font-size: 14px; /* モバイルではフォントサイズを小さく */
  }
}

これで、HTMLとCSSを使用した固定フッターの作成が完了です。フッターはスクロールしても常に画面の下部に表示され、コンテンツを邪魔することなく、ユーザーに重要な情報を提供できます。

最終更新： 03/03/2025
1 分の読み
Back to top button