優良な企業のHPによくみられるヘッダーのテンプレート
今回ご紹介するテンプレの内容、特徴。
- ヘッダーがposition:fixed；で固定されている。
- 企業様の名前やロゴ、ナビメニューが両端に表示されている。
- ナビメニューに触れた時アクションが起こる。
主にこのような特徴があると思います。思い当たる節はございませんか？
上記のような構成のコードを紹介いたします。
HTML
<header>
<img src="images/dualslogo.png" alt="logo" class="dualslogo">
<ul>
<li>HOME</li>
<li>WORKS</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</header>
CSS
header {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
}
ul {
display: flex;
list-style: none;
}
li {
color: white;
transition: all 0.3s;
cursor: pointer;
//padding,marginなどの調節
}
li:hover {
色が変わったりすると良いかもしれません。
}
＊個人的な意見ですが全体的にパステルカラーを使うと綺麗に見えます。
