どうも7noteです。よく見かける上部に固定されているヘッダーをHTMLとCSSだけで作る方法を解説。

まずは実際に固定ヘッダーを使っているサイトを紹介。

こんな感じで上部に固定されているヘッダーを作っていきます。

position:fixed;で固定できる

今回のヘッダーにはposition: fixed;を使うのですが、position: fixed;について簡単に説明しておきます。
まずpositionには主に以下の4種類があります。

static （初期値）
relative （相対指定）
absolute （絶対指定 -relative基準-）
fixed （絶対指定 -ウィンドウ基準-）

positionは位置関係を指定するプロパティなのですが、fixedはウィンドウを基準とした絶対位置になります。
絶対位置は左から、上からなどの位置を指定できるので、たとえば左上から0pxの位置から幅いっぱいの要素を配置すると、スクロールしても上部に固定されたヘッダーが作れます。
実際に作ってみましょう。

上部固定ヘッダーの作り方

index.html

<header>
    <h1>WEB-STUDIO</h1>
    <nav class="gnav">
        <ul class="menu">
            <li><a href="">○○について</a></li>
            <li><a href="">仕事</a></li>
            <li><a href="">採用</a></li>
            <li><a href="">お知らせ</a></li>
            <li><a href="">お問い合わせ</a></li>
        </ul>
    </nav>
</header>

<main>
    <p>こんにちは！</p>
</main>

style.css

body {
    padding-top: 90px; /* ヘッダーの後ろに要素が隠れないようにするため */
}

header {
    width: 100%; /* 幅いっぱいを指定 */
    height: 50px; /* 高さを50pxに指定 */
    background: #CCC; /* 背景色にグレーを指定 */
    padding: 20px 50px; /* ヘッダーに上下左右それぞれ余白を指定 */
    box-sizing: border-box; /* padding分を含んで幅を100%にするため */
    position: fixed; /* ウィンドウを基準に画面に固定 */
    top: 0; /* 上下の固定位置を上から0pxにする */
    left: 0; /* 左右の固定位置を左から0pxにする */
    display: flex; /* 中の要素を横並びにする */
    align-items: center; /* 中の要素を上下中央に並べる */
}

header .gnav .menu {
    display: flex; /* 中の要素を横並びにする */
}

header .gnav .menu li {
    list-style: none; /* リストの[・]を消す */
}

header .gnav .menu li + li {
    margin-left: 40px; /* メニューそれぞれに間隔をあけるため */
}

main {
    height: 100vw; /* スクロールの演出を見れるようにmainに高さを指定 */
}

簡単に解説

headerに高さ90px(heightの50px + paddingの20px)があるので、予めbodyの上にpadding90pxを取ります。
これがないとヘッダーの後ろに他の要素が隠れてしまうので、忘れずにcssを指定します。

そしてheaderにposition: fixed;を指定して、leftとtopに0を指定することでウィンドウの左上を基準として固定されます。
これでページをスクロールしても常に上部にヘッダーが固定されます。
他のcssは見た目を調整するために入れただけのものなので解説は省きます。

まとめ

HTMLとCSSだけで簡単に上部固定ヘッダーを作りました。
たとえばスクロールしたらヘッダーの形が変わるとか、別のヘッダーが出てくるなどはjavascriptを使う必要があるので、もっといろいろやりたい！という方はjavascriptの基礎を数日～数週間勉強して、サンプルのヘッダーを参考に作ってみるといいかもしれません。