表示デモ
実装コード
HTML
<header class="demo-header">
<a href="#top" class="site-logo">
<img src="https://design-parts.about-nagasaki.com/img/aoi-no-mon.png" alt="ロゴサンプル">
</a>
<nav>
<ul>
<li><a href="#cate01">Menu01</a></li>
<li><a href="#cate01">Menu02</a></li>
</ul>
</nav>
</header>
CSS
@charset "utf-8";
/* サイト共通設定 */
:root {
--primary-text-color: #2A3140;
}
html {
font-size: 62.5%;
}
/* ヘッダー共通設定 */
.demo-header {
width: 100%;
padding: 6px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid var(--primary-border-color);
position: fixed;
top: 0;
left: 0;
}
a.site-logo img {
max-width: 38px;
height: auto;
}
.demo-header nav ul {
display: flex;
gap: 10px;
}
ポイント
ロゴとメニューが両端に配置される、定番のヘッダー。
SP版ではハンバーガーメニューを開くと、項目が中央に配置される形。