どうも、ジャングルオーシャンのミケです。 今日はHTMLとCSSで簡単にできる スティッキーヘッダーを作っていこうと思うよ。 スティッキーヘッダーとは Webサイトは基本的に 縦の長さを固定で決めるという事はなくて コンテンツが多くなればなるほどスクロールする長さは多くなりがちなんだ。 その時に と考えることもあるはず! その願いを叶えてくれるのがスティッキーヘッダーというわけなんだ。 具体的なイメージは用意したサンプルデモページを見てね。 サンプル1のデモページはこちら もし、このページにあるサンプルコードを使ってもうまく実装できないという場合は、こちらの記事を確認してみてね! 固定させる方法 固定をさせるためには CSSのpositionを使うよ。 positionにも何種類かあって コンテンツを固定できるのはfixedとsticky。 ブラウザで表示している領域の1番上にheader