CSS GridとFlexboxでヘッダーを作成する

programming
DMM WEBCAMP

こんにちは、フローです。

Webデザインの世界へようこそ！

今日はCSS GridとFlexboxを使用して、

レスポンシブなヘッダーを作成する方法を学びます。

初心者の方でも理解できるように、丁寧に説明していきます。

HTMLの準備

ヘッダーのHTMLは以下のようになります。

<div class="header">
  <nav class="nav">
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">私たちについて</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</div>

CSSの適用

次にCSSを用いてスタイリングを施します。

まずヘッダーエリアに対して背景色を設定し、

Flexboxのプロパティを使ってナビゲーションメニューを配置します。

.header {
  grid-area: header;
  background-color: #FFB448;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
}

この段階では

justify-content: flex-start;

と指定することで、アイテムを左寄せにしています。

ナビゲーションメニューのスタイリング

次に、ナビゲーションメニュー(nav ul)に対して、

フレックスボックスを利用し、メニュー間のスペースを調整します。

.nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  width: 60%;
  padding: 0;
}

.nav li {
  margin-right: 40px;
}

.nav a {
  color: white;
  text-decoration: none;
}

.nav a:hover {
  color: #056676;
}

上記のスタイルでは、

justify-content: flex-start;

と設定してアイテムを左寄せにし、

各リストアイテム(li)の右側にマージンを設けて間隔を広げています。

レスポンシブデザインの考慮

上記のスタイルは基本的なものですが、

これだけではスクリーンサイズが小さいデバイスでは適切に表示されません。

そのため、メディアクエリを用いてレスポンシブデザインを考慮します。

@media (max-width: 600px) {
  .nav ul {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .nav li {
    margin: 10px;
  }
}

まとめ

これでヘッダー部分のデザインは完成しました。

HTMLとCSSを駆使し、

FlexboxとCSS Gridを使ってレスポンシブなヘッダーを作成することができました。

この記事では、主に以下のポイントを学びました

  • HTMLでナビゲーションメニューを定義する方法
  • CSSでヘッダーに背景色を設定し、Flexboxを用いてコンテンツを整列する方法
  • メニューの間隔を設定する方法
  • メディアクエリを用いてレスポンシブデザインを実現する方法

次回はこのヘッダー部分と同じテクニックを利用して、

サイドバーやメインコンテンツ、フッター等のレイアウトを作成する方法を紹介します。

これらの技術をマスターすれば、

CSS GridとFlexboxを駆使して、

見た目が美しいウェブサイトを自由自在にデザインできるようになるでしょう。

今回のブログで学んだことを活かして、

自分だけのウェブサイトを作成してみてください。

それでは、次回のブログでお会いしましょう！

レッツチャレンジ！