このコースでは Tailwind CSS の基礎を CDN 経由で学びます。
あらかじめ用意された ユーティリティクラス を HTML タグに付けるだけで、
カスタム CSS を書かずに美しいデザインが作れるようになります。
📚 このコースで学べること
🎨
色・サイズ
bg-blue-500, text-red-600, w-32, h-16
色・サイズ
bg-blue-500, text-red-600, w-32, h-16
📐
Spacing
p-4, m-2, px-6, gap-4
Spacing
p-4, m-2, px-6, gap-4
↔️
Flexbox
flex, justify-center, items-center
Flexbox
flex, justify-center, items-center
⊞
Grid
grid-cols-3, col-span-2, gap-4
Grid
grid-cols-3, col-span-2, gap-4
✍️
テキスト
text-2xl, font-bold, italic, underline
テキスト
text-2xl, font-bold, italic, underline
🖱️
インタラクション
hover:, focus:, transition
インタラクション
hover:, focus:, transition
✅ 学習後にできるようになること
- HTML ファイルに Tailwind CDN を読み込んでスタイリングできる
- ユーティリティクラスで色・サイズ・余白を自在に設定できる
- Flexbox・Grid レイアウトを素早く作れる
- レスポンシブ対応ページを書ける（sm:・md:・lg:）
- ホバー・フォーカス効果付きのインタラクティブなUIを作れる
- カード・ボタン・グリッドなどの実用UIコンポーネントを作れる