# Topページの作成3 次に、コンテンツが画面の左右いっぱいに広がっているので、コンテンツ幅を一定として、左右にスペースを開けます。その際に`container`というclass名を使用します。こちらを使用すると、画面幅が`640px`以内であれば`width`は`100%`で、`640px`以上では`max-width`が`640px`、`768px`以上では`max-width`が`768px`のように、レスポンシブ対応されたスタイリンが可能となります。そして左右に均等にスペースを開けるために、`mx-auto`を使用します。

export const TopPage = () => {
  return (
    <div>
      <header>
        <div className="container mx-auto flex justify-between">
          <p>スケジュール管理APP</p>
          <nav>
            <ul className="flex gap-5">
              <li>ご利用方法</li>
              <li>ログイン</li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  );
}

こちらでブラウザで確認すると、以下のように左右に左右に均等にスペースが空いていることが確認できます。また、画面を左右に大きくしたり小さくした際にコンテンツ幅が変化することが確認できるかと思います。

次に、ヘッダーを上下に中央寄せにして、上下に均等にスペースを開ける際に、`leading-[50px]`(line-height: 50px)を使用します。ちなみに、プロパティの値に、pxやem等を設定できる場合は、`[]`を使用することで、自由な値をセットすることができます。

export const TopPage = () => {
  return (
    <div>
      <header className="leading-[50px]">
        <div className="container mx-auto flex justify-between">
          <p>スケジュール管理APP</p>
          <nav>
            <ul className="flex gap-5">
              <li>ご利用方法</li>
              <li>ログイン</li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  );
}

次にロゴをスタイリングしていきます。以下のように、index.cssにロゴ用のcssを追加しましょう。

@tailwind base;
@tailwind components;
@tailwind utilities;

.logo {
  color          : #ffffff;
  text-shadow    : 
      1px  1px 1px #3f6212,
    -1px  1px 1px #3f6212,
      1px -1px 1px #3f6212,
    -1px -1px 1px #3f6212,
      1px  0px 1px #3f6212,
      0px  1px 1px #3f6212,
    -1px  0px 1px #3f6212,
      0px -1px 1px #3f6212;
}

そして、ロゴの部分にclass名を指定します。

export const TopPage = () => {
  return (
    <div>
      <header className="leading-[50px]">
        <div className="container mx-auto flex justify-between">
          <p className="logo">スケジュール管理APP</p>
          <nav>
            <ul className="flex gap-5">
              <li>ご利用方法</li>
              <li>ログイン</li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  );
}

ナビゲーションメニューに関しては、文字色を変えます。tailwindcssは以下リンクのように、デフォルトのカラーパレットがあり、今回はこちらの`Lime`を使用してカラーリングをしていきます。 {% embed url="" %} 文字色は、`text-lime-800`を使用します。

export const TopPage = () => {
  return (
    <div>
      <header className="leading-[50px]">
        <div className="container mx-auto flex justify-between">
          <p className="logo">スケジュール管理APP</p>
          <nav>
            <ul className="flex gap-5 text-lime-800">
              <li>ご利用方法</li>
              <li>ログイン</li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  );
}

次にヘッダー部分を画面を下にスクロールした際も最上部に固定されるようにします。その場合は、親要素を`position: relative`として、その要素を`position: fixed`とし、その子要素を固定する位置を指定します。今回の場合は、上部に固定するので、`top: 0`、`left: 0`、`right: 0`を指定します。以下のように編集します。

export const TopPage = () => {
  return (
    <div className="relative">
      <header className="leading-[50px] fixed top-0 left-0 right-0">
        <div className="container mx-auto flex justify-between">
          <p className="logo">スケジュール管理APP</p>
          <nav>
            <ul className="flex gap-5 text-lime-800">
              <li>ご利用方法</li>
              <li>ログイン</li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  );
}