[CSSコピペ] Sticky Footer、ヘッダー固定、フッター固定を最も簡単に実装する方法。

初心者でもコピー＆ペーストで実装できるpure cssサンプル。スティッキーフッター、スクロール追従コンテナの実践ソースコード。

サイトのデザインや機能において、ヘッダーメニューを追従させたり、フッターを固定して広告やリンクを常に表示させたいケースは多いかと思います。また、スティッキーフッター(Sticky Footer)と呼ばれる、下部に張り付くタイプのフッターも実装されることが多いでしょう。

実装方法はたくさんありますが「position: sticky;」「position: fixed;」を利用するのが最も簡単に実装できます。

 

本記事ではサイト制作で頻繁に実装する以下について、実践的なソースコードで解説いたします。

  • スティッキーフッター(Sticky Footer)
  • 固定フッター(スクロール追従)
  • 固定ヘッダー(スクロール追従)

 

スティッキーフッター(Sticky Footer)＋固定ヘッダー(スクロール追従)のCSS/HTMLサンプルソースコード。コピペ可。

早速、ソースコードを掲載します。コピペしてご利用ください。

CSSソースコード　※ダブルクリックでコピペできます

.container { 
  height: 500px;
}

.header {
  background-color: lightyellow;
  opacity: 0.8;
  position: sticky;
  top: 0vh;
}

.footer {
  background-color: lavender;
  opacity: 0.8;
  position: sticky;
  top: 100vh;
}

 

HTMLソースコード　※ダブルクリックでコピペできます

<div class='container'>
  <div class='header'>
    <p>これはヘッダーです</p>
    <p>これはヘッダーです</p>
  </div>
  <div>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
  </div>
  <div class='footer'>
    <p>これはフッターです</p>
    <p>これはフッターです</p>
  </div>
</div>

 

実行結果

See the Pen
position: stickyの検証① by KodoCode (@KodoCode)
on CodePen.

固定フッター(スクロール追従)＋固定ヘッダー(スクロール追従)のCSS/HTMLサンプルソースコード。コピペ可。

次に固定フッター(スクロール追従)＋固定ヘッダー(スクロール追従)のサンプルを掲載します。固定ヘッダーについては前項と同じとなります。

CSSソースコード　※ダブルクリックでコピペできます

.container { 
  height: 400px;
}

.header {
  background-color: lightyellow;
  opacity: 0.8;
  position: sticky;
  top: 0vh;
}

.footer {
  background-color: lavender;
  opacity: 0.8;
  position: fixed;
  bottom: 0vh;
  width: 99%;
}

 

HTMLソースコード　※ダブルクリックでコピペできます

<div class='container'>
  <div class='header'>
    <p>これはヘッダーです</p>
    <p>これはヘッダーです</p>
  </div>
  <div>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
   <p>ここはコンテンツ部です</p>
  </div>
  <div class='footer'>
    <p>これはフッターです</p>
    <p>これはフッターです</p>
  </div>
</div>

 

実行結果

See the Pen
position: stickyの検証③ by KodoCode (@KodoCode)
on CodePen.

 

フッター固定については、「position: fixed;」「bottom: 0vh;」「width: 99%;」を設定しています。

サンプルを動かしてみるとわかるかと思いますが、スクロール位置に関わらずフッターが画面下に固定されていることがわかるかと思います。

「スティッキーフッターと固定フッターの違いがわかりにくい」という方もいるかと思いますので、本記事のサンプルを参考に理解していただければと思います。

 

なお、フッターが完全固定されているのに対して、「position: sticky;」を使ったヘッダー固定はスクロール時に微妙にヘッダーが動く挙動となります。これが気になる方は、フッターと同じように「position: fixed;」「top: 0vh;」「width: 99%;」とfixedを利用すれば、カッチリと完全固定されたヘッダー固定となります。

お好みに合わせて使い分けてみてください。

See the Pen
CodePen Home position: stickyの検証④ by KodoCode (@KodoCode)
on CodePen.

 

以上となります。

 

2022年8月28日DesignCSS,初心者向け

Posted by KodoCode