概要

ウェブサイトを作る上で欠かせないメニューですが、上部に固定する時に思いの外てこずったので、改めて調べたことをまとめて残しておきたいと思います。

これまで上部固定はposition: fixed;が多く使われていましたが、CSS3でより使い勝手の良いposition: sticky;が登場し、ブラウザ対応状況もだいぶ良くなってきたようなので、今回は後者で挑みます。
できるだけシンプルに実装したつもりです。誰かのお役に立ちますように。

キーワード
position: sticky; display: flex;

サンプル

See the Pen ヘッダーメニューを上部に固定 by Tamamotch (@tamamotch) on CodePen.

解説

前処理

* {
  margin: 0;
  padding: 0;
}

デフォルトCSSの関係であちこちに隙間ができてしまうので上書きする。
指定した覚えのない謎の隙間がある場合はデフォルトCSSを疑うべし。

header

header {
  position: sticky;
  top: 0;
  z-index: 100;
}

position: sticky;
header要素をスティッキーアイテムにする。
自動的に親要素であるbody要素がスティッキーコンテナになる。
これにより、header要素が貼り付く。
なお、スティッキーコンテナ内に兄弟要素がないときちんと貼り付かない仕様とのことなので、兄弟要素mainも用意する。
試しにmain要素を丸っと削除すると、スクロールと共にheader要素が流れていってしまうのが分かる。

top: 0;
貼り付く場所を最上部に固定する。

z-index: 100;
スクロールした時に全要素の上に重なるよう、適当な大きさを指定しておく。

ul

.ul-menu {
  display: flex;
  list-style-type: none;
  text-align: center;
}

display: flex;
ul要素をflexコンテナにし、子要素liをflexアイテムにする。
これにより、子要素liが横並びになる。

list-style-type: none;
リストのマーカーを削除する。

text-align: center;
テキストを左右中央寄せにする。

li

.li-menu {
  flex: 1;
}

flex: 1;
flexアイテムであるli要素の横幅を均等にする。
試しにこれを削除すると、li要素の横幅がそれぞれのテキスト幅になるのが分かる。

a

a {
  display: block;
  text-decoration: none;
  padding: 10px 0 10px 0;
}

.a-1 { background-color: pink; }
.a-2 { background-color: moccasin; }
.a-3 { background-color: lightblue; }

display: block;
表示形式をblockにする。
これにより、a要素のクリック範囲が親要素liのサイズと同じになる。

text-decoration: none;
見栄えのために、テキストの装飾（リンクの下線）を行わない。

padding: 10px 0 10px 0;
見栄えのために、上下に10px太らせる。

background-color: xxx;
分かりやすいように各範囲に色を付けておく。

main

main {
  height: 500px;
}

height: 500px;
ある程度スクロールできるよう、高さを持たせておく。

応用

応用技として、CSSでヘッダーメニューを上部に固定する方法（多階層メニュー）も公開しました。
サブメニューも持たせたい人はこちらも覗いてみてください。