CSSFlexboxを使用したWebサイトヘッダーの設計

2014年にHTMLとCSSの基礎を学んだ後、ウェブサイトの開発を始めたとき、私にとって最も困難で最も恐ろしいことは、ヘッダーを作成することでした。 Flexboxは当時まだかなり新しいものだったので、フロートポジショニングやクリアフィックステクニックなどの古いテクニックを使用する必要がありました。今日、フロントエンド開発の世界は完全に変わりました。つまり、Flexboxテクノロジーは幅広いブラウザーサポートを受けており、これにより多くの新しい可能性が開かれます。 今日では、ページレイアウトを開発するための最新のCSSテクノロジがあるため、サイトのヘッダー部分を作成する方が以前よりも簡単であると言う人もいるかもしれません。しかし、実際にはそうではありません。そして今日、ページレイアウトを設計するときは、困難で興味深い問題を解決する必要があります。この記事ではそれらのいくつかについて説明します。











つまり、ここでは、Flexboxレイアウトを使用してWebサイト用の高品質のヘッダーを作成する方法を示します。いくつかのヒントを共有し、最後に、この資料のために特別に作成された私のプロジェクトをデモンストレーションします。したがって、ここで取り上げることにしたトピックに本当に興味がある場合は、この記事を最後まで読んでください。



ここでは、Flexboxレイアウトの基本を知っていることを前提としています。ここに、念のため、CSSプロパティについて詳しく知りたい人のために書かれた私の記事がありますflex。

前書き

まず、あなたと私が「サイトヘッダー」または「サイトヘッダー」を同じものと呼んでいることを確認しましょう。サイトヘッダーは、ユーザーがサイトにアクセスしたときに最初に表示されるページ要素の1つです。通常、サイトのロゴまたは名前、およびナビゲーションリンクが含まれています。次の図を見てください。





サイトのロゴ、ナビゲーションリンク、ヘッダーパーツのコンテナ



サイトのヘッダーパーツのデザインに関係なく、その重要な要素はロゴとリンクのリストです。

Flexboxテクノロジーの実際

Flexboxテクノロジーを使用してサイトのヘッダーのレイアウトを作成すると、同じレベルのすべてのアイテムが1行に並べられます。次に残っているのは、プロパティを使用しjustify-contentて要素間に空き領域を分散することにより、要素を整列させることです。



マークアップコードは次のとおりです。

<header class="site-header">
  <a href="#" class="brand">Brand</a>
  <nav class="nav"></nav>
</header>

スタイルは次のとおりです。

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

まったく複雑ではありませんよね？まあ、そのような単純な見出しの場合はそうです。しかし実際には、物事ははるかに複雑になる可能性があります。

ページヘッダーコンテナ

前のセクションで説明したページヘッダーマークアップには、ロゴとナビゲーションリンクを表す要素を含む内部コンテナ要素が含まれていません。大画面では、このレイアウトを使用すると問題が発生する可能性があります。





内部コンテナ（上）とコンテナ（下）を使用せずに作成されたページヘッダーレイアウト



最初のページヘッダーは、作成時に内部コンテナが使用されていなかったため、幅が広すぎることに注意してください。しかし、2番目のレイアウトははるかに良く見えます。したがって、前の例のHTMLコードは次のように書き直す必要があります。

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
  </div>
</header>

そして、フレックススタイルを要素に適用する必要があります.site-header__wrapper：

.site-header__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

フレックスラッププロパティの使用

プロパティflex-wrapは一種のCSSセキュリティメカニズムです。画面サイズが小さい場合、ページのヘッダー部分を操作するために水平スクロールを使用しなければならない可能性があります。これはそれがどのように見えるかです。





ページタイトルを操作するには、水平スクロールを使用する必要があります。ここではflex-wrapプロパティは使用されていません。wrap



ご覧のとおり、このようなページを操作するのは不便です。だから、プロパティを忘れないでくださいflex-wrap！

ページヘッダーセクションのさまざまなレイアウトオプションの調査

Flexboxレイアウトで私が気に入っているのは、ページのヘッダーセクションのさまざまなデザインを簡単にサポートできることです。このセクションでは、上記の例に基づいて、ボタンや検索フィールドなどの新しい要素をレイアウトに追加することにより、レイアウトを拡張する可能性を探ります。すぐに、ページのヘッダーの子の表示順序を変更する方法を調べたいと思います。

▍バリアント番号1

ページのヘッダー部分の最初のバージョン



このレイアウトにボタンが追加され、ナビゲーションリンクのブロックの後に配置されました。どうやってするの？要素内に配置されたリンクとして設計する必要があり<nav>ますか？それとも、別の要素にする必要がありますか？私はそれをします。



これが私のアイデアのHTMLです：

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

この場合、プロパティを使用して要素間の距離を設定することはできませんjustify-content: space-between。代わりに、プロパティを使用してリンクのブロックを整列しますmargin-left: auto。これにより、リンクとボタンがコンテナの右側にプッシュされます。





margin-left：autoのおかげで、要素はコンテナの右側に押され



ます。ボタンをリンクブロックから分離することは、たとえば、ボタンを離れてリンクブロックをドロップダウンメニューとして表示する必要があるモバイルレイアウトに役立ちます。





デスクトップとモバイルのページヘッダー

▍オプション番号2

ページの見出し部分の2番目のバージョン



ここでは、検索フィールドを追加することにより、ページの見出し部分の機能を拡張しました。ページに他の要素を配置した後に残った空き領域を占有します。Flexboxレイアウトでは、これはプロパティを適用することで実現できますflex。



マークアップは次のとおりです。

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <div class="search"></div>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

検索ボックスに適用されるスタイルは次のとおりです。

.search {
  flex: 1;
}

それで全部です！これで、フィールドはロゴとリンクブロックの間の空のスペースを埋めます。ただし、このアプローチにはいくつかの制限があります。小さな画面では、ページのヘッダーは次のようになります。





小さな画面



のページヘッダー検索フィールドの幅は、特定のサイズ以上である必要があります。そうしないと、テキストを入力するのが難しくなります。以下は、この問題に対するいくつかの解決策です。





小さな画面で検索フィールドの幅を狭くすることによって引き起こされる問題を解決する



2番目のオプションを使用すると、リンクのブロックが早く隠されないため、2番目のオプションの方が好きです。一般的に、レイアウトの正しい表示に支障がない場合は、要素を非表示にしないように努めていると言えます。

▍オプション番号3

見出し部分の3番目のバージョン



これは、見出しの最初のバージョンと同じマークアップです。ただし、ここでは、画面に要素を表示する順序が変更されています。どうやってするの？ここでプロパティを使用することを決定できますorder。このアイデアを調べてみましょう。



HTMLは次のとおりです。

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

スタイルは次のとおりです。

.site-header {
  display: flex;
  justify-content: space-between;
}

.nav {
  order: -1;
}

そして、これはこれらすべてをレンダリングした結果がどのように見えるかです。





justify-content：space-betweenプロパティを使用しても、ロゴは中央に揃えられません。このプロパティは、要素間に空き領域を分配するだけです。



この問題の解決策は、各子要素をプロパティを使用してページのヘッダーに割り当てることflex: 1です。これにより、要素間にスペースが分散されます。



スタイルは次のとおりです。

.brand,
.nav,
.button {
  flex: 1;
}

ページの見出し部分の要素間の空き領域の均一な分布



しかし、ボタンで何か奇妙なことが起こりました。プロパティの適用により、flex: 1長すぎます。これを修正する唯一の方法は、ボタンをコンテナ要素に配置することです。

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <div class="button-wrapper">
      <a href="/track-shipment" class="button">Track</a>
    </div>
  </div>
</header>

このアプローチでは、ロゴとボタンの両方を中央揃えにすることができます。

.logo {
  text-align: center;
}

/*      .  -  ,    ,           . */
.button-wrapper {
  text-align: end; /* end - ,  LTR-,   ,   right */
}

要素の位置合わせただし



、このアプローチも理想的ではありません。ナビゲーションブロックにさらにリンクがあると、問題が発生することに注意してください。つまり、ここではナビゲーションブロックの幅が一定のサイズを超えないようにする必要があります。これは、ロゴの中央揃えが失われた例です。





ロゴが中央に配置されなくなりました。



ご覧のとおり、前の画像では、ロゴが中央に配置されていません。予期しない問題に直面しないように、上記のアプローチのこの機能について覚えておく価値があります。



Webサイトのヘッダーレイアウトのさまざまなデザインオプションを検討し、そのようなレイアウトを作成する方法について説明したので、ページヘッダーレイアウトの作成に役立ついくつかの重要なアイデアを見てみましょう。

Flexboxベースのページのヘッダーを設計するためのヒント

▍フレックスベースのプロパティ

flex-basis: 100%モバイルデバイスで要素を全幅にする必要がある場合は 、プロパティを使用することを好みます。たとえば、非表示にできないナビゲーションリンクの重要なブロックについて話している場合です。





flex-basisプロパティを適用した結果は100％



です。前の図を見ると、このプロパティを適用するのは簡単なことのように思えるかもしれません。実際には、そうではありません。通常、サイトのヘッダーにはパディングを含めることができます。要素を調整して幅全体を埋めると、パディングが重なるまでこれは発生しません。ただし、それらを削除すると、レイアウトの他の要素に影響するため、実用的ではありません。



この問題を修正する方法は次のとおりです。

1. flex: 1 0 100%ナビゲーションブロックに追加しましょう。
2. 必要に応じて、そのプロパティを変更しましょうorder。他の要素も処理する必要がある場合があるため、ナビゲーションボックスが最後の要素であることを確認する必要があります。
3. 内部マージンのサイズに等しい負の値を使用して、ナビゲーションブロックのマージンを調整してみましょう。これにより、このブロックがページの幅全体に表示されます。
4. 要素に少し「空気」が入るようにパディングを調整しましょう。
5. 最後に、プロパティjustify-content: centerを使用してナビゲーション要素を中央に配置します（ただし、これは特に重要ではありません）。

スタイルは次のとおりです（角括弧内は、関連する上記のリストの項目です）。

.nav {
  flex: 1 0 100%; /* [1] */
  order: 2; /* [2] */
  margin: 1rem -1rem -1rem -1rem; /* [3] */
  padding: 1rem; /* [4] */
  display: flex; /* [5] */
  justify-content: center; /* [5] */
}

上記のスタイルをナビゲーション要素のリストに段階的に適用すると、次のようになります。





要素のスタイリングを段階的に

▍要素間の距離を調整する

ChromeブラウザとFirefoxブラウザがこのプロパティをサポートするgapようになったため、フレックスアイテム間の間隔を非常に簡単に調整できます。ページの次のヘッダーセクションを見てください。





ギャッププロパティの使用



図で選択したアイテム間の距離を調整するには、親フレックスアイテムにプロパティを追加する必要がありますgap: 1rem。このプロパティを使用しない場合、要素のスタイルを同じようにする必要があります。

/*   */
.brand {
  margin-right: 1rem;
}

.sign-in {
  margin-right: 1rem;
}

/*   */
.site-header {
  /*  flexbox-*/
  gap: 1rem;
}

プロパティを使用するgap場合は、ページが表示されているブラウザでサポートされていない場合に備えて、準備とフォールバックが必要になることに注意してください。これについての詳細な記事を書きました。



これで会話は終わりですが、別れる前に、私のプロジェクトの1つを紹介します。

ヘッダー-cssプロジェクト

これは、headers-cssプロジェクト内で作成されるページヘッダーの例です。





headers-cssからのページのヘッダー



Webサイトのヘッダー部分のテンプレートを収集し、個別のページとして設計するプロジェクトを作成することにしました。これで、同様の要素が必要な場合は、すぐに見つけて新しいプロジェクトに統合できます。つまり、ページヘッダーの17のバリエーションを作成しました。近い将来、このプロジェクトを拡大する予定です。これらの要素に取り組んでいる間、私は次のことに特に注意を払いました。

• 柔軟性。
• 完全に応答性の高いデザイン。
• Sassを使用すると、テンプレートを簡単に編集できます（ただし、この領域では、コードを少しリファクタリングする必要があります）。
• アクセシビリティ（何か問題が発生した場合-プロジェクトタスクトラッカーにエントリを追加してください）。

これは、headers-cssプロジェクトの動作を確認するためのページです。そして、ここでは、プロジェクトのGitHubのリポジトリです。



Webページのヘッダー部分をどのように作成しますか？