このコースでは Tailwind CSS の基礎を CDN 経由で学びます。
あらかじめ用意された ユーティリティクラス を HTML タグに付けるだけで、
カスタム CSS を書かずに美しいデザインが作れるようになります。

📚 このコースで学べること
🎨
色・サイズ
bg-blue-500, text-red-600, w-32, h-16
📐
Spacing
p-4, m-2, px-6, gap-4
↔️
Flexbox
flex, justify-center, items-center

Grid
grid-cols-3, col-span-2, gap-4
✍️
テキスト
text-2xl, font-bold, italic, underline
🖱️
インタラクション
hover:, focus:, transition
✅ 学習後にできるようになること
  • HTML ファイルに Tailwind CDN を読み込んでスタイリングできる
  • ユーティリティクラスで色・サイズ・余白を自在に設定できる
  • Flexbox・Grid レイアウトを素早く作れる
  • レスポンシブ対応ページを書ける(sm:・md:・lg:)
  • ホバー・フォーカス効果付きのインタラクティブなUIを作れる
  • カード・ボタン・グリッドなどの実用UIコンポーネントを作れる