MENU
  1. ホーム
  2. Gallery
  3. ヘッダー01

ヘッダー01

Gallery
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

拡張性の高いコンポーネント設計：BEMによる基本要素（Element）とバリエーション（Modifier）の切り分け

ポイント: 通常のテキストリンクと、強調したい2つのボタン（資料請求・お問い合わせ）のベーススタイルを .header-item で共通化。デザインが異なる部分だけを --download などのマルチクラス（Modifier：変更子）として定義し、コードの重複を最小限に抑えています。

<li class="header-item"><a href="">選ばれる理由</a></li>
<!-- 基本の形に、それぞれの個性を表すクラスを掛け合わせる -->
<li class="header-item header-item--download"><a href="">資料請求</a></li>
<li class="header-item header-item--contact"><a href="">お問い合わせ</a></li>

/* すべてのナビゲーション要素で共通する文字サイズや太さを定義 */
.header-item {
  font-size: 16px;
  line-height: 1.6;
  font-weight: bold;
  margin-left: 24px;
}

/* ボタンタイプだけに共通する「角丸」や「内側の余白」を一元管理 */
.header-item--download,
.header-item--contact {
  border-radius: 10px;
  padding: 10px 24px;
}

解説: 文字サイズやフォントの太さといったコアな情報を .header-item に集約。ボタン化するために必要な角丸（border-radius）や内側余白（padding）を2つのボタンクラスでグループ共有した上で、最終的な背景色や文字色だけをそれぞれの固有クラス（--download / --contact）で個別に制御しています。

視覚的メリハリの実現：Flexbox配下におけるネスト（入れ子）マージンの微細なコントロール

ポイント: 通常のメニュー間隔は margin-left: 24px; で等間隔に保ちつつ、ボタンエリアの始まりは margin-left: 32px; で広めに確保。さらに隣り合うボタン同士の間隔は margin-left: 8px; と狭めることで、ユーザーの視線誘導をコントロールするメリハリのあるレイアウトを構築しています。

.header-item {
  margin-left: 24px; /* 基本は左側に24pxの隙間を作る */
}

.header-item--download {
  margin-left: 32px; /* 👑 通常メニューとボタンエリアの境界線を明確にするため、少し広げる */
}

.header-item--contact {
  margin-left: 8px;  /* 👑 2つのボタン同士は「1つのグループ」に見せるため、あえて狭める */
}

解説: すべてのナビゲーション項目を「完全に均等」に並べてしまうと、どの情報が重要なのかが視覚的に伝わりにくくなります。
ここでは、横並びを司る display: flex; の配下で、それぞれの要素に意図的なマージンを上書き適用しています。通常のメニュー群と「資料請求」ボタンの間に32pxのゆとりを持たせることで、「ここから重要なアクションエリアである」という境界をユーザーに直感させます。一方で、最後の「お問い合わせ」ボタンは8pxというタイトな距離感で配置し、2つのボタンが連動した強力な行動喚起（CTA）ゾーンとして機能するようにしています。

セマンティックなレイアウト制御：Space-Betweenによる確実な両端配置と画像歪み防止

ポイント: ヘッダー全体を display: flex; と justify-content: space-between; で制御し、左端のロゴと右端のナビゲーションを自動的に綺麗に両端へと振り分けています。また、ロゴ画像を格納する親要素（.header-logo）に display: flex; を当てることで、画像の上下の意図しない隙間やバグを排除しています。

.header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ロゴとナビゲーションを完全に両端へ寄せる */
}

.header-logo {
  width: 64px;
  display: flex; /* ✨ ロゴ画像が持つ特有のインライン隙間バグを未然に防ぐ */
}

解説: Webサイトの顔であるヘッダーにおいて、ロゴとメニューの距離感を固定値（padding 等）で制御しようとすると、画面幅が変わった際に表示が崩れる原因になります。space-between を使用することで、ブラウザが現在の横幅を自動的に計算し、常に画面の両端へと綺麗に引き離してくれます。
さらに、ロゴのラッパーである .header-logo に display: flex; を指定しているのも隠れた工夫です。HTMLの <img> タグはデフォルトでインライン要素として扱われるため、文字のベースラインに引っ張られて、画像の直下にほんの数ピクセルの「謎の余白」が生まれてしまう仕様があります。これを、親要素をブロック化（Flexコンテナ化）することで完全に無効化し、Figmaの数値と同様の高さ（height: 19px）をキープさせています。

Gallery
目次