CSS (ヘッダー) を使用してプロフェッショナルなヘッダーを作成する方法についての簡単なチャット

魅力的な Web ページのヘッダーは、訪問者に良い第一印象を与えるために不可欠です。適切にデザインされたヘッダーは注目を集めるだけでなく、サイト全体の雰囲気を決定します。CSS を使用すると、モダンで視覚的に魅力的な Web ページ ヘッダーの作成がこれまでより簡単になります。

この記事では、CSS を使用して魅力的なヘッダー レイアウトを作成するのに役立つ基本的なヒントとヒントをいくつか紹介します。私たちはデザインにはあまり重点を置きませんが、レイアウトを作成し、作成中に直面する可能性のある困難を理解することに重点を置いています。

3 列ヘッダーの中央にスペースを配置することはできません

まず、3 列ヘッダーについて話しましょう。これは、間違って実装されていることが最もよく見られるヘッダーだからです。

マークアップは比較的単純です。

<header>
  <nav>
    <a href="/">ABC</a>

    <div>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">About us</a>
    </div>

    <div>
      <a href="#">Login</a>
    </div>
  </nav>
</header>

ヘッダーのナビゲーション タグ内のすべてのリンクを配置します。したがって、これは非常に単純なマークアップです。通常、ナビゲーションは最初の項目と最後の項目の間で中央揃えにする必要があります。

私の観察によれば、この問題は、「div のセンタリング」の問題と同様に、フロントエンド コミュニティで新たな問題となっています。多くの開発者はこの問題を解決するために justify-content 属性の space-between 値を使用しますが、実際には中央の要素が中央に配置されないからです。比較のために、justify-content 属性の space-between 値を使用した同じナビゲーション マークアップを次に示します。

この効果が生じる理由は、左側が右側よりも広いためです。中央の要素は左と右の要素の間で中央揃えになっていますが、ページのコンテキストでは、中央の要素は実際には中央に配置されていません。

ヘッダーを作成するときの最初の課題は、基本的なレイアウトを正しく理解することです。どのようなレイアウトをどのように実現したいのかがわかるまでは、これ以上追加しないでください。

次に進む前に、ProductHunt で数時間を費やして 3 列ヘッダーを探して評価しました。それらのほとんどは、私が示した justify-content プロパティを space-between に設定するというトリックを使用しています (したがって、ナビゲーションは実際には中央に配置されません)。この問題を回避しようとする人もいます (たとえば、マージンを追加するなど) が、絶対配置を諦める人もいます。もちろん、これらの「ハック」で問題を「解決」できますが、複雑さが増します。ヘッダーは保守できなくなり、再びヘッダーに戻ると嫌な気分になります。とはいえ、この「本当の解決策」も少々厄介です。

その方法は次のとおりです。

header > nav {
  display: flex;
}

header > nav > * {
  display: flex;
}

header > nav > :first-child,
header > nav > :last-child {
  flex: 1 1 0;
}

header > nav > :last-child {
  justify-content: flex-end;
}

結果は以下のようになります。

この解決策について話しましょう。

まず、私が使用しているセレクターが特殊すぎます。これは、ネスト関係を明確にするために行われます。

したがって、ヘッダーの下の各要素はフレックス コンテナーとなります。これも不要です。現在、これはナビゲーションの最後の子でのみ、その子を右に移動するために使用されます。

これで残るのは次のルールだけです: flex: 1 1 0; これがここでの主な関心事です。このルールを最初と最後の要素に適用します。これにより、拡大および縮小が可能になり、基本サイズが 0 ピクセルに設定されます。それがこの「ハック」のすべてです。基本サイズを 0 に設定しているため、それらは比例して拡大し、中央の要素が中央に配置されます。

もちろん、ヘッダー レイアウトを作成するときに直面した課題は、ヘッダーの中央の要素を中央に配置することだけではありませんでした。

小さい画面ではナビゲーション バーを非表示にする

justify-content プロパティの space-between 値を使用するのと同様に、上記のパターンを使用すると、レイアウトをそのまま維持しながら中間ナビゲーションを非表示にすることができます。中央の要素を非表示にすると、次のような効果が得られます。

もちろん、ログインをボタンに置​​き換えることは簡単です。それでは、別のことについて話しましょう。

ヘッダーが次のようになっているとします。

<header>
  <nav>
    <a href="/">ABC Company</a>

    <div class="desktop-navigation">
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">About us</a>
      <a href="#">Terms of Service</a>
    </div>

    <div class="action-navigation">
      <input type="search" aria-label="search" />
      <a href="#">Sign Up</a>
      <a href="#">Login</a>
    </div>
  </nav>
</header>

さて、ビューポートが小さくなると、ヘッダーに問題が生じます。

これにはメディア クエリを追加して、特定の要素をアイコンに置き換えたり、単純に検索を非表示にしたりできます。しかし、最新の CSS では別のソリューションも可能です。

たとえば、コンテナクエリを作成できます。更新されたコードサンプルは次のとおりです。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  color: #000;
  text-decoration: none;
}

header {
  padding: 1.5rem;
}

header > nav {
  display: flex;
}

header > nav > * {
  display: flex;
}

header > nav > :first-child,
header > nav > :last-child {
  flex: 1 1 0;
}

header > nav > :last-child {
  justify-content: flex-end;
}

header > nav > :last-child,
.desktop-navigation {
  gap: 1.5rem;
}

.action-navigation {
      container-type: inline-size;
      container-name: action-navigation;
    }

@container action-navigation (max-width: 400px) {
      input {
        display: none;
      }
    }

次の行を追加しました。

.action-navigation {
  container-type: inline-size;
  container-name: action-navigation;
}

@container action-navigation (max-width: 400px) {
  input {
    display: none;
  }
}

もちろん、メディア クエリでもこれを実行できると主張するかもしれません。特にない。ただし、コンテナ クエリの利点は、コンテナの最小幅を指定できることです。ビューポートの大きさは気にしませんが、コンテナの幅が 400 ピクセル未満の場合、非常に見苦しくなることがわかっています。これは、広くサポートされることを本当に楽しみにしている機能の 1 つです。

スティッキートップナビゲーションバー

スティッキーの方がより良い解決策であるにもかかわらず、上部のナビゲーション バーを実装するためにposition:fixedを使用している人がまだいます。

なぜ粘着性の方が良いのでしょうか？次のコードを考えてみましょう。

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  header {
    padding: 1.5rem;
    width: 100%;
    position: fixed;
  }

  header > nav {
    display: flex;
  }

  header > nav > * {
    display: flex;
  }

  header > nav > :first-child,
  header > nav > :last-child {
    flex: 1 1 0;
  }

  header > nav > :last-child {
    justify-content: flex-end;
  }

  .desktop-navigation {
    gap: 1.5rem;
  }
</style>

<header>
  <nav>
    <a href="/">ABC Company</a>

    <div class="desktop-navigation">
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">About us</a>
    </div>

    <div class="action-navigation">
      <a href="#">Login</a>
    </div>
  </nav>
</header>

<main>
  Some content
</main>

この場合、ヘッダーの位置は固定です。その結果、ドキュメント内にヘッダー用のスペースが確保されていないため、メイン コンテンツ領域がサイトの上部に移動します。流れから外れています。

この場合の回避策は、margin-top を使用してメイン コンテンツ領域をオフセットし、ヘッダーの下に移動することです。新しいサイトでも、この回避策はよく見かけることになるでしょう。問題は、スティッキーなプロパティが常に存在するとは限らないことです。比較的新しい物件です。そのため、スティッキーではなく、position:fixed を使用したチュートリアルが今でもいくつか見つかります。しかし、スティッキーを使用すると、マージントップのオフセットは必要ありません。ヘッダー要素は、ドキュメント内にあるかのようにスペースを占有します。

以下は、position: Sticky を使用した更新されたコード例です。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  color: #000;
  text-decoration: none;
}

header {
  padding: 1.5rem;
  position: sticky;
  top: 0;
}

header > nav {
  display: flex;
}

header > nav > * {
  display: flex;
}

header > nav > :first-child,
header > nav > :last-child {
  flex: 1 1 0;
}

header > nav > :last-child {
  justify-content: flex-end;
}

.desktop-navigation {
  gap: 1.5rem;
}

ご覧のとおり、このアプローチははるかに簡単です。コンテンツに対して任意のオフセットを設定する必要はありません。

それです、友達！読んでいただきありがとうございます！

終了

ヘッダー レイアウトに関するその他のよくある間違いをご存知ですか? それとも他に挑戦的な要素があることをご存知ですか？コメントでさらに詳しく知りたいです！

記事のスペースが限られているため、今日の内容はここで共有します。記事の最後に、記事の作成は簡単ではないことを思い出していただきたいと思います。私の共有が気に入っていただけましたら、忘れないでください。 「いいね！」を押して転送して、より多くの人が困っているようにしてください。同時に、フロントエンドテクノロジーについてさらに知識を深めたい場合は、私をフォローすることを歓迎します。あなたのサポートが私が共有する最大の動機になります。今後もより多くのコンテンツを出力していきますので、ご期待ください。