Webサイトで使えるヘッダーデザインを作っていく

はじめに

今回は、各Webサイトを参考にヘッダーデザインを作っていきます。ここでは、よく使われる表現＆デザインの仕組みについてそれぞれ解説していきます。

ホバーすると左から下線が現れるヘッダー

See the Pen Untitled by Uka Suzuki (@uukasuzuki_) on CodePen.

CSS3のコード解説

/* ヘッダー */
.list-items {
  display: flex;
  padding: 0;
  margin: 0;
}

.list-item {
  display: inline-block;
  position: relative;
  margin-right: 20px;
}

.list-item a {
  display: block;
  padding: 1.5rem 1rem;
}

.list-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: black;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.list-item a:hover::after {
  transform: scaleX(1);
}

• 今回の下線アニメーションは、::after擬似要素を使って下線部分を作成します。transform: scaleX(0)で初期状態では下線が見えないようにし、ホバー時にtransform: scaleX(1)にすることで下線が伸びるアニメーションを実現しています。

ホバーすると真ん中から下線が飛び出すヘッダー

See the Pen Untitled by Uka Suzuki (@uukasuzuki_) on CodePen.

CSS3のコード解説

/* ヘッダー */
.pc-nav {
  display: block;
}

.list-items {
  display: flex;
  padding: 0;
  margin: 0;
}

.list-item {
  display: inline-block;
  position: relative;
  margin-right: 20px;
}

.list-item a {
  display: block;
  padding: 1.5rem 1rem;
}

.list-item a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: black;
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: center;
}

.list-item a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

• left: 50%とtransform: translateX(-50%)を使って、下線をリンクの中央に配置します。加えて、scaleX(0)で初期状態を設定し、ホバー時にscaleX(1)に変更することで、下線が真ん中から左右に飛び出すアニメーションを実現しています。

お問い合わせボタン付きヘッダー

See the Pen お問い合わせボタン付きヘッダー by Uka Suzuki (@uukasuzuki_) on CodePen.

背景色付きヘッダー

See the Pen Untitled by Uka Suzuki (@uukasuzuki_) on CodePen.

ロゴが中央にあるヘッダー

See the Pen ロゴが中央にあるヘッダー by Uka Suzuki (@uukasuzuki_) on CodePen.

上にロゴ、下にメニューがあるヘッダー

See the Pen 上にロゴ、下にメニューがあるヘッダー by Uka Suzuki (@uukasuzuki_) on CodePen.

まとめ

今回は、HTMLCSSでヘッダーデザインを考えました。基本は、flex boxで枠組みを作って横並びにする知識があれば今後も応用できるのではと思います。

上記にプラスして、CSSの::activeなどの疑似要素を使いこなせるようになるとSEOの観点から見ても、まとまったコードが書けると思います。