CSS

ブラウザ下部にフッターを完璧に固定するためのCSS実装ガイド

  /

CSSを活用することで、ウェブページのフッターエリアをブラウザの下部に常に固定して表示する方法があります。このテクニックは、特にコンテンツの量が少ないページで、フッターが浮いてしまうのを防ぐために有効です。
今回は、この方法を実装するための手順と、その具体的なコード例をご紹介します。

Contents

フッターエリアをブラウザの下に固定表示するCSSの実装

まず、フッターをブラウザの下部に固定するためのCSSの記述を確認しましょう。

  • 全体のタグ (html, body, #idWrap) の高さを100%として設定。
  • フッターエリア (#idFooterWrap) は、bottom: 0px と position: absolute を用いて下部に固定します。
<style type="text/css">
/* リセットCSS */
*{
    margin: 0;
    padding: 0;
}

/* 全体の高さ設定 */
html, body, div#idWrap{
    height:100%;
}

/* コンテンツエリアのスタイル設定 */
#idContents{
    width:600px;
    margin:0 auto;
}

/* タイトルのスタイル設定 */
h1{
    font-size:18px;
    font-weight:normal;
    text-align:center;
    padding-top:15px;
    line-height:1.2em;
}

/* パラグラフのスタイル設定 */
p{
    line-height:1.4em;
    font-size:16px;
    text-align:center;
    padding:20px 0 0 0;
}

/* フッターエリアの固定表示の設定 */
#idFooterWrap{
    height:80px;
    width:100%;
    background-color:#CCCCCC;
    position:absolute;
    bottom:0px;
    text-align:center;
}
</style>

フッターエリアを固定表示するためのHTMLの構造

次に、フッターエリアを固定表示するためのHTMLの構造を確認します。
id=”idFooterWrap”をフッターエリアとして固定表示します。

<div id="idWrap">
    <div id="idContents">
        <h1>フッターをブラウザの下に固定表示します。</h1>
        <p>ブラウザを縦に伸ばして見てください。<br>
        フッターエリアが常に下に表示されます。</p>
    </div><!--/idContents-->
    <div id="idFooterWrap"><p>フッターエリア</p></div>
</div><!--/idWrap-->

CSSでフッターをブラウザの下固定で表示するデモページ

実際の動作を確認するためのデモページを用意しています。以下のリンクからアクセスして、動作を確認してみてください。

CSSでフッターをブラウザの下固定で表示するデモ

注意点とアドバイス

Webデザインや開発において、さまざまなプラグインやライブラリが利用可能です。これらを活用することで、効率的に機能を実装することができます。しかし、プラグインを導入する前に、それが本当に必要かどうか、またその仕組みを理解しているかどうかを確認することが重要です。不要なプラグインを多用することは、ページの読み込み速度の低下や予期しないバグの原因となる可能性があるため、慎重に選択しましょう。

以上、CSSを利用してフッターエリアをブラウザの下部に固定する方法について解説しました。この方法を活用して、ユーザーフレンドリーなウェブページを制作することができます。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

フッター固定 footer
関連記事