画面の下にそっと寄り添うフッター

yasuko

担当は黄色です

ページの一番下にあるフッターとは別に、

画面を下にスクロールしても上にスクロールしても、

常に画面の一番下に寄り添ってくれるフッターが必要なことありますよね。

寄り添うフッターつくってみよう

html の footer要素の上に 常に画面の下に表示させたい要素を書きます。

<div class="footer_area">
 　<div class="btn_hoge">
 　　<p><a href="#">ここにいるよ</a></p>
 　</div>
 </div>
 <footer> ・・・ </footer>

.footer_area {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 background-color: rgba( 0, 0, 0, 0.1 );
 z-index: 10000;
 } 
.footer_area .btn_hoge{
 max-width: xxxpx;
 width: xx%;
 margin: 0 auto;
 }

なにをやったの？？

• position: fixed;で、.footer_areaの位置を固定。
• bottom: 0; left: 0;で、固定する位置を指定。下側に固定ということですね。
• width: 100%;で、固定した.footer_areaの幅を指定。
• background-color: rgba( 0, 0, 0, 0.1 );で、固定した.footer_areaの背景の色を指定。透過させない時はカラーコードで指定してもOK！
• z-index: 10000;で、なにがなんでも一番手前に表示させたい意思表示。
• .btn_hogeの中身（画像・テキスト）に合わせてサイズ（ max-width: と width:）をよきにして・・・
• margin: 0 auto;で、真ん中に寄せつつ、上下の隙間を調整したりしてよきに・・・

フッターを一番下に固定する時にも使えるし、

ヘッダーを一番上に固定する時にも使えます。