Tailwind CSS のおすすめの教材8選！ 【 2024年11月 最新版】

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. ボーナスレクチャー

今回のコースでは、チャート式問題集の用に様々な React のアプリを作成していきます。カウントアップアプリ・To Do アプリ・スターウォーズ API を叩いて表示するアプリ・ポケモン図鑑アプリ・メモアプリ・日記アプリなどの作成を通じて、React・Next.js・TypeScript・Tailwind CSS の書き方に慣れていきましょう。useState・useEffect・useMemo・useCallback 等の使い方や、React における API の叩き方等についても詳しく解説しています。

1. 紹介
2. 紹介
3. 自己紹介
4. コースの前提条件
5. 使用する技術
6. Volta の環境構築
7. 環境構築
8. 見た目だけのコンポーネントを作成してみる
9. べた書きでコーディング
10. コンポーネントに分ける
11. props で内容を渡すようにする
12. カウントアップのコンポーネントを作成する
13. べた書きでコーディング
14. カスタムフックに切り出す
15. カウントアップの説明の訂正
16. テキストの表示・非表示を切り替えるコンポーネントを作る
17. べた書きでコーディング
18. カスタムフックに切り出す
19. リアルタイムでテキストを表示するコンポーネント作る
20. べた書きでコーディング
21. カスタムフックの作成
22. ボタンクリックで背景色を変更するコンポーネントを作る
23. べた書きでコーディング
24. カスタムフックの作成
25. フィードバックを入力・表示するコンポーネントを作る
26. べた書きでコーディング
27. カスタムフックの作成
28. 摂氏・華氏の温度変換をするコンポーネントを作る
29. べた書きでコーディング
30. カスタムフックの作成
31. 簡単なクイズアプリコンポーネントを作る
32. べた書きでコーディング
33. カスタムフックの作成
34. デジタル時計表示コンポーネントを作る
35. べた書きでコーディング
36. カスタムフックの作成
37. ランダムな名言表示コンポーネントを作る
38. べた書きでコーディング
39. カスタムフックの作成
40. 信号機のコンポーネントを作る
41. べた書きでコーディング
42. カスタムフックの作成
43. タイマーのコンポーネントを作る
44. べた書きでコーディング
45. 補足説明
46. カスタムフックの作成
47. スターウォーズの API を叩くコンポーネントを作る
48. べた書きでコーディング
49. カスタムフックの作成
50. ポケモンの API を叩くアプリを作る
51. ポケモンの API を叩くアプリを作る
52. メモアプリを作る
53. メモアプリの作成
54. To Do アプリを作る
55. To Do アプリの作成
56. 日記アプリを作る
57. 日記アプリの作成
58. ユーザー検索アプリを作る
59. ユーザー検索アプリの作成

「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

Nuxt3の最新機能を使った開発を体験できるコースとなっています。

Nuxt3のcomposables, plugins, middleware, $fetch, useAsyncData, useFetchなど

最新規機能を使った開発を体験できます。

それだけでなくTailwind CSSやpiniaなどの実務で使うようなライブラリも使いながら2時間という短時間でまとめました。

■ 本コースの対象者

・Nuxtに入門したばかりの方

・Nuxt3の最新機能を使ってみたい方

・作品を使いながらNuxtの学習をしたい方

・ドキュメントを読むより動画で学習したい方

・Tailwind CSSを使ったスタイリングを学習したい方

・piniaを使った認証機能を実装したい方

実務で大規模なwebサイトを作る場合にはvueをそのまま使うより、Nuxtを使う機会が多いと思います。

Nuxt2からNuxt3へは大規模な変更が多く含まれるのでこのコースで学習してより深い知識を身につけましょう。

1. 本コースの紹介
2. 本コースで作るものについて紹介
3. Nuxt3開発環境を構築しよう
4. Nuxt3のプロジェクトを作成して開発サーバを起動しよう
5. Tailwind CSSを導入して表示を確認しよう
6. Naive UIを導入して表示を確認しよう
7. Nuxt3のuseFetchを使ってユーザーの一覧を取得してみよう
8. useFetchを使ってjsonplaceholderにリクエストしてみよう
9. 取得したデータをテーブル形式で表示しよう
10. Naive UIを使ってサイドメニューを実装しよう
11. Tailwind CSSを使って見た目を調整しよう
12. User一覧取得と同じようにPostの一覧も取得してみよう
13. サイドメニューの画面遷移を実装しよう
14. Nuxt3のplugins, composablesを使ってbaseURLを共通化しよう
15. piniaを使って認証機能を作成しよう
16. ログインページのUIを作成しよう
17. バリデーションを実装しよう
18. 入力した内容からユーザーの情報を取得しよう
19. piniaを導入してログインしているユーザーをストアに保存しよう
20. ストアに保存したユーザーをページ層から取得してみよう
21. Nuxtのmiddlewareを使って認証が必要なページとリダイレクト機能を作成しよう
22. ログアウト機能を実装しよう
23. ユーザー詳細画面を実装しよう
24. ユーザー一覧画面から詳細画面に遷移できるようにしよう
25. テーブルコンポーネントを共通化してみよう
26. ユーザーの詳細情報を取得しよう
27. ローディング機能とエラーが発生した時にはダイアログを表示しよう
28. ユーザーの詳細画面の見た目を調整しよう
29. ユーザーの基本情報を表示してみよう
30. ユーザーに属するポストの一覧を取得して表示しよう
31. ユーザーに属するアルバムの一覧を取得して表示しよう
32. ユーザーに属するTodoの一覧を取得して表示しよう
33. ポストの詳細情報を取得して表示しよう
34. ユーザーの新規登録、編集、削除ができるようになろう
35. 本セクションの紹介
36. ユーザーの新規登録ページを追加しよう
37. ユーザーの新規登録フォームのUIを作成しよう
38. ユーザーの入力内容を取得し、バリデーションを実行しよう
39. ユーザーを新規登録するためのPOSTリクエストを送ってみよう
40. ユーザー編集ページを追加しよう
41. ユーザー編集フォームの初期値にAPIから取得した値をセットしよう
42. ユーザーを編集するためのPATCHリクエストを送ってみよう
43. ユーザー削除ボタンクリック時に確認ダイアログを表示するようにしよう
44. ユーザーを削除するためのDELETEリクエストを送ってみよう

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. node-fetch
15. getStaticProps
16. getStaticPaths (Dynamic routes)
17. [注意] Vercel deploy document link
18. [注意] Vercel Node.js Version
19. Deploy to Vercel
20. Automatic Deploy
21. [訂正] オブジェクト変換
22. REST API (Django REST Framework)
23. Source code
24. [注意] PyJWT version
25. django startproject
26. [注意] install version
27. models, serializers, views, urls
28. End pointの動作確認
29. [訂正] Python runtime と requirements.txtファイル
30. [追加] Deploy to Render
31. Deploy to Heroku
32. Nextjs Project 2 (Blog + Todos編)
33. Source code
34. [補足] 次のレクチャーのTailwind設定
35. [注意] Tailwind CSS ver3.0
36. [注意] create-next-appのversion
37. create-next-app
38. [補足] Sign-in and Registration テンプレートについて
39. Auth component UI
40. [補足] remove cookie
41. Auth component (Function)
42. Main page
43. node-fetch
44. getStaticProps (Blog REST API)
45. Incremental Static Regeneration (ISR)
46. [更新] useSWR ver 1.0.0 以降
47. [訂正] npm run dev
48. useSWR + ISR + SSG
49. [更新] useSWR ver 1.0.0 以降
50. Dynamic routes (useSWR + ISR + SSG)
51. deleteTask
52. create and update Task
53. Vercel Node.js version
54. Deploy to Vercel + update CORS whitelist
55. [訂正] オブジェクト変換
56. 更に学びたい人向け
57. ボーナスレクチャー