daisyUIを使ってポートフォリオサイトを爆速で作った[daisyUI(Tailwind CSS) + Next.js + Vercel]
Google Domainsが正式リリースされた＆クーポン配布されてドメインを買ったので初めての個人サイトを作ってみました。
極力時間かけないでいいかんじの見た目のものが作りたいなーと思い色々探していたところ、daisyUIというCSSライブラリが気に入り使ってみたので実際の作成手順や感想を残しました。
daisyUI
daisyUIはTailwind CSSベースのCSSライブラリです。
- 見た目がよく数多くのパターンのレイアウトが用意されている
- 公式サイト上から使いたいコンポーネントを簡単に探せる
- 実装時のサンプルが多く載っていてコードに落とし込みやすい
- 細かい調整も可能
- 導入が楽
など「いい感じの見た目にできる＆使い勝手良い」ライブラリとなっています。
以下からコンポーネントの種類や見た目を確認できます。
作ったサイト
経歴やスキル、ソーシャルリンクを載せるのみのシンプルな構成にしました。
個人開発やオープンにできるプロダクトができたら実績的なセクションを増やしたいです。
Vercelでデプロイしました。
作成手順
Next.jsプロジェクト立ち上げ
create-next-appでNext.jsプロジェクトをセットアップします。
TypeScriptでセットアップして諸々使いやすい状態にしたものを用意していたので今回はこれをベースとしました。
Tailwind CSS導入
daisyUIで必要となるTailwind CSSをまず導入します。
1. Install Tailwind CSS
# パッケージインストール
# eslintなども一緒に入れています
yarn add -D tailwindcss postcss autoprefixer
yarn add eslint-plugin-tailwindcss
yarn add @tailwindcss/typography
# 初期化（設定ファイル作成）
yarn tailwindcss init -p
初期化が成功するとプロジェクト直下に以下2ファイルが作成されます。
- postcss.config.js
- tailwind.config.js
2. Tailwind CSSを読み込ませる
今回はTailwind CSS以外のCSSを使わないため、styles/global.css をTailwind CSSの読み込みのみに書き換えます。
@tailwind base;
@tailwind components;
@tailwind utilities;
3. eslint設定
Tailwind CSS用のeslintを導入します。eslint.json の extends , plugins を以下のように書き換えました。
{
"extends": [
"next",
"next/core-web-vitals",
"plugin:tailwindcss/recommended"
],
"plugins": ["tailwindcss"],
"rules": {
// Static Exportだとnext/imageが使えないためオフ
"@next/next/no-img-element": "off"
}
}
daisyUI導入
公式ドキュメントをベースにdaisyUIを導入します。
1. Install daisyUI
yarn add daisyui
2. tailwind.config.jsを編集
tailwind.config.js の plugins: でdaisyUIを読み込ませます。
module.exports = {
plugins: [require("daisyui")],
}
次にTailwind CSSを適用させるパスを content: に記載します。今回は /pages , /components にファイルを配置するので以下の通りにしました。
module.exports = {
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
plugins: [require("daisyui")],
}
Google Fonts導入
今回はWebフォントとしてGoogle Fontsを利用しました。Tailwind CSSでGoogle Fontsを利用する場合は、styles/global.css と tailwind.config.js を以下のように書き換えます。
内容は導入するフォントに応じて置き換えてください。
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@700&family=Kosugi+Maru&family=Raleway:wght@400;600&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
module.exports = {
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
raleway: ['Raleway'],
kosugimaru: ['Kosugi Maru'],
azeretmono: ['Azeret Mono'],
},
},
},
plugins: [require("@tailwindcss/typography"), require("daisyui")],
}
以上でdaisyUIの導入は完了です。次に実際に導入したコンポーネント例を紹介します。
コンポーネント紹介
Navbar
ページトップによくあるナビゲーションバーです。
className='navbar' とするだけでナビゲーションバーになります。えらい。
今回はページ上にひっついているいわゆるスティッキーヘッダーにするため、className='sticky'
も指定しました。
const NavBar: NextPage = () => {
return (
<div id='NavBar' className='sticky top-0 z-30 bg-opacity-90 backdrop-blur navbar font-raleway font-semibold text-neutral-content'>
<div className='flex-1 md:text-base text-xs'>
<ul className='hidden md:flex menu menu-horizontal p-0'>
// 左側メニュー
// スマホレイアウトのときはhidden
</ul>
</div>
<div className='flex-none'>
<ul className='menu menu-horizontal p-0 bg-opacity-0'>
// 右側メニュー
</ul>
</div>
</div>
)
}
Card
見栄えがよく可読性が高いカードレイアウトです。
今回は入れていませんが、画像付きでの表示もいい感じにできます。
const About: NextPage = () => {
return (
<div id='About' className='text-white py-20 px-6 bg-slate-700/[.70] md:h-screen min-h-[800px] flex justify-center items-center'>
// ...
// 画像を入れる場合は、className='card' と同じ位置に <img> を追加します
<div className='font-kosugimaru card md:w-96 w-60 bg-base-100 text-gray-900 shadow-xl'>
<ul className='card-body flex flex-col gap-2 text-left font-raleway'>
<div className='card-title md:text-xl text-lg font-raleway font-semibold'>Items used</div>
<li className='flex gap-2 md:text-base text-sm'><img src='./images/check-o.svg' />Framework: <a className='link' href='https://nextjs.org/' target={'_blank'} rel='noopener noreferrer'>Next.js</a></li>
<li className='flex gap-2 md:text-base text-sm'><img src='./images/check-o.svg' />CSS component: <a className='link' href='https://daisyui.com/' target={'_blank'} rel='noopener noreferrer'>daisyUI</a></li>
<li className='flex gap-2 md:text-base text-sm'><img src='./images/check-o.svg' />Hosted by: <a className='link' href='https://vercel.com/' target={'_blank'} rel='noopener noreferrer'>Vercel</a></li>
</ul>
</div>
// ...
</div>
)
}
Window mockup
システムウィンドウのモックアップも簡単に作れます。
const Welcome: NextPage = () => {
return (
<div id='Welcome' className='flex flex-col justify-center items-center py-20 md:py-30'>
// className='mockup-window' を指定
// そのままだと背景色がないので bg-xxx で色を指定しました。
<div className='mockup-window bg-slate-400 md:w-9/12 w-10/12 shadow-2xl max-w-5xl'>
<div className='flex flex-col justify-center items-center gap-4 bg-slate-500 bg-opacity-90 py-10'>
<div className='relative md:w-60 md:h-60 w-40 h-40'>
<img className='mask mask-squircle' src="/images/nakaatsu_icon.png" />
</div>
<div className='md:block hidden mockup-code bg-opacity-30 border-base-content border-2 border-opacity-10 w-4/6'>
<pre data-prefix="$"><code>Welcome to nakaatsu's site.</code></pre>
</div>
<div className='md:hidden text-white font-mono'>$ Welcome to<br />nakaatsu's site.</div>
</div>
</div>
</div>
)
}
まとめ
目的だった「極力時間かけないでいいかんじの見た目のものを作る」を実現できました。
classNameの指定だけで実装できるので非常に扱いやすいライブラリでした。
Tailwind CSSを使うのも初めてでしたが、普段のCSSで実装したいスタイルを公式サイトの Quick Search を使って探せるので思ったよりも簡単に扱えました。
おまけ
今回作成したサイトのレポジトリになります。紹介しきれていない部分もあるので、気になった方は確認してみてください。
Discussion