今回は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です！
