【HTML&CSS】ヘッダーを画面上部に固定する方法！

こんにちはHTML&CSS初心者のhimakuroです

今回の記事ではヘッダーを画面上に固定する方法を書いて行きます。

PC画面はもちろん、スマホでサイトを見る場合でも同じ方法で実装が出来るので、是非活用してみてください。

今回作るもの

画像からは少し分かりづらいですが、ヘッダー部分がスクロールしても

画面上部に固定されるようにします。

前回の記事

前回はFlexboxを活用してカード風のリストを作成しました。

kuro-engineer-log.hatenablog.com

ランディングページ（LP）を作る際には必須と言っても良い内容なので

もしまだカードデザイン作るのが苦手だなと言う方は参考にしてみてください。

ヘッダーを作成する

ヘッダーには下記のコードを利用しました。

index.html

<header>
  <div class="header-content container">
    <div class="logo">Design</div>
  </div>
</header>

style.css

header {
    height: 80px;
    width: 100%;
    font-size: 18px;
    background-color: white;
    box-shadow: 0 1px 1px -1px rgba(0,0,0,0.6);
}

.header-content {
    padding: 10px;
}

.logo {
    font-size: 32px;
    font-weight: bold;
    margin-right: 40px;
}

今回の目的はヘッダーを作ることではないので解説は割愛します。

今後別の記事で詳しく書く予定です。

ヘッダーを固定する

ここからが本題ですが、今回の内容は2行付け足すだけで実装が可能です。

style.css

header {
    height: 80px;
    width: 100%;
    font-size: 18px;
    background-color: white;
    box-shadow: 0 1px 1px -1px rgba(0,0,0,0.6);
    position: sticky; // 追加
    top: 0; // 追加
}

position: sticky と top: 0 を指定することで 画面上部に固定されるヘッダーが実装出来ます。

position: fixed を使う場合もありますが、その場合は

一種の float 状態になってしまうので、高さをその分したに下げて上げないと

ヘッダーの下にある要素とかぶってしまうので注意が必要です。