人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. SVGでtext要素を上下左右中央寄せする

  8. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. ネストや親セレクタの参照など基本的な拡張機能について学ぼう

CSSでスクロールすると下からカーテンのように現れるフッター

ちょっとした工夫でフッターをおしゃれにできるテクニックの紹介です。かなり簡単に実装できるので、他サイトと差別化したいときなどに便利だと思います。

カーテンフッター

下までスクロールしていくと下層レイヤーからフッターが現れます。


<body>

<main class="main">
  メインコンテンツ
</main>
<footer class="footer">
  フッター
</footer>

</body>
</html>


.main {
  display: block;
  position: relative;
  margin-bottom: 200px;
  z-index: 2;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: 1;
}

フッターは fixed で常に画面最下部に固定しておき、.main 要素の下に隠しておきます。一番下までスクロールすると margin-bottom によってフッターが出現します。ここでは、フッターの高さは 200px と固定幅にしています。

フッターの高さが可変


.main {
  display: block;
  position: relative;
  margin-bottom: 200px;
  z-index: 2;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: 1;
}


$(function() {

$('.main').css('margin-bottom', parseInt($('.footer').outerHeight()));

});

フッターの高さが固定値なのはまずないので、JavaScriptでフッターの高さを取得し、その分 .main の margin-bottom に設定します。

CSS本執筆しました！！！