Web制作初心者のためのTailwind CSS入門講座
人気上昇、フロントエンドでは必修スキルになりつつあるCSSフレームワーク『TailwindCSS』。本講座では、Web制作初心者、学習をはじめて間もない方にも分かりやすいよう、TailwindCSSの特徴と、基本的なコーディング方法を解説します。
無料で今すぐはじめる※ ログインする必要はありません。
レベル
ビギナー
8レッスン
3日間
はじめての『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のユーティリティクラスを活用し、基本的なコーディングができる
- デフォルトスタイルの指定・変更ができる
- 独自クラスを作成することができる
レッスン内容
-
1
TailwindCSS入門講座を受講するために必要なスキル（基礎知識）、講座の進め方を紹介します。
-
2
『TailwindCSS』は世界中で使われている、人気のあるCSSフレームワークです。何がそんなに良いの? と疑問に思われている方も多いでしょう。実際に使って見る前に、簡単にTailwind CSSの特徴を把握しましょう。
-
3
Tailwind CSSの導入方法を学びます。本格的に使うにはnpm経由のインストールなど環境構築が必要ですが、練習用であればCDNの利用がおすすめ。環境構築なし、誇張無く“秒”でTailwind CSSを試すことが出来ますよ。
-
4
Tailwind CSSのユーティリティクラスを使って、簡単なレイアウトを作成してみましょう。余白（margin,padding）とflexbox関連のクラスを使いながら、公式ドキュメントを使ったクラスの探し方も解説します。
-
5
Tailwind CSSを使って、レスポンシプなWebページのコーディングを行ってみましょう。Tailwind CSSで用意されているメディアクエリのブレイクポイントと、ユーティリティクラスの分け方を解説します。
-
6
Tailwind CSSのユーティリティを使って、背景画像を指定する方法を学びます。ドロップシャドウやCSSフィルターなど、装飾的なスタイリングの方法も紹介します。
-
7
Tailwind CSSを使ったタイポグラフィ（文字の体裁：書体、大きさ、行間、配列など）の設定を学びます。よく使うユーティリティに加えて、要素のデフォルトスタイルを指定する方法も紹介します。
-
8
ここまでの復習を兼ねて、カード風デザインのコーディングを行ってみましょう。マウスホバー時のアニメーション追加や、Tailwind CSSの機能を使った独自クラス（コンポーネント）の作成方法も解説します。
もっと見る
Web制作初心者のためのTailwind CSS入門講座を 無料で始めましょう！
無料申し込み期限
11月24日まで
募集
人数
100名 （残りわずか）
