# Topページの作成4 次に、コンテンツ部分を作成していきます。以下のように記述します。

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>
      <main>
        <div>
          <h1>スケジュール管理APP</h1>
          <p>
            お互いのスケジュールを管理するアプリです
          </p>
          <div>
            <button>
              ログイン
            </button>
          </div>
        </div>
      </main>
    </div>
  );
}

ではコンテンツ部分をスタイリングしていきます。その前にヘッダーが透過しているので、`bg-white`にてヘッダーの背景色を白にしましょう。

...
      <header className="bg-white leading-[50px] fixed top-0 left-0 right-0">
        <div className="container mx-auto flex justify-between">
...

まずヘッダー部分をfixedとしているので、コンテンツ部分にヘッダー分の余白を設けましょう。 `leading-[50px]`としているので、`pt-[50px]`（padding-top: 50px）とします。

...
      <main className="pt-[50px]">
 ...

コンテンツ部分全体に背景色をつけます。背景色はグラデーションをつけます。 `bg-gradient-to-r`とすることで、左から右にグラデーションをつけることができます。 `from-lime-100`、`to-lime-200`とすることで、1番左側が`lime-100`の色となり、1番右側が`lime-200`の色となるようにグラデーションをつけることができます。

...
      <main className="pt-[50px] bg-gradient-to-r from-lime-100 to-lime-200">
...

コンテンツの要素を画面の高さいっぱいにしたい場合は、`h-screen`(height: 100vh)を使用します。

...
      <main className="pt-[50px] bg-gradient-to-r from-lime-100 to-lime-200 h-screen">
...

Topページのタイトルと内容の部分をスタイリングしていきます。こちらを中央寄せするのに、`text-center`(text-align: center)を使用しましょう。

...
        <div className="text-center">
          <h1>スケジュール管理APP</h1>
          <p>お互いのスケジュールを管理するアプリです</p>
          <div>
            <button>ログイン</button>
          </div>
        </div>
...

タイトルに関しては、`text-7xl`(font-size: 72px)を使用し、先ほど作成した`logo`を使用しましょう。

...
          <h1 className="text-7xl logo">スケジュール管理APP</h1>
...

文章に関しては、タイトルとスペースを開けるため、`pt-[10vh]`(padding-top: 10vh)を使用し、`text-5xl`(font-size: 48px)を使用します。

...          
          <p className="pt-[10vh] text-5xl">お互いのスケジュールを管理するアプリです</p>
...

ログインのボタンに関しては、上にスペースを開けるために`pt-[20vh]`(padding-top: 20vh)を使用し、ボタンは`bg-lime-800 text-white p-4 text-lg rounded-lg`としましょう。

...
          <div className="pt-[20vh]">
            <button className="bg-lime-800 text-white p-4 text-lg rounded-lg">
              ログイン
            </button>
          </div>
...

次に、コンテンツ全体が上部によっているので、縦方向の中央に寄せましょう。そのため、親要素にて`display: flexとして、子要素を横並びにして、flex-direction: columnで`要素を縦方向に並べるようにし、`justify-content: center`で縦方向の中央寄せ、`align-items: center`で横方向の中央寄せを実現します。こちらをtailwindcssにて、`flex flex-col justify-center items-center`を使用します。

...
      <main className="pt-[50px] bg-gradient-to-r from-lime-100 to-lime-200 h-screen flex flex-col justify-center items-center">
...

これで画面を確認すると、以下のように表示されているかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: Topページを作成 ``` としましょう。