Web制作初心者のためのTailwind CSS入門講座

レッスン内容

• 本講座について

  TailwindCSS入門講座を受講するために必要なスキル（基礎知識）、講座の進め方を紹介します。
• Tailwind CSSとは

  『TailwindCSS』は世界中で使われている、人気のあるCSSフレームワークです。何がそんなに良いの? と疑問に思われている方も多いでしょう。実際に使って見る前に、簡単にTailwind CSSの特徴を把握しましょう。
• Tailwind CSSの導入方法を知る

  Tailwind CSSの導入方法を学びます。本格的に使うにはnpm経由のインストールなど環境構築が必要ですが、練習用であればCDNの利用がおすすめ。環境構築なし、誇張無く“秒”でTailwind CSSを試すことが出来ますよ。
• Tailwind CSSを使った余白設定とFlexboxレイアウト

  Tailwind CSSのユーティリティクラスを使って、簡単なレイアウトを作成してみましょう。余白（margin,padding）とflexbox関連のクラスを使いながら、公式ドキュメントを使ったクラスの探し方も解説します。
• Tailwind CSSでレスポンシブなコーディングをする

  Tailwind CSSを使って、レスポンシプなWebページのコーディングを行ってみましょう。Tailwind CSSで用意されているメディアクエリのブレイクポイントと、ユーティリティクラスの分け方を解説します。
• Tailwind CSSでの背景画像指定、装飾

  Tailwind CSSのユーティリティを使って、背景画像を指定する方法を学びます。 ドロップシャドウやCSSフィルターなど、装飾的なスタイリングの方法も紹介します。
• Tailwind CSSのタイポグラフィ

  Tailwind CSSを使ったタイポグラフィ（文字の体裁：書体、大きさ、行間、配列など）の設定を学びます。よく使うユーティリティに加えて、要素のデフォルトスタイルを指定する方法も紹介します。
• 復習と、擬似クラスを使ったCSSアニメーション

  ここまでの復習を兼ねて、カード風デザインのコーディングを行ってみましょう。 マウスホバー時のアニメーション追加や、Tailwind CSSの機能を使った独自クラス（コンポーネント）の作成方法も解説します。
もっと見る