top of page
  • kiharay
    • 2022年6月29日

Gatsby＋Tailwind CSSでコーポレートサイトのヘッダーを作る

更新日：2023年2月25日

Gatsby+TailwindCSSでシンプルなコーポレートサイトを作ろうとチャレンジしています。

コーポレートサイトを作ろうとしたきっかけは「コーポレートサイトをGatsby+TailwindCSSで自作チャレンジ」を参照してください。

Gatsby+Tailwind CSSの基本的なファイル構造は「Gatsby+TailwindCSS:最低限のファイル構造を解説」を参照してください。


固定ヘッダーを作成する

スクロールしても上部に固定してついてくるヘッダーを作ります。どのTailwind CSSクラスを適用しているのか、を主に説明していきます。

import React, { useState } from 'react';
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

const Header = () => {
  return (
  <header className="fixed top-0 w-full h-16 bg-white shadow">
        <Link to="/" className="absolute top-5 left-4">
          <StaticImage src="../images/logo.png" alt="Logo" height={28} placeholder="none" />
        </Link>
        <div className="absolute top-4 right-4">
          <button className="px-3 py-2 bg-white border border-gray-700 rounded">
            <svg className="w-4 h-4" viewBox="0 0 20 20"　xmlns="http://www.w3.org/2000/svg">
　　　　　　　　<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
　　　　　　　</svg>
          </button>
        </div>
  </header>
  )
}

export default Header;

<header>

fixedで位置を固定、top-0で一番上に配置、w-fullは幅が100%、h-16は高さを指定。bg-whiteは背景色を白色に、shadowは影を付けてます。

Tailwind CSSのクラス名の特徴として、位置や幅、高さを決めるのにピクセルを指定する方式ではなく、あらかじめTailwind CSSが用意したものから選びます。h-2やh-4、h-6のような感じ。pxをカスタマイズも可能なようですが、デフォルトの数値を使うだけで大部分は解決できそうです。


ロゴ画像

コーポレートサイトでは、企業ロゴが必ず目立つところに配置されていると思います。ここでもヘッダーメニューの一番左には企業ロゴをつけます。

企業ロゴは画像ファイルで用意して、ロゴ画像はクリックしたらトップページに飛ぶようにします。

<Link to="/"> {/* リンク先はto="xxx"に記載する。トップページの場合は"/" */}
　　<StaticImage src="../images/logo.png" alt="Logo" height={28} placeholder="none" />
</Link>

アイコンの枠はTailwind CSSのクラスで指定します。px-3 px-2 で横方向、縦方向のpaddingを設定して、border border-gray-700 rounded で丸い角の灰色枠を付けます。ちなみに灰色には濃さで種類があって、gray-300, gray-500などから選べます。

ここまでで以下のような感じになりました。


メニューを開くようにする

なるべくシンプルに作りたいですが、さすがにメニューは開いてほしいです。そこで初めて動きのあるコードを作成したいと思います。なるべく簡素になるようにReactのフックを使いたいと思います。

フックの詳細な説明は省きますが、ボタンで変化する変数が追加される、くらいの理解で進めたいと思います（ほんとはもっと複雑なことができるはず）

・・・
const [isOpen, setOpen] = useState(false);
・・・
<button onClick={()=>setOpen(!isOpen)}>
・・・

2行目でフックを宣言して、isOpenという変数を用意、４行目で<button>をクリックしたらisOpenが反転（isOpen=trueならfalseに、isOpen=falseならtrueに）変更する、という一番単純なフックを作成します。

<nav className={
　 isOpen 
    ? 'fixed top-0 -left-52 translate-x-52 transform transition-transform duration-300 pt-16 w-52 h-full bg-white' 
    : 'fixed top-0 -left-52 translate-x-0  transform transition-transform duration-300 pt-16 w-52 h-full bg-white'}>
</nav>

isOpenによってメニューの表示、非表示を切り替えます。ぱっと出るより左から滑るように出てきてほしいので、translate-x-0を使っています。


PC用も作成する

Tailwind CSSはモバイルファーストで作成することを基本コンセプトにしているようです。

まずはモバイル用のCSSクラスを書いて、その後、より大きなウィンドウサイズのCSSをBreakpoint Prefix（md:, lg:とか） を付けて追記しています。ここまでは全てモバイル向けのヘッダーを作ってきましたが、Prefixスタイルを追記することで、レスポンシブ対応のデザインが作成できます。

Brakepointを何pxとするか Brakepointの決め方は色々あって難しいようですが、シンプルにはMobile用とPC用の二つを用意するために1024px(Tailwind CSSの-lg:large)をBrakepointとするのが良さそうです。

ようやくモバイル用のヘッダーが出来ました。PC用もこれから作っていく必要がありますね。継続的に四苦八苦しながら作り出したコードを記事にしていくので、興味がある方はブログをウォッチしてください。

bottom of page