09 ホームページ中級講座 footerを下部に固定

2020年4月14日2024年12月29日

URLをコピーしました！

ページ一番下に常に配置する`footer`要素の設定

前回の「08 ホームページ中級講座」のfloatを使った回り込みに続き、今回はページの一番下に常にfooter要素を固定する方法を学びます。下記を参照ください

動画で学ぶWebデザイン教室　 Fuku…

08 ホームページ中級講座 floatを使った周り込み | 動画で学ぶWebデザイン教室　 Fukuokamiyako CSSの周り込みプロパティ「float」を使った例前回「07 ホームページ中級講座」の続きとなります。ここで使用するHTMLファイルとCSSファイルは下記のページを参照ください…

現代のWebサイトの特徴と課題

近年、スマートフォンサイトの普及により、縦に長いLP（ランディングページ）のデザインが主流となっています。トップページでは多くのコンテンツが配置される一方、サブページではコンテンツが少なくなりがちです。その結果、ページ全体の高さが不足し、footer要素がページの途中で終わってしまい、不格好な印象を与えることがあります。

コンテンツが少ない場合でも、footer要素を常にページの一番下に固定する設定を行います。これにより、デザインが整い、どのページでも一貫性を保てます

footerって、あのコピーライトとかがある下の部分ですか？

そうです！footerはページの一番下にある部分で、著作権表記や連絡先が入る場所ですね。上のコンテンツ部分が短い場合に、footerが途中で終わるのは見た目が悪いので、下に固定しておく設定をよく使います。

`footer`固定を行う場合のHTMLマークアップ

以下は、ページの一番下にfooterを常に固定するHTMLのマークアップ例です。footerを含む全体を.contentで囲むことで、レイアウトの統一性を確保しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ネットワークサービス 株式会社</title>
    <link rel="stylesheet" href="style_a.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,700,800&display=swap" rel="stylesheet">
</head>
<body>
    <!-- .contentをbody直下に指定し、footerもその中に含める -->
    <div class="content">
        <header>
            <h1>NewWorkService</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Access</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </nav>
        </header>
        <article>
            <div class="box1">
                <p>枠組みも対象文を列挙し記事ますんため、引用するられるフリーを検証毎厳格の活用内容をするれても満たすあっ、記事の原則は、利用作るメディアと陳述しこととして著作自由ないでてなりますあれ。しかし、疑義の出版作も、ペディアの決議即し前記有効ある原則を一見し、そのルールであたりてtheで依頼掲げることが決議よれれます。</p>
                <p>方針の方針が公開するれる以下を重要ます目的ですばとするから、企業を著作するます状態を文章ないを既存するて、さらにありななか。著作権が削除あるれん言語だあるば問題はたかもしなます。</p>
            </div>    
        </article>
        <footer>
            <p><small>Copyright © 2019 NET WORK SERVICE. All rights reserved.</small></p>
        </footer>
    </div>
</body>
</html>

`footer`を含む外側に`.content`を配置

.contentクラスを使用して、footerを含む全体のスタイルを定義します。この.contentがfooterの基準位置を決定します。

.content {
    width: 800px;                  /* コンテンツ幅を固定 */
    margin: 0 auto;                /* コンテンツを中央揃え */
    border-left: 5px solid #999;   /* 左側のボーダー */
    border-right: 5px solid #999;  /* 右側のボーダー */
    position: relative;            /* 子要素の位置指定にrelativeを基準に設定 */
    min-height: 100vh;             /* コンテンツの最小高さを画面の高さに合わせる */
    padding-bottom: 100px;         /* footerの高さ分の余白を確保 */
    box-sizing: border-box;        /* パディングとボーダーを含めてサイズを計算 */
}

一番下の`footer`部分のスタイル

footerは常にページの最下部に固定されるように、position: absoluteを使用しています。これにより、基準位置である.content内の下端に配置されます。

footer {
    background-image: linear-gradient(
        to bottom,
        #ddd, #fff, #aaa
    );                            /* 背景にグラデーションを設定 */
    padding: 1em 0;               /* 上下に1emのパディングを設定 */
    position: absolute;           /* 絶対位置を指定 */
    bottom: 0;                    /* 親要素の下端に固定 */
    width: 790px;                 /* 親要素の幅に合わせて設定 */
}

`position: absolute`

bottom: 0
親要素の下端から0の位置に配置します。これにより、footerが常に.contentの最下部に固定されます。
position: absolute
要素の位置を親要素（この場合は.content）を基準に絶対位置で指定します。

`position: absolute`　相対位置と絶対位置

CSSのpositionプロパティを理解するには、相対位置（relative）と絶対位置（absolute）の違いを知ることが重要です。

相対位置（`position: relative`）

特徴：要素自身の「通常の位置」を基準に位置を調整します。
使い方：要素を少しずらしたり、子要素の基準点として利用します。
効果：見た目はずれるが、他の要素の配置には影響を与えない。

.parent {
    position: relative; /* この要素の子要素が基準とする位置を決める */
}
.child {
    position: relative; /* 自分の通常位置からずれる */
    top: 10px;          /* 自分の位置を10px下に移動 */
    left: 20px;         /* 自分の位置を20px右に移動 */
}

親要素にposition: relativeを設定すると、子要素が基準点を持てます。子要素のrelativeは自身の位置を少し動かす場合に便利です。

絶対位置（`position: absolute`）

特徴：親要素に基づく位置を絶対的に指定します。
- 親要素にposition: relative, absolute, fixedのいずれかが設定されている場合、その親要素が基準点となります。
- 該当する親要素がない場合、ブラウザのビューポート（画面全体）が基準になります。
使い方：要素を特定の位置に固定したい場合や、レイヤー状の要素を作成したい場合に利用します。

.parent {
    position: relative; /* 子要素の基準点を定義 */
    width: 300px;
    height: 200px;
    background-color: #f0f0f0;
}
.child {
    position: absolute; /* 親要素を基準に絶対位置を指定 */
    top: 10px;          /* 親要素の上端から10px下 */
    left: 20px;         /* 親要素の左端から20px右 */
    width: 100px;
    height: 50px;
    background-color: #ccc;
}

親要素の範囲内で、指定した位置に固定されます。

子要素のtop, right, bottom, leftを使うと、具体的な位置を調整できます。

相対位置を利用した基準設定

よく使う方法として、親要素をposition: relativeに設定し、その子要素をposition: absoluteで配置する方法があります。この設定により、子要素の基準が親要素の範囲内に限定されます。

もし親要素にposition: relativeを指定しない場合、absoluteの基準は一番の親要素であるbodyとなり、意図しない位置に子要素が配置される可能性があります。そのため、親要素にposition: relativeを設定することで、子要素が適切な位置に配置されるように制御します。

.container {
    position: relative; /* 子要素の基準点を作成 */
    width: 400px;
    height: 300px;
    background-color: #ddd;
}
.overlay {
    position: absolute; /* 親要素内で固定 */
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
}

.containerが基準となり、その右下に.overlayが配置されます。

絶対位置（`position: absolute`）がレスポンシブデザインに与える影響

position: absoluteは、要素を親要素やビューポートに対して固定的な位置に配置するため、非常に便利なプロパティです。しかし、これが多用されると、レスポンシブデザインにおいていくつかの問題が発生することがあります。

画面サイズに依存した配置になる
絶対位置で配置を指定すると、要素の位置が固定されるため、画面サイズが変わった際にデザインが崩れる可能性があります。特に、コンテナ内の他の要素と競合する場合や、親要素のサイズが変化した場合に影響が顕著です。
柔軟性の欠如
相対的な位置調整がしづらく、デザインの修正や調整に手間がかかります。例えば、画面幅に応じてレイアウトを変更する際、絶対位置が障害になる場合があります。
可読性やアクセシビリティの低下
固定的な配置によって、テキストやボタンが小さい画面で見切れてしまうことがあり、ユーザー体験を損なう場合があります。

対応策として、relativeやflex、gridの活用し、絶対位置が必要な場面を最小限に抑え、可能な限り柔軟性の高いflexやgridレイアウトを利用することで、レスポンシブ対応を容易にします。

また、メディアクエリを併用し、絶対位置を使う場合でも、@mediaを活用して画面サイズに応じた細かな位置調整が必要です。そこでできるだけ、余白は、絶対位置を使わず、パディングやマージンで余白を調整することで、動的なレイアウトに対応可能を心がけましょう。使いすぎには注意な絶対位置です。