Grid を使おう！

ケース1 Gridでグローバルメニューを作るぞ

1. はじめに

こんにちは！今回は、HTMLとCSSを使ってウェブページをデザインする上で非常に役立つ「CSS Grid」の基礎を学びます。CSS Gridは、ウェブページのレイアウトを柔軟かつ効率的に作成できる強力なツールです。

このブログでは、具体的な例として「グローバルメニュー」を作成しながら、CSS Gridの基本的な使い方を学びます。

グローバルメニューは、ウェブサイト全体を通じて一貫したナビゲーションを提供する重要な要素ですが、それを作成する過程でCSS Gridの便利さと柔軟性を実感できるはずです。

この記事を読み終える頃には、以下のことができるようになります：

• CSS Gridの基本概念を理解する
• HTMLとCSSを使ってグローバルメニューを作成する
• CSS Gridを使って柔軟なレイアウトを実現する

CSS Gridを学ぶことで、ウェブページのデザインがより楽しく、よりクリエイティブになります。それでは、さっそくCSS Gridの世界に飛び込みましょう！

2. Gridスタイルの魅力

CSS Gridは、ウェブデザインにおいて非常に強力かつ柔軟なレイアウトシステムです。HTMLとCSSの基本を理解し始めた初心者にとっても、CSS Gridは比較的簡単に習得でき、ウェブページのレイアウトを劇的に改善することができます。ここでは、CSS Gridの基礎とその魅力について説明します。

CSS Gridの基本概念

CSS Gridは、2次元のレイアウトシステムであり、行（rows）と列（columns）を使って要素を配置します。これにより、複雑なレイアウトを簡単に構築でき、コードもシンプルになります。以下に、CSS Gridの基本的な概念を紹介します。

• Grid Container: Gridレイアウトを適用する親要素です。この要素にdisplay: grid;を指定します。
• Grid Item: Grid Containerの中に配置される子要素です。これらの要素が行と列に配置されます。

以上のようにエクセルのセルんｐようなイメージを持ってもらうとわかりやすいでしょう。

CSS Gridの利点

CSS Gridを使用することで、従来のフロートやポジショニングを使ったレイアウトよりも多くの利点があります。

グリッドの基本設定

次の章では基本的なCSS Gridの設定例を示します。これを基にして、グローバルメニューを作成していきます。

3. グローバルメニューとは？

グローバルメニューは、ウェブサイトの全ページに共通して表示されるナビゲーションメニューのことを指します。これにより、訪問者がサイト内をスムーズに移動でき、目的の情報に簡単にアクセスできます。

グローバルメニューの重要性

• 一貫性のあるナビゲーション: サイト全体で統一されたナビゲーションを提供し、ユーザーがどのページにいても迷わないようにします。
• ユーザーエクスペリエンスの向上: 簡単にアクセスできるメニューは、訪問者がストレスなくサイトを利用できるようにします。
• SEO効果: 検索エンジンもサイト構造を理解しやすくなり、SEO（検索エンジン最適化）にもプラスになります。

よくあるグローバルメニューの例

トップナビゲーションバー: ページの上部に配置されるメニュー。一般的で使いやすいデザインです。

サイドナビゲーションバー: ページの左側または右側に配置されるメニュー。特にコンテンツが多いサイトでよく使用されます。

フッターメニュー: ページの下部に配置されるメニュー。補足的な情報やリンクを含むことが多いです。

次のセクションでは、このグローバルメニューを作成しながら、CSS Gridの基礎を学びます。初心者でもわかりやすいステップバイステップのガイドを用意しているので、一緒に進めていきましょう。

• 柔軟なレイアウト: 行と列を自由に定義でき、要素の位置を簡単に調整できます。
• レスポンシブデザイン: メディアクエリと組み合わせることで、画面サイズに応じたレイアウトを簡単に作成できます。
• 簡潔なコード: 複雑なレイアウトでも、コードがシンプルでわかりやすくなります。

4. 実際にコードを書いてみる

STEP1

    <header class="header">
      <div class="header__logo">Logo</div>
      <nav class="header__nav">
        <ul class="header__nav-list">
          <li class="header__nav-item"><a href="#">About</a></li>
          <li class="header__nav-item"><a href="#">Product</a></li>
          <li class="header__nav-item"><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>

ブラウザで見てみると下の様になります。

Logo
About
Product
Contact

.header { //親要素①
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 16px;
    background-color: #333;
    color: #fff;
}

.header__logo {
    font-size: 1.5em;
}

.header__nav {
    justify-self: end; //子要素①
}

.header__nav-list { //親要素②
    display: grid;
    grid-template-columns: auto 1fr 1fr;
}

.header__nav-item a {
    color: #fff;
}

STEP2

次はcssでスタイルを当ててみましょう。

html

    <header class="header"> <!-- 親要素①。これで囲った部分をdisplay: grid; とする　-->
      <div class="header__logo">Logo</div> <!-- 子要素①　-->
      <nav class="header__nav"> <!-- 子要素①　-->
        <ul class="header__nav-list"> <!-- 孫要素①　親要素②ここも親とする-->
          <li class="header__nav-item"><a href="#">About</a></li> <!-- 子要素②　-->
          <li class="header__nav-item"><a href="#">Product</a></li> <!-- 子要素②　-->
          <li class="header__nav-item"><a href="#">Contact</a></li> <!-- 子要素②　-->
        </ul>
      </nav>
    </header>

css

.header { /* 親要素① */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 16px;
    background-color: #333;
    color: #fff;
}

.header__logo {
    font-size: 1.5em;
}

.header__nav {
    justify-self: end; /* 子要素① */
}

.header__nav-list { /* 親要素② */

}

.header__nav-item a {
    color: #fff;
}

ここでは<header class=”header”>が親要素となりGrid Containerとなります。Gridレイアウトをお弁当箱に例えるとこれがお弁当箱、つまり外枠になります。

そして、次の要素が<header class=”header”>の子要素になります。先ほどのお弁当箱に例えると、この子要素たちをどのようにお弁当箱の中に区切って配置するかと言うことになります。

<div class=”header__logo”>Logo</div>
<nav class=”header__nav”>

親子関係についてもっと詳しく知りたい方はこちらの記事を先にお読みくだいさい。

ブラウザーで確認すると下のようになっていますね。