Next.jsでTailwindCSSを使った簡単なheader作成方法を紹介

はじめに

Webサイトで最初に目に入る部分といえばヘッダーですよね。
ヘッダーは、ナビゲーションの利便性とブランドの印象を決める重要な要素になります。
今回は、Next.jsとTailwindCSSを使用し簡単なブログやアプリにあったぴったりのヘッダーの作成方法を解説します。

固定ヘッダーを作成

まずは固定で常に画面上部に表示される 基本ヘッダー です。

"use client";

import React from "react";

const Header1 = () => {
  return (
    <header className="fixed top-0 left-0 w-full h-16 bg-blue-500 text-white flex items-center justify-between px-8 z-10">
      <div className="text-xl font-bold">UI Lab Studio</div>
      <nav className="space-x-6">
        <a href="/" className="hover:underline">Home</a>
        <a href="/blog" className="hover:underline">Blog</a>
        <a href="/about" className="hover:underline">About</a>
        <a href="/contact" className="hover:underline">Contact</a>
      </nav>
    </header>
  );
};

export default Header1;

こちらのコードで簡単に美しいヘッダーが作成できます。
ではコード内での詳しい解説を行いたいと思います。

ポイント

fixed top-0 left-0 w-full h-16

• fixed
  fixedは画面を固定することができます。こうすることで画面をスクロールしてもずっとヘッダーを表示されます。

• top-0
  画面を上端に配置します。0にすることで上にピッタリ配置できます。(positionプロパティがあるときのみ意味を持ちます。)

• left-0
  こちらはなくても表示できるのですが、明示的に左端に固定していると開発者へ伝える意図があります。(positionプロパティがあるときのみ意味を持ちます。)

• w-full
  幅を画面いっぱいに広げます。

• h-16
  高さ16を指定してヘッダーの高さを指定しています。
  こちらで注意点があります。このままですとヘッダーがfixedで固定されているため、記事と被って表示されてしまいます。ですので、記事の上側にも余白を設けるためにlayout.tsxの{children}にpt-16を追加し調整しましょう。

layout.tsx

<Header />
<main className="pt-16">{children}</main>
<Footer />

flex items-center justify-between

• flex
  要素を Flexboxコンテナにする。子要素を横並びにできます。

• items-center
  子要素を 縦方向に中央寄せします。(flexプロパティがあるときのみ意味を持ちます。)

― justify-between
子要素を 横方向に中央寄せします。(flexプロパティがあるときのみ意味を持ちます。)

px-8 z-10

• px-8
  要素の内側にスペースをとることができます。今回は「x」がついているので左右の余白を管理しています。
• z-10
  重なり順序を指定しています。重なった場合どちらが上に表示されるかを指定するもので10,20,30と指定することができ、数字が高いものが前面に表示されます。
  これを入れることでもし、UIが崩れてもヘッダーは前側に表示されます。

表示UI

簡単にきれいに表示することができました。

おわりに

本題では特に余白の取り方が重要だったかなと思います。
余白をとり間違えると記事とヘッダーが被ってしまい、表示されないという原因になります。
ですので高さを固定した際は必ず、固定した数値以上を余白にするようにしましょう。

簡単なUI作成においてもその細々とした設定は複雑なように見えてしまいます。
ですが理解してくると応用が効きはじめ、モダンで複雑なUIを記述するのが楽しくなってきます。皆さんと一緒に成長していけたらなと思います。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼

下記記事ではCSSの紹介ページを運営していますので参考にしていただければと思います。
▼▼▼