Tailwind CSS のおすすめの教材7選！ 【 2023年3月 最新版】

CSSフレームワークの「Tailwindcss」を初めて触る人に向けたコース構成になっています。

■ 本コースの対象者

・Tailwindcss完全初心者の方

・Tailwindcssの求人募集が増え、転職活動に困っている方

・Tailwindcssが実務で必要になった方

・Tailwindcss3.0の最新バージョンで学びをスタートしたい方

・CSSに時間をかけずに簡単にウェブサイトのスタイリングをしたい方

・CSSフレームワークに苦手意識のある方(BootStrapで挫折した方など)

・スマホ用にレスポンシブ対応のCSSを実装するのが面倒だと感じている方

・公式ドキュメントよりも動画でサクッと理解したい方

今、絶賛流行中のTailwindcssを使えば

簡単にCSSのスタイリングやレスポンシブに対応したウェブサイトを

構築することが可能に。

エンジニア求人募集で増えてきたTailwindcssのキャッチアップを

したい方は必見の内容です。

なぜ今までTailwindcssを使ってこなかったんだろう・・・と後悔するくらい簡単に

スタイリングすることができます。

■ 本コースを受講する際の注意点

・HTMLやCSSの超基礎的な内容は説明しておりません(タグやクラス名のつけ方等)

・Tailwindcss入門者向けの内容なので、すでにTailwindcssを学んでいる中級者の方は

新たな学びがないので受講しないようにお気をつけください。

1. はじめに
2. 本講座で学ぶこと
3. 本講座を学習する流れ
4. 環境開発構築をはじめよう
5. Node.jsをインストールしよう
6. VSCodeをインストールしよう
7. 開発用プロジェクトを作成してみよう
8. Tailwind CSSドキュメントを見て雛形を作成してみよう
9. ビルドを簡単に行えるように変更を加えよう
10. HTMLファイルを作成してTailwind CSSが適用されているか確認しよう
11. ビルドとは何か？監視とは何かを理解してみよう
12. 開発効率を上げるTailwind CSS専用プラグインをインストールしよう
13. 【追加】プラグインのPostCSSの不具合について修正
14. Tailwind CSS入門
15. Tailwind CSSって何？
16. Tailwind CSSの基礎を学んでみよう
17. 文字の大きさや色を変えてみよう
18. paddingとmarginを実装してみよう
19. ブレイクポイントを理解してレスポンシブ対応を学ぼう
20. 実際にTailwindcssでレスポンシブデザインを実装してみよう
21. 【比較】簡単なボタンを普段のCSSで記述してみよう
22. 【比較】簡単なボタンをTailwind CSSで記述してみよう
23. 繰り返し使うスタイルを抽出化してみよう
24. カスタマイズデザインを実装してみよう
25. 【実践】Tailwind CSSで簡単にウェブサイトを作ってみよう(ナビゲーションバー編)
26. 完成品のデモの確認
27. ウェブサイトで使用するフォントの設定してみよう
28. サイトで使用する色をカスタマイズしてみよう
29. Tailwind CSSでナビゲーションバーを作ってみよう
30. containerの意味を理解してブレークポイントも理解しよう
31. Flexの意味を理解してナビゲーションバーを作ろう
32. space-x-○○を使って要素間の間隔を空けてみよう
33. お問い合わせのボタンを作成してみよう
34. ハンバーガーメニューを追加してみよう
35. 【実践】Tailwind CSSで簡単にウェブサイトを作ってみよう(ヒーローセクション編)
36. ヒーローセクションの大枠から作成してみよう
37. タイトルとボタンを挿入してみよう
38. メインとなる宣材画像を挿入してみよう
39. レスポンシブレイアウトの修正をしてみよう
40. 【実践】Tailwind CSSで簡単にウェブサイトを作ってみよう(ポートフォリオセクション編)
41. ポートフォリオセクションを作成してみよう
42. グリッドレイアウトを使って画像をグリッド表示させよう
43. 【実践】Tailwind CSSで簡単にウェブサイトを作ってみよう(スキル一覧編)
44. スキルアピールできるセクションを作成してみよう
45. 保有スキルを説明するセクションを追加してみよう
46. 文字にバッジを付けたり、その他修正をしよう
47. レスポンシブに対応できるように修正しよう
48. スキル技術一覧セクションを完成させよう
49. 【実践】Tailwind CSSで簡単にウェブサイトを作ってみよう(お問い合わせ編)
50. お問い合わせフォームセクションを作ってみよう
51. フォームの複製とボタンを配置しよう
52. 電話番号やメールアドレス、SNS情報を追加しよう
53. 各セクションにスムーズに移動できるように修正しよう
54. ボーナスレクチャー
55. 最後まで受講いただいた方へ
56. ボーナスレクチャー

Update log

2022/08/27: 2022 11月にHerokuの無料プランが廃止される為、Render無料プランでのDeploy手順を追加 (lecture 24)

Webサイト開発の最新技術、Nextjs + Tailwind CSSを習得します。

*本コースでは、Nextjsの解説がメインなので、Django REST Frameworkは解説少なめでさくっと作ってしまうのでご了承ください*

Incremental Static Regeneration(ISR), Static Site Generation(SSG), SSG+ISR+Client Side Fetching(useSWR)の挙動を完全理解する為、REST APIのサーバーデータを操作しながらNextjsの理解を深めていきます。コースでは、Nextjsの機能を理解しながらNextjsプロジェクトを二つ作成していきます。

Project 1 : 簡易ホームページ (外部APIのブログ記事をpre-rendering)

Project 2 : 認証機能付き ブログ+Todos (オリジナルREST APIと連携してSSG+ISR+useSWR)

本コースで学ぶトピック

• Nextjsプロジェクト作成

• Tailwind CSSの導入

• LinkによるClient-side-navigation

• Layoutコンポーネントの活用

• useRouter

• Static Site Generation(SSG)

• Incremental Static Regeneration(ISR)

• Stale While Revalidation

• useSWR

• fallbackの理解

• revalidateの理解

• Dynamic routing

• getStaticProps

• getStaticPaths

• useContext(state management in Nextjs)

• Deploy to Vercel

• JWT認証機能

• universal-cookie

• Django REST FrameworkによるREST API実装

• REST APIのDeploy

• REST APIとNextjsの連携 (node-fetch + client side fetch(useSWR)

• SSG + ISR + CSR(useSWR)を組み合わせた、SEO対策+リアルタイムデータ取得手法

1. What is Nextjs ?
2. はじめに
3. Next.jsを学ぶモチベーション
4. SSG, ISR, CSR (useSWR)
5. コースで必要なツールのインストール
6. Nextjs Project 1 (HP編)
7. Source code
8. [注意] Tailwind CSS ver3.0
9. [注意] create-next-appのversion
10. create-next-appとTailwind設定
11. Nextjs ver11以降対応
12. Layout component
13. Contact page
14. getStaticProps
15. getStaticPaths (Dynamic routes)
16. [注意] Vercel deploy document link
17. Deploy to Vercel
18. Automatic Deploy
19. [訂正] オブジェクト変換
20. REST API (Django REST Framework)
21. Source code
22. [注意] PyJWT version
23. django startproject
24. [注意] install version
25. models, serializers, views, urls
26. End pointの動作確認
27. [訂正] Python runtime と requirements.txtファイル
28. Deploy to Heroku
29. [追加] Deploy to Render
30. Nextjs Project 2 (Blog + Todos編)
31. Source code
32. [補足] 次のレクチャーのTailwind設定
33. [注意] Tailwind CSS ver3.0
34. [注意] create-next-appのversion
35. create-next-app
36. [補足] Sign-in and Registration テンプレートについて
37. Auth component UI
38. [補足] remove cookie
39. Auth component (Function)
40. Heroku going to sleep mode
41. Main page
42. getStaticProps (Blog REST API)
43. Incremental Static Regeneration (ISR)
44. [更新] useSWR ver 1.0.0 以降
45. [訂正] npm run dev
46. useSWR + ISR + SSG
47. [更新] useSWR ver 1.0.0 以降
48. Dynamic routes (useSWR + ISR + SSG)
49. deleteTask
50. create and update Task
51. Deploy to Vercel + update CORS whitelist
52. [訂正] オブジェクト変換
53. 更に学びたい人向け
54. ボーナスレクチャー

「CSSを知ってはいるけれど、どうも苦手で・・」

Webページを作成するうえで、避けては通れないのがCSS。

少し書くのは問題ないけれど、

ページ数が増えてくるにつれ、ぐちゃぐちゃになりがちなのもCSSの特徴で。

最近ではレスポンシブ対応・モバイルファーストという事もあいまって、

さらにややこしさが増しています。

CSSの設計をかじってみるも、

つい『Boostrap』などのCSSフレームワークに頼ってデザインする事になり、

結果的に、いつも他のサイトと同じようなデザインになってしまう。。

『Boostrap』よりも微調整がしやすくて、

CSSよりも簡単に書ける方法はないのだろうか・・・

そんな需要を知ってか知らずか颯爽と登場し、

近年人気急上昇中のCSSフレームワークが、

『tailwindcss』です。

『Bootstrap』を筆頭とするこれまでのCSSフレームワークと違い、

厳選されたCSSプロパティ集になっていて、

簡単に微調整でき、さらにカスタマイズしやすい事がウリになっています。

PHPの人気フレームワーク『Laravel』でも、

『Laravel8』から『Bootstrap』->『tailwindcss』へ移行された事で、

今後さらに人気が高まってくることが予想されます。

この講座では、

CSSを知ってはいるけれどデザインが苦手な僕のような方を対象に、

デザインが苦手でもそれなりにきれいなサイトをつくれるような方法・コツを

ギュッと詰め込んだ方法を解説しています。

■更新情報

2021/12 ver3追加

■講座の内容

section1〜6までは tailwindcss ver2 で解説をしています。

・section1  tailwindcssの基本

　HTMLのおさらい/ボックスモデル/margin/padding/width/height/hover:/focus:/font/

　color/shadow/border/ring/opacity/background

・section2  レイアウト周り

　display/BoxAlignmentModel/flexbox/grid/position/z-index/overflow/visibility/container

　レスポンシブ対応(モバイルファースト)　

・section3 サンプル集

　SVG/Flexboxのレイアウト集/ボタン/カード/フォーム

・section4 その他の機能

　グラデーション/トランジション/アニメーション

・section5 カスタマイズ方法

　npmを使ったインストール方法/tailwindcss.config.js/色追加/グーグルフォント追加/

　@apply/@layer/preflight(normalize)/purge

・section6 Laravel講座で扱ったページの解説

・section7 tailwindcss ver3

1. tailwindcssの基本
2. 講座の紹介
3. Udemyで受講する簡単な説明
4. 講座で扱っている資料・サンプルコード
5. tailwindcssの概要
6. HTMLのおさらい1
7. HTMLのおさらい2
8. 追加: tailwind v2とv3 URLについて
9. tailwindcssのインストール(CDN)
10. ボックスモデル(margin, padding)
11. margin, paddingを試してみる
12. 幅と高さ width, height
13. 幅と高さを試してみる
14. フォントとテキスト font, text
15. カンペのご紹介
16. font, textを試してみる
17. 色 color
18. 色を試してみる
19. 疑似要素 hover: focus:
20. 透明度 opacity
21. 線関連の解説 border, divide, rounded, ring
22. 線を試してみる (border, divide, rounded)
23. ring を試してみる
24. 画像関連
25. 画像を試してみる img, background-image
26. 影をつける shadow
27. レイアウト関連
28. 表示方法 display
29. CSS Box Alignment Module
30. Flexbox 縦か横に並べる
31. Flexboxサンプル1 メニュー
32. Flexboxサンプル2 横並び・交互
33. Grid 縦横に並べる
34. Gridを試してみる
35. Gridサンプル フッター
36. レスポンシブ対応とモバイルファースト
37. レスポンシブ対応を試してみる
38. 要素を重ねたり固定したり position
39. positionを試してみる
40. 要素を重ねる z-index
41. はみ出した時の調整 overflow
42. 表示・非表示 visibility
43. コンテナー container
44. サンプル集 レスポンシブ対応
45. アイコン SVG Heroicons
46. デザイン4つの基本原則 + α
47. Flexbox + レスポンシブ その1
48. Flexbox + レスポンシブ その2
49. ボタン(優先度をつける)
50. カード
51. フォーム
52. サンプル集
53. その他のクラス
54. グラデーション
55. トランジション(時間的変化)
56. トランスフォーム(変形)
57. アニメーション
58. tailwindcss カスタマイズ
59. Npmでインストール
60. 開発フォルダと公開フォルダ(srcとpublic)
61. 設定ファイル tailwindcss.config.js
62. おすすめプラグイン
63. 色の追加 (カラーパレット)
64. 色の追加 (オリジナル色)
65. フォントのカスタマイズ
66. テーマ theme
67. @apply
68. @apply エラーの解消方法
69. Preflight (base) (normalize.css + α)
70. @layer
71. Purge機能
72. Webアプリ画面制作(Tailblocksベース)
73. 事前準備
74. 事前コードの解説
75. テーブル
76. フォーム
77. 商品一覧
78. 商品詳細
79. Tailwindcss ver3
80. ver3概要・インストール
81. tailwindcss.config.js
82. 開発フォルダと公開フォルダ(srcとpublic)
83. Just-In-Time (JIT)
84. 色と透明度
85. Box Shadow Color
86. 下線の装飾
87. 任意の値(width, height, margin, paddingなど)
88. アスペクト比(縦横比)
89. スクロール位置調整
90. 印刷対象外の指定
91. ver2とver3の比較
92. 補足
93. Node.jsのインストール方法
94. VSCodeインストール方法 その1
95. VSCodeインストール方法 その2

数ある講座の中から、この講座に興味を持っていただきありがとうございます。

この講座は、「プログラミングスクールに通う前に受講してほしい、HTML/CSS/JavaScript 超入門講座」です。
Webページをつくるだけでなく、実際にGitHub Pages というサービスを使って世界に公開（URLから誰でもどこに居てもアクセスできる状態）を目指します。

今話題で利用者急増中のTailwind CSS というモダンな技術も使ってデザインする方法も最後にお伝えしています。

━━━━━━━━━━━━━━
◆ HTML/CSS/JavaScript とは？
━━━━━━━━━━━━━━

HTMLは、ウェブページの構造を記述するための言語です。
CSSは、見た目（デザイン）を制御する言語です。
JavaScriptは、Webサイト上の動作を制御しています。

これらを組み合わせることによって、Webサイトは表示されています。

━━━━━━━━━━━━━━
◆ このコースでできること
━━━━━━━━━━━━━━

1. フロントエンドとバックエンドについて

2. Webページの骨格となる部分をHTMLで制作

3. WebページのデザインをCSSで整え

4. Webページに動きのある表現をJavaScriptで追加

5. Webページを世界に公開

6. （おまけ）TailwindCSS でWebページを作成＆公開

━━━━━━━━━━━━━━
◆ 伝えたいこと
━━━━━━━━━━━━━━

1. つくれるって『楽しい！』

2. 自然と身についている『論理的思考能力』

3. Webサイトを一回自分で作ると、全てのWebコンテンツの見方が『変化』

━━━━━━━━━━━━━━
◆ 事前に用意して欲しいもの
━━━━━━━━━━━━━━

1. Google Chrome が使えるパソコン

2. Visual Studio Code というコードエディター

Google Chrome というWebブラウザを使って、Webページを作成していきます。
また、Visual Studio Codeというコードエディター（高度なメモ帳の様なアプリ）を使用してプログラムを書いていきます。

講座内でもご案内いたしますが、受講前にご自身のパソコンにインストールしておくことをお勧めします。

1. はじめに
2. 紹介
3. フロントエンド（HTML/CSS/JS）について
4. バックエンドについて
5. Webページの骨格となる部分をHTMLで制作
6. マークダウン記法って知ってる？
7. Visual Studio Code で拡張機能の追加
8. 拡張機能「Live Preview」でプレビューを表示
9. タグとインデントを理解
10. プログラミングの変更内容をリアルタイムでブラウザに表示させる方法
11. まずは重要なheadタグとbodyタグの違い
12. 頻繁に使うタグとショートカットコマンド
13. 画面を遷移させるタグと画像を表示させるタグ (基礎)
14. 画面を遷移させるタグと画像を表示させるタグ (応用)
15. WebページのデザインをCSSで整え
16. もしあなたがデザイン好きならCSSはとてもおすすめ
17. CSSの書き方（3パターン）
18. ①CSSをHTMLのタグの中にstyle属性に書くパターン
19. ②CSSをheadタグの中にstyleタグとしてまとめてを書くパターン
20. class指定とid指定について
21. 文字の色や配置以外のデザインも変えてオリジナルのWebサイトをつくろう
22. ディベロッパーツール（検証）を使いこなせ！
23. ブラウザによって違うデフォルトの余白は全て取り除いておこう
24. ③CSSを別ファイルにまとめてを書くパターン
25. Webページに動きのある表現をJavaScriptで追加
26. JavaScript と Java って違うの？
27. JavaScript の書き方（２パターン）
28. ディベロッパーツール（検証）のconsoleからJavaScriptを起動！
29. まずは覚えてほしい３つの型「数・文字・配列」と「const・let・var」の違いについて
30. クイズ① goukei の中には何が入っている？
31. クイズ② array[1] の中には何が入っている？
32. 条件分岐「if文」基礎編
33. 条件分岐「if文」応用編
34. 繰り返し処理「for文」
35. じゃんけんゲームをつくろう
36. じゃんけんゲーム「関数を使って自分の手をHTMLのボタンから取得する方法」
37. じゃんけんゲーム「自分の手を選んだらランダムに相手の手を取得する方法」
38. じゃんけんゲーム「if文を使って勝ち負けの結果判定」
39. じゃんけんゲーム「じゃんけん結果をDOM操作（HTMLをJSで操作）して表示」
40. じゃんけんゲーム完成
41. Webページを世界に公開（デプロイ）
42. 「Webページを世界に公開（デプロイ）」とは？
43. Webページを世界に公開（デプロイ）
44. 公開したWebページを変更したい場合
45. モダンなWebサイトを Tailwind CSS でつくろう
46. Tailwind CSS とは
47. Tailwind CSS を Play CDN で試してみる
48. Tailwind CSS のコンポーネントで企業サイトのようなページを作成
49. Tailwind CSS のWebページも公開
50. ボーナスレクチャー
51. ボーナスレクチャー