実践プロジェクト
この章では、これまで学んだことを活かしてランディングページを構築します。
プロジェクト概要
SaaS プロダクトのランディングページを作成します。
含まれるセクション
- ヒーロー
- 機能紹介
- 料金プラン
- FAQ
- CTA
- フッター
セットアップ
# プロジェクト作成
npm create vite@latest tailwind-landing -- --template vanilla
cd tailwind-landing
# Tailwind CSS インストール
npm install tailwindcss @tailwindcss/vite
vite.config.js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})
src/style.css
@import "tailwindcss";
@theme {
--animate-blob: blob 7s infinite;
}
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
/* animation-delay は Tailwind CSS に組み込みがないためカスタム CSS で定義 */
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
animate-blob はカスタム定義
animate-blob は Tailwind CSS の組み込みアニメーションではありません。16 章 / カスタマイズ で学んだ @theme と @keyframes を使ってカスタム定義しています。animation-delay-* も Tailwind に組み込みがないため、通常の CSS クラスとして定義しています。なお、v4 では [animation-delay:2s] のような任意プロパティ構文を使えば、カスタム CSS クラスを定義せずにインラインでの指定も可能です。
ヒーローセクション
<section class="relative overflow-hidden bg-linear-to-br from-blue-600 via-blue-700 to-purple-700">
<!-- 背景装飾 -->
<div class="absolute inset-0 opacity-30">
<div class="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
<div class="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
<div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 lg:py-40">
<div class="text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight">
<span class="block">ビジネスを加速する</span>
<span class="block mt-2 bg-clip-text text-transparent bg-linear-to-r from-yellow-200 to-pink-200">
次世代プラットフォーム
</span>
</h1>
<p class="mt-6 text-lg md:text-xl text-blue-100 max-w-2xl mx-auto">
効率化・自動化・スケールアップ。すべてを 1 つのプラットフォームで実現。
今すぐ無料で始めましょう。
</p>
<div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
<a href="#" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-blue-700 bg-white rounded-xl hover:bg-blue-50 transition-colors shadow-lg hover:shadow-xl">
無料で始める
<svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</a>
<a href="#" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white border-2 border-white/30 rounded-xl hover:bg-white/10 transition-colors">
デモを見る
</a>
</div>
</div>
<!-- ダッシュボードプレビュー -->
<div class="mt-16 relative">
<div class="absolute inset-0 bg-linear-to-t from-blue-700 via-transparent to-transparent z-10"></div>
<img
src="https://placehold.co/1200x600/1e40af/ffffff?text=Dashboard+Preview"
alt="ダッシュボードプレビュー"
class="w-full rounded-xl shadow-2xl border border-white/20"
/>
</div>
</div>
</section>
機能紹介セクション
<section class="py-20 md:py-28 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-blue-600 font-semibold uppercase tracking-wide">機能</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold text-gray-900">
すべてが揃ったプラットフォーム
</h2>
<p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
チームの生産性を最大化するために必要なすべての機能を提供します。
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 機能カード 1 -->
<div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
<div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center group-hover:bg-blue-600 group-hover:text-white transition-colors">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="mt-6 text-xl font-bold text-gray-900">高速処理</h3>
<p class="mt-2 text-gray-600">
最新のテクノロジーにより、処理速度を 10 倍高速化。待ち時間を大幅に削減します。
</p>
</div>
<!-- 機能カード 2 -->
<div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
<div class="w-14 h-14 bg-green-100 text-green-600 rounded-xl flex items-center justify-center group-hover:bg-green-600 group-hover:text-white transition-colors">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
<h3 class="mt-6 text-xl font-bold text-gray-900">セキュリティ</h3>
<p class="mt-2 text-gray-600">
エンタープライズレベルのセキュリティで、データを確実に保護します。
</p>
</div>
<!-- 機能カード 3 -->
<div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
<div class="w-14 h-14 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center group-hover:bg-purple-600 group-hover:text-white transition-colors">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<h3 class="mt-6 text-xl font-bold text-gray-900">チームコラボ</h3>
<p class="mt-2 text-gray-600">
リアルタイムでの共同作業が可能。チーム全体の生産性を向上させます。
</p>
</div>
<!-- 機能カード 4 -->
<div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
<div class="w-14 h-14 bg-yellow-100 text-yellow-600 rounded-xl flex items-center justify-center group-hover:bg-yellow-600 group-hover:text-white transition-colors">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<h3 class="mt-6 text-xl font-bold text-gray-900">分析ダッシュボード</h3>
<p class="mt-2 text-gray-600">
詳細な分析レポートで、ビジネスの状況を一目で把握できます。
</p>
</div>
<!-- 機能カード 5 -->
<div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
<div class="w-14 h-14 bg-red-100 text-red-600 rounded-xl flex items-center justify-center group-hover:bg-red-600 group-hover:text-white transition-colors">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</div>
<h3 class="mt-6 text-xl font-bold text-gray-900">自動同期</h3>
<p class="mt-2 text-gray-600">
すべてのデバイスで自動的に同期。いつでもどこでもアクセス可能です。
</p>
</div>
<!-- 機能カード 6 -->
<div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
<div class="w-14 h-14 bg-indigo-100 text-indigo-600 rounded-xl flex items-center justify-center group-hover:bg-indigo-600 group-hover:text-white transition-colors">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
</svg>
</div>
<h3 class="mt-6 text-xl font-bold text-gray-900">API 連携</h3>
<p class="mt-2 text-gray-600">
豊富な API で既存のツールとシームレスに連携できます。
</p>
</div>
</div>
</div>
</section>
料金プランセクション
<section class="py-20 md:py-28 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-blue-600 font-semibold uppercase tracking-wide">料金</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold text-gray-900">
シンプルで透明な料金体系
</h2>
<p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
隠れた費用は一切ありません。必要な機能に応じてプランをお選びください。
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- スタータープラン -->
<div class="bg-white rounded-2xl shadow-lg p-8">
<h3 class="text-xl font-bold text-gray-900">スターター</h3>
<p class="mt-2 text-gray-600">個人利用に最適</p>
<div class="mt-6">
<span class="text-4xl font-bold">¥0</span>
<span class="text-gray-500">/月</span>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-gray-600">5 プロジェクトまで</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-gray-600">1GB ストレージ</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-gray-600">コミュニティサポート</span>
</li>
</ul>
<button class="mt-8 w-full py-3 px-4 border-2 border-blue-500 text-blue-500 font-semibold rounded-xl hover:bg-blue-50 transition-colors">
無料で始める
</button>
</div>
<!-- プロプラン (推奨) -->
<div class="bg-blue-600 rounded-2xl shadow-xl p-8 relative">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-yellow-400 text-yellow-900 text-sm font-semibold rounded-full">
人気
</div>
<h3 class="text-xl font-bold text-white">プロ</h3>
<p class="mt-2 text-blue-100">成長中のチームに</p>
<div class="mt-6">
<span class="text-4xl font-bold text-white">¥2,980</span>
<span class="text-blue-200">/月</span>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-blue-200" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-blue-100">無制限のプロジェクト</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-blue-200" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-blue-100">100GB ストレージ</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-blue-200" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-blue-100">優先サポート</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-blue-200" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-blue-100">高度な分析機能</span>
</li>
</ul>
<button class="mt-8 w-full py-3 px-4 bg-white text-blue-600 font-semibold rounded-xl hover:bg-blue-50 transition-colors">
プランを選択
</button>
</div>
<!-- エンタープライズ -->
<div class="bg-white rounded-2xl shadow-lg p-8">
<h3 class="text-xl font-bold text-gray-900">エンタープライズ</h3>
<p class="mt-2 text-gray-600">大規模組織向け</p>
<div class="mt-6">
<span class="text-4xl font-bold">お問合せ</span>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-gray-600">すべての機能</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-gray-600">無制限ストレージ</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-gray-600">専任サポート</span>
</li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="text-gray-600">SLA 保証</span>
</li>
</ul>
<button class="mt-8 w-full py-3 px-4 border-2 border-blue-500 text-blue-500 font-semibold rounded-xl hover:bg-blue-50 transition-colors">
お問い合わせ
</button>
</div>
</div>
</div>
</section>
FAQ セクション
<section class="py-20 md:py-28 bg-white">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-blue-600 font-semibold uppercase tracking-wide">FAQ</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold text-gray-900">
よくある質問
</h2>
</div>
<div class="space-y-4">
<!-- FAQ 項目 1 -->
<details class="group bg-gray-50 rounded-xl">
<summary class="flex justify-between items-center p-6 cursor-pointer list-none">
<span class="font-semibold text-gray-900">無料プランでも十分使えますか?</span>
<svg class="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</summary>
<div class="px-6 pb-6 text-gray-600">
はい、個人利用であれば無料プランで十分な機能をご利用いただけます。チームでの利用や高度な機能が必要な場合は、プロプランをご検討ください。
</div>
</details>
<!-- FAQ 項目 2 -->
<details class="group bg-gray-50 rounded-xl">
<summary class="flex justify-between items-center p-6 cursor-pointer list-none">
<span class="font-semibold text-gray-900">いつでも解約できますか?</span>
<svg class="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</summary>
<div class="px-6 pb-6 text-gray-600">
はい、いつでも解約可能です。解約後も契約期間終了までサービスをご利用いただけます。解約手数料は一切かかりません。
</div>
</details>
<!-- FAQ 項目 3 -->
<details class="group bg-gray-50 rounded-xl">
<summary class="flex justify-between items-center p-6 cursor-pointer list-none">
<span class="font-semibold text-gray-900">データのエクスポートはできますか?</span>
<svg class="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</summary>
<div class="px-6 pb-6 text-gray-600">
はい、すべてのプランでデータのエクスポートが可能です。CSV、JSON、PDF 形式でエクスポートできます。
</div>
</details>
</div>
</div>
</section>
CTA セクション
<section class="py-20 md:py-28 bg-linear-to-r from-blue-600 to-purple-600">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-white">
今すぐ始めましょう
</h2>
<p class="mt-4 text-lg text-blue-100">
14 日間の無料トライアル。クレジットカード不要。
</p>
<div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
<a href="#" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-blue-600 bg-white rounded-xl hover:bg-blue-50 transition-colors">
無料で始める
</a>
<a href="#" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white border-2 border-white/30 rounded-xl hover:bg-white/10 transition-colors">
営業に相談
</a>
</div>
</div>
</section>
フッター
<footer class="bg-gray-900 text-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2 md:col-span-1">
<a href="/" class="text-2xl font-bold">Logo</a>
<p class="mt-4 text-gray-400 text-sm">
ビジネスを加速する次世代プラットフォーム
</p>
</div>
<div>
<h4 class="font-semibold mb-4">プロダクト</h4>
<ul class="space-y-2 text-gray-400 text-sm">
<li><a href="#" class="hover:text-white">機能</a></li>
<li><a href="#" class="hover:text-white">料金</a></li>
<li><a href="#" class="hover:text-white">導入事例</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">サポート</h4>
<ul class="space-y-2 text-gray-400 text-sm">
<li><a href="#" class="hover:text-white">ヘルプセンター</a></li>
<li><a href="#" class="hover:text-white">ドキュメント</a></li>
<li><a href="#" class="hover:text-white">お問い合わせ</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">会社情報</h4>
<ul class="space-y-2 text-gray-400 text-sm">
<li><a href="#" class="hover:text-white">会社概要</a></li>
<li><a href="#" class="hover:text-white">採用情報</a></li>
<li><a href="#" class="hover:text-white">ブログ</a></li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm">
© 2026 Company Name. All rights reserved.
</p>
<div class="flex gap-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white">
<span class="sr-only">Twitter</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">...</svg>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<span class="sr-only">GitHub</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">...</svg>
</a>
</div>
</div>
</div>
</footer>
まとめ
このプロジェクトで学んだこと:
- レイアウト: Flexbox / Grid を使った柔軟なレイアウト
- レスポンシブ: モバイルファーストアプローチ
- カラー: グラデーションとカラーパレットの活用
- タイポグラフィ: 階層的なテキストスタイリング
- インタラクション: ホバー効果とトランジション
- コンポーネント: 再利用可能な UI パターン
Tailwind CSS の基礎から応用まで、一通り学習できました。実際のプロジェクトでこれらの知識を活用してください。
次に読む
- React 入門 — Tailwind — React と組み合わせる際の実用パターン (clsx / variants / RSC)
- TypeScript Master Guide — 型安全な実装で品質を上げる
- Clean Code (TypeScript) — 設計規範でコード品質を底上げ
- Tailwind CSS ガイド 目次 — 全 18 章の構成に戻る