優良HPによくあるヘッダーのテンプレート

優良な企業の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 {
  色が変わったりすると良いかもしれません。
  }

＊個人的な意見ですが全体的にパステルカラーを使うと綺麗に見えます。