Nuxt3+TailWindCSSでポートフォリオの作成 1. ヘッダとフッタの作成

はじめに

初めてのサイト作成として、これから作っていくものをまとめるポートフォリオを作っていこうと思う。
最終的にはGitHub Pagesで公開する予定

実行環境

• wsl: Ubuntu 20.04.4 LTS
• npm: 8.11.0
• tailwindcss: 3.1.6
• daisyUI: 2.19.1

  TailWindCSS, daisyuiを使ったヘッダとフッタの作成

TailWindCSS, daisyUI

TailWindCSSはCSSフレームワークで

<button class="inline-block cursor-pointer rounded-md bg-gray-800 px-4 py-3 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-900">Button</button>

上記の様にHTMLタグのclass属性に値を追加することでCSSを適用するスタイルらしい。
私は普通のCSSを実装したことがないので普通とどう違うのかはわからない。
daisyUIはそのTailWindCSSを基にしたコンポーネントライブラリというものらしい。いろいろなパーツが簡単に実装できそうなのでとりあえずこれを使うことにした。

ヘッダの作成

daisyUIのNavbarというコンポーネントを使って実装していく。Headerというコンポーネントは無かった。
とりあえず、コードはこんな感じ。

<template>
  <div>
    <header>
      <div class="navbar bg-base-100">
        <NuxtLink to="/" class="btn btn-ghost normal-case text-xl">Home</NuxtLink>
        <NuxtLink to="/about" class="btn btn-ghost normal-case text-xl">About</NuxtLink>
        <NuxtLink to="/works" class="btn btn-ghost normal-case text-xl">works</NuxtLink>
        <NuxtLink to="https://array-fish.hatenablog.com/" class="btn btn-ghost normal-case text-xl">Blog</NuxtLink>
        <NuxtLink to="https://github.com/Array-fish/" class="btn btn-ghost normal-case text-xl">GitHub</NuxtLink>
      </div>
    </header>
    <slot />
  </div>
</template>

結果はこんな感じ

ポートフォリオのヘッダ