Web制作初心者のためのTailwind CSS入門講座
こんな方へCSSフレームワークを使ってみたい方
人気上昇、フロントエンドでは必修スキルになりつつあるCSSフレームワーク『TailwindCSS』。本講座では、Web制作初心者、学習をはじめて間もない方にも分かりやすいよう、TailwindCSSの特徴と、基本的なコーディング方法を解説します。
この講座で、できるようになること
- Tailwind CSSの概要とメリット/デメリット
- Tailwind CSSを導入する方法
- Tailwind CSSのクラスの調べ方
この講座について
はじめての『Tailwind CSS』
今日中に基本をマスターしよう！
～Web制作初心者のためのTailwind CSS入門講座～
人気上昇、フロントエンドでは必修スキルになりつつある『Tailwind CSS』。Webアプリケーションのviewsなどに使われることも多く、Webデザイナーやコーダーにとっても、使えると受けられるお仕事の幅が広くなる可能性があるCSSフレームワークです。
本格導入ではビルドが必要だったりと、導入や使用方法の説明はWeb制作初心者の方には「難しそう…」な言葉のオンパレード。ですが、実はTailwindCSSを使ったコーディングの基礎習得はめちゃくちゃ簡単にできます。初めて使う方は、基本を最小限の学習コストで学びましょう！
こんな方にオススメです
HTML/CSSの学習を
最近始めたばかりの方
なにから手を付けて良いか
イマイチ、わからない
まずはサクッと短時間で
概要や基礎を押さえたい
Tailwind CSS基礎習得、自己学習できる下地作りをサポートします
Tailwind CSSについて「どんなものか知りたい」「使ってみたい」と思っている方は多いでしょう。しかし、公式ドキュメントや、入門記事などは“Tailwindの初心者向け”ではあっても、Web制作初心者向けではないものが大半。JSフレームワークなどにも詳しくないと、説明に使われている用語自体が難しく、とっつきにくく感じてしまいます。
本講座では、Web制作初心者、学習をはじめて間もない方に分かりやすいよう、TailwindCSSの特徴と、基本的なコーディング方法を解説します。フレームワーク未経験者の方向けに、公式ドキュメントの活用方法から丁寧に解説。習ったことを手がかりに、どんどん自己学習できる下地作りを大切にしたカリキュラムとなっています。
レスポンシブコーディングもあっという間！
以下のようなページを作りながら、Tailwind CSSの使い方を学習します。
レスポンシブWebデザインのコーディングも短時間で完成しますよ！
本講座を終えると、できるようになること
- Tailwind CSSの特徴がわかる
- 必要なCSSクラスの調べ方がわかる
- Tailwind CSSのユーティリティクラスを活用し、基本的なコーディングができる
- デフォルトスタイルの指定・変更ができる
- 独自クラスを作成することができる
この講座で学べること
- Tailwind CSSの概要とメリット/デメリット
- Tailwind CSSを導入する方法
- Tailwind CSSのクラスの調べ方
- Tailwind CSSでのレスポンシブコーディング
- Tailwind CSSを使ったアニメーション作成
- コーディングのスピートをアップする
こんな方におすすめです
- CSSフレームワークを使ってみたい方
- Tailwind CSSに興味がある方
- Tailwind CSSを手軽に試してみたい方
- 爆速でコーディングを進めたい方
受講の前に用意するもの
- WindowsもしくはMacのパソコンがある方
- パソコンの基本操作ができる方
- HTML/CSSの基本がわかる方
カリキュラム
- 1本講座についてTailwindCSS入門講座を受講するために必要なスキル（基礎知識）、講座の進め方を紹介します。
- 2Tailwind CSSとは『TailwindCSS』は世界中で使われている、人気のあるCSSフレームワークです。何がそんなに良いの? と疑問に思われている方も多いでしょう。実際に使って見る前に、簡単にTailwind CSSの特徴を把握しましょう。
- 3Tailwind CSSの導入方法を知るTailwind CSSの導入方法を学びます。本格的に使うにはnpm経由のインストールなど環境構築が必要ですが、練習用であればCDNの利用がおすすめ。環境構築なし、誇張無く“秒”でTailwind CSSを試すことが出来ますよ。
- 4Tailwind CSSを使った余白設定とFlexboxレイアウトTailwind CSSのユーティリティクラスを使って、簡単なレイアウトを作成してみましょう。余白（margin,padding）とflexbox関連のクラスを使いながら、公式ドキュメントを使ったクラスの探し方も解説します。
- 5Tailwind CSSでレスポンシブなコーディングをするTailwind CSSを使って、レスポンシプなWebページのコーディングを行ってみましょう。Tailwind CSSで用意されているメディアクエリのブレイクポイントと、ユーティリティクラスの分け方を解説します。
- 6Tailwind CSSでの背景画像指定、装飾Tailwind CSSのユーティリティを使って、背景画像を指定する方法を学びます。 ドロップシャドウやCSSフィルターなど、装飾的なスタイリングの方法も紹介します。
- 7Tailwind CSSのタイポグラフィTailwind CSSを使ったタイポグラフィ（文字の体裁：書体、大きさ、行間、配列など）の設定を学びます。よく使うユーティリティに加えて、要素のデフォルトスタイルを指定する方法も紹介します。
- 8復習と、擬似クラスを使ったCSSアニメーションここまでの復習を兼ねて、カード風デザインのコーディングを行ってみましょう。 マウスホバー時のアニメーション追加や、Tailwind CSSの機能を使った独自クラス（コンポーネント）の作成方法も解説します。
Web制作初心者のためのTailwind CSS入門講座
CSSフレームワークを使ってみたい方に向けた、全8レッスンの講座です。上から順に、1つずつ進めてください。
- Tailwind CSSの概要とメリット/デメリット
- Tailwind CSSを導入する方法
- Tailwind CSSのクラスの調べ方
- Tailwind CSSでのレスポンシブコーディング