>プログラミング【CSS】position:sticky;で簡単固定!スティッキーヘッダー6選2022-01-12どうも、ジャングルオーシャンのミケです。今日はHTMLとCSSで簡単にできるスティッキーヘッダーを作っていこうと思うよ。スティッキーヘッダーとはWebサイトは基本的に縦の長さを固定で決めるという事はなくてコンテンツが多くなればなるほどスクロールする長さは多くなりがちなんだ。その時に「ヘッダーにナビゲーションの要素がつまっていて、サイト内の回遊を促すためにもずっとユーザーの目に触れるところに置いておきたい!」と考えることもあるはず!その願いを叶えてくれるのがスティッキーヘッダーというわけなんだ。具体的なイメージは用意したサンプルデモページを見てね。固定をさせるためにはCSSのpositionを使うよ。positionにも何種類かあってコンテンツを固定できるのはfixedとsticky。0;/*ブラウザの上からの距離はゼロ*/}こういう書き方になるよ。topというのは1番上からの距離を表しているから0をつけると1番上からの距離がゼロの位置に配置するという事になる。いうことは、position:sticky;と合わせると「1番上に固定する」という意味の記述になるよ。隙間をあけたければ0になっている所を10pxにすれば10pxの隙間ができるよ。fixedの場合、ページが読み込まれた段階で固定されてしまうからスクロールによって、任意の場所で固定したい場合はJavaScriptと組み合わせて使うんだ。CSS3でstickyが出た事によってJavaScriptを使わなくても追尾するコンテンツが簡単に作れるようになったんだ。今回は、HTMLとCSSだけで簡単に実装できるstickyを使ったサンプルを用意したよ。useで確認する画像は記事作成時点のものになります。結果を見てもらったらわかると思うけどstickyは対応していたりしていなかったりするブラウザがあるんだ。さっきのサンプルでも書いたけど、Safari用にベンダープレフィックス-webkit-は必要だからね。あと、IEの対応をしていないのでこの点は注意してね!MicrosoftがIEよりEdgeの使用を推奨しているから今後はIEの対応も気にしなくてよくなりそうだけどね。Explorerの今後についてそのことも踏まえてstickyを使うか使わないか今の状況も合わせて決めてね。0;}サンプル1のデモページを見るさっき例で示したCSSと同じ記述だよ。0;}サンプル2のデモページを見るフッターを固定する場合はtopをbottomに変更するとコンテンツをブラウザの1番下からの距離をゼロにするという事になるから、ブラウザの下に固定される事になるよ。#F57F17);}サンプル3のデモページを見る.mainと.sideをdivタグで囲んで、.sideをstickyで固定させているよ。center;}サンプル4のデモページを見る横幅は1000pxに設定して固定させているよ。center;}サンプル5のデモページを見るブラウザの横幅に合わせて可変するナビゲーションだよ。touch;}}サンプル6のデモページを見るブラウザの横幅が767px以下になるとナビゲーションが横スクロールできるようにoverflow-xで設定しているよ。こちらもレスポンシブデザインで使えるね!最後にこれでスティッキーヘッダーの説明は終わりだよ。stickyはたった3行で簡単に実装できるから便利だよね!もし、実装できないとか、おかしいコードとかあれば連絡待ってるよ!それじゃ、また今度ね!TwitterSharePocketHatenaLINEコピーするこの記事を書いた人michelangeloオレンジアフロがチャームポイントゴリラです。Webが楽しくて記事書いてます。スティッキーヘッダーauthor関連記事プログラミング【コピペOK】jQueryのアコーディオンメニュー実装サンプル10選!jQueryで簡単に実装できるアコーディオンメニューのご紹介です。コピペで簡単に実装できるサンプルデモも10種ご用意しましたので、どうぞご活用ください。プログラミング【コピペOK】ユーザビリティを高めるHTML・CSSフォーム基本テク!ユーザビリティを向上させるためのフォーム専用の属性や便利なCSSの設定が色々あるんですよ!今回はフォームのHTML・CSS基本テクニックをご紹介します!プログラミングプログラミング入門者に「Ruby」をオススメしたい3つの理由【Rails】プログラミング学習に興味があってもなかなか手を出せずにいる方は多いのではないでしょうか?そんな方にオススメしたいのが「Ruby」というプログラミング言語です!プログラミング【CSS】ツールチップをHTMLとCSSだけで簡単に作る補足説明をする時などによく使われるツールチップをHTMLとCSSのみで作ってみました。デザインに取り入れてみてください。ジャングルオーシャンのレオナルドです。WEBに属するグロースハッカーを目指す内気なゴリラーデス。ジャングルオーシャン。