HTMLとCSSで作成するシンプルなヘッダーデザインをサンプル付きで解説

こんにちは、すずです(^ω^)
今回紹介するのは、タイトルとメニューが横並びのシンプルなヘッダーデザインです。

サンプルコードがありますので、コピペで実装可能です。

では、早速参りましょう!

HTMLとCSSで作成するシンプルなヘッダーデザインをサンプル付きで解説

今回作成するヘッダーイメージ

今回作成するヘッダーのイメージです。
よく使われているデザインで、汎用性も高いです。

サンプルコード

See the Pen Untitled by Suzu (@suzu__engineer) on CodePen.

コード全体

HTML

<header class="header">
  <h1 class="company-name">
    <a href="/">株式会社Sample</a>
  </h1>
  <nav class="nav">
    <ul>
      <li class="nav__item"><a href="#">About</a></li>
      <li class="nav__item"><a href="#">Service</a></li>
      <li class="nav__item"><a href="#">Company</a></li>
      <li class="nav__item"><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

CSS

* {
  box-sizing: border-box;
}


body {
  margin: 0;
  padding: 0;
  background: #e6e6e6;
}


ul {
  list-style: none;
  margin: 0;
  display: flex;
}


a {
  text-decoration: none;
  color: #4b4b4b;
}


.header {
  width: 100%;
  padding: 30px 4% 10px;
  background: #fff;
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
}


.company-name {
  margin: 0;
  padding: 0;
  font-size: 20px;
}


.nav {
  margin: 0 0 0 auto;
}


.nav__item {
  margin: 0 0 0 15px;
  font-size: 14px;
}

コーディングポイント

nav要素の左マージンを「auto」にし、ナビを右側に配置する

.nav {
  margin: 0 0 0 auto;
}

上記のように、nav要素の左マージンに「auto」を指定することで、ナビの左側に余白ができ、nav要素を右端に配置することができます。

横並びは「flexbox」を使用する

サイト名とナビを横並びにする、ナビの項目を横並びにするのに、display: flexを使用します。