【CSS】headerを固定にする方法

CSS

今回はWEBサイトでよく使われる「固定headerの作り方」について紹介します。

【CSS】headerを固定にする方法

完成形はこちら。

下にスクロールしても、headerが固定されていることが分かるでしょう。

HTML

<!-- 固定header -->
<header class="header">
    <div class="header__title">
        <h1>タイトル</h1>
    </div>
    <div class="header__nav">
        <ul>
            <li><a href="">ナビメニュー</a></li>
            <li><a href="">ナビメニュー</a></li>
            <li><a href="">ナビメニュー</a></li>
        </ul>
    </div>
</header>

まずはheaderの雛形をHTMLで作ります。

CSS

.header {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  padding: 30px 10vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: burlywood;
}

headerを固定させるには、headerに対して「position: fixed;」を指定して固定にします。

そして「width: 100%;」を指定して、横幅を100%にします。

最後に「box-sizing: border-box;」で、headerが100%からはみ出ないようにしたらOKです!