Outlecture
Home
About
Technology
Design
Video
Contact
Official
Outlecture
Home
About
Technology
Design
Video
Contact
Twitter Official
  • Home
  • Technology

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

更新日:2023年3月11日

こちらは、独学で Tailwind CSS を学ぼうとしている初学者の方に最適な学習講座を紹介するページです。

目次

1. 本ページの説明

1. 本ページの説明

Tailwind CSS を独学で学ぶ上でおすすめの講座を動画プラットフォームから合計7選紹介します。

Tailwind CSS とは

Tailwind CSSは、2017年にAdam Wathan 氏によって開発されたCSSフレームワークの一つです。Web開発者が簡単かつ迅速に高品質なユーザーインターフェイスを構築することを目的としています。Tailwind CSSは、小さなCSSユーティリティクラスを提供します。これらのユーティリティクラスを組み合わせて、複雑なレイアウトやデザインを構築することができます。また、Tailwind CSSはCSSに必要なものだけを提供するので、不要なスタイルを含まないように設計されています。

本サイト「Outlecture(アウトレクチャー)」は講座の評価、情報の鮮度、購入者や視聴者数、直近の数値上昇率などを全てバランスよく採点し、ユーザーにとって最適な講座のみ抜粋できるよう独自のアルゴリズムで評価を行っています。

また、各動画プラットフォームもそれぞれ特徴があり、「こういう状況の方にはこちらの方が良い」というユースケースも合わせて説明していきます。

Tailwind CSSをこれから学ぼうとしているみなさまのご参考にしていただければ幸いです。

2. Udemy おすすめ講座4選

Outlectureで厳選したおすすめのUdemy講座4選はこちらです。

コース名 平均評価 総購入者数 先月の購入者数
(2023年2月)
コースレベル コース時間 作成日 更新日 料金

【Tailwindcss3.0】利用者急増中!作って学ぶ爆速で理解したい人向けのTailwindcss完全入門パック

thumbnail
4.39 591 - 初級 3 時間 15 分 2022年5月28日 2022年7月17日 ¥13,800

Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発

thumbnail
4.04 3,625 68 初級 4 時間 1 分 2020年12月23日 2023年2月25日 ¥27,800

【tailwindcss】初心者向け講座・CSSが苦手な人向け 【わかりやすさ重視】【次世代のCSS】にじっくり取り組む

thumbnail
4.19 1,615 47 初級 6 時間 58 分 2020年12月4日 2022年9月6日 ¥4,800

世界一やさしいWebサイト作成&公開 HTML/CSS/JavaScript/GitHub 超入門講座

thumbnail
4.33 19 3 初級 3 時間 10 分 2022年10月23日 2022年10月29日 ¥24,800

Udemy(ユーデミー)は、アメリカ・シリコンバレー発祥のユニコーン企業で、世界最大級のオンライン学習プラットフォームを運営しています。

Udemyの特徴は、

  • 15.5万以上(※海外講座含む)の豊富な講座を提供している
  • 講師陣の多くが世界最先端の現場で活躍されている
  • 1講座あたり数千~数万円で、キャンペーン時は70~90%OFFとなる良心的な値段
  • 講座は1度購入すれば視聴期限なく受講でき、30日返金保証もついている
  • 講座は0.5~2倍の変速機能を備え、自分のペースで学習することができ、専用アプリを使えばスマホからでもオフライン環境で受講可能
  • 講師に直接掲示板から質問ができるため、疑問を解決し自学自習をサポートしてくれる

等があげられます。

Outlectureの管理メンバーは、ソフトウェアエンジニアやクリエイター、webデザイナーが現役で活躍しています。私たちは初めて触るプログラミング言語やプロダクトの多くはUdemyの受講からキャッチアップをはじめています。
私たちの体験談として、Udemyの講座の質は非常に高いと感じています。講師陣が世界最先端で活躍している方々ばかりで、最先端の知識や現場でのノウハウを丁寧にわかりやすく教えてくれます。試験で使う知識ではなく、実際の現場・案件で使う知識と技術を習得することができます。

Udemyの講座は、実際の現場で活用したい方や自己学習を始めたい方に特におすすめです。一度購入すれば、視聴期限がなく、30日間の返金保証もあるため、安心して学びを始めることができます。

こんな方におすすめ

  • 実案件でTailwind CSSを使用する
  • 現役の(世界)トップ戦線で活躍している方のノウハウを学びたい
  • サブスクリプションの加入に抵抗のある
  • ITの基礎的な知識がある

各講座の詳細は以下に記載します。


【Tailwindcss3.0】利用者急増中!作って学ぶ爆速で理解したい人向けのTailwindcss完全入門パック

ウェブサイト制作で人気急上昇中のTailwindcssフレームワーク。本講座ではTailwindcssを個人用ポートフォリオサイトを作りながら学びます。目から鱗が落ちるほど簡単にレスポンシブ対応したウェブサイト構築が可能になります。

thumbnail
平均評価
4.39
総購入者数
591
先月の購入者数
(2023年2月)
-
コースレベル
初級
コース時間
3 時間 15 分
作成日
2022年5月28日
更新日
2022年7月17日
料金
¥13,800

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. ボーナスレクチャー
Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発

[最新技術] : ホームページ、LP、ブログなどSEO対策や高速レンダリングに最適なモダンReact フレームワークNext.jsを習得します。

thumbnail
平均評価
4.04
総購入者数
3,625
先月の購入者数
(2023年2月)
68
コースレベル
初級
コース時間
4 時間 1 分
作成日
2020年12月23日
更新日
2023年2月25日
料金
¥27,800

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. ボーナスレクチャー
【tailwindcss】初心者向け講座・CSSが苦手な人向け 【わかりやすさ重視】【次世代のCSS】にじっくり取り組む

近年人気急上昇中のCSSフレームワーク。CSSが苦手だからこそ取り組む価値のある厳選されたCSSプロパティ集を初歩からじっくり解説しています。CSS基礎/モバイルファースト/レスポンシブ対応/Flexbox/Grid/

thumbnail
平均評価
4.19
総購入者数
1,615
先月の購入者数
(2023年2月)
47
コースレベル
初級
コース時間
6 時間 58 分
作成日
2020年12月4日
更新日
2022年9月6日
料金
¥4,800

「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
世界一やさしいWebサイト作成&公開 HTML/CSS/JavaScript/GitHub 超入門講座

プログラミングスクールに通う前にまず受講してほしい基礎講座 〜Webページやアプリを開発&公開するのに必要な知識を伝授〜

thumbnail
平均評価
4.33
総購入者数
19
先月の購入者数
(2023年2月)
3
コースレベル
初級
コース時間
3 時間 10 分
作成日
2022年10月23日
更新日
2022年10月29日
料金
¥24,800

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

この講座は、「プログラミングスクールに通う前に受講してほしい、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 の書き方(2パターン)
  28. ディベロッパーツール(検証)のconsoleからJavaScriptを起動!
  29. まずは覚えてほしい3つの型「数・文字・配列」と「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. ボーナスレクチャー

3. YouTubeおすすめ講座3選

Outlectureで厳選したおすすめのYouTube講座3選はこちらです。

動画名 総視聴数 先月の視聴数
(2023年2月)
いいね数 公開日

【Tailwindcss入門】利用者急上昇中のCSSフレームワークのTailwindcssで簡単なウェブサイトを作ってみよう

thumbnail

チャンネル名:プログラミングチュートリアル

5,347 542 133 2022年6月10日

【Tailwind CSS #1】最近流行りのTailwind CSSを学ぼう

thumbnail

チャンネル名:しまぶーのIT大学

40,846 654 924 2021年7月13日

2023年/TailwindCSS ver3「インストール・使い方」ゼロから始める:VSCode

thumbnail

チャンネル名:プログラミング教育者【遅咲きエンジニア・山崎大助】

221 - 14 2023年1月21日

YouTubeは、広告がつくものの無料で視聴でき、日常生活でもお馴染みとなっています。
最近では、良質な教材も増えており、学びたいけどお金をかけるほどでもない方や、概要をさらっと理解したい方には、YouTubeで学ぶことをおすすめします。

こんな方におすすめ

  • お金をかけずに学びたい
  • Tailwind CSSの概要だけさらっと理解したい

各講座の詳細は以下に記載します。

【Tailwindcss入門】利用者急上昇中のCSSフレームワークのTailwindcssで簡単なウェブサイトを作ってみよう

プログラミングチュートリアル

総視聴数
5,347
先月の視聴数
(2023年2月)
542
いいね数
133
公開日
2022年6月10日
#入門 #tailwindcss #cssフレームワーク #css #html #ウェブサイト #プログラミング

【Tailwindcssでポートフォリオサイトを作ってみたい方はこちら】
http://shincode.info/2021/12/31/udemy-discount-coupon/

\ShinCode_Campでプログラミングを楽しもう/
幅広いプログラミングの知識を得るための動画プラットフォーム
🚀【7日間無料体験キャンペーン実施中】🚀
🎁僕が作成したUdemy講座が見放題
🎁分からない箇所は質問し放題
🎁フルスタック技術が学べる
🎁いつでも解約可能
↓↓↓↓↓
https://code-s-school-5bc2.thinkific.com/bundles/shincode-camp
-----------------------------------------------------------------------------------------------------------------------------
【募集】Web開発/Webサイト制作を頼みたい方はこちらのリンクからお問い合わせください
↓↓↓↓↓
https://worldhacks.co.jp/

\Webスキルが付いたらWebエンジニアに挑戦してみよう/
私が実際にWebのお仕事を頂いている会社で働いてみよう🚀
応募は下記リンクから
↓
https://www.wantedly.com/projects/1020833
✅Webエンジニア未経験でもOK
✅フルリモートだから自由な場所で働ける
✅ポテンシャル採用
✅モダンな技術スタックで開発できる
✅面接で不合格でも「なぜダメだったのか」の理由がきちんと聞ける
✅会社公式HPはこちら → https://worldhacks.co.jp/
-----------------------------------------------------------------------------------------------------------------------------

【この動画を視聴するメリット】
・Tailwindcssの基礎が理解できる
・Tailwindcssで簡単なウェブサイトが構築できる
・Tailwindcssでレスポンシブ対応したサイトが作れる
・CSSの基礎が復習できる

【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ2000人突破
・Webアプリ/サイト開発数:200以上

★チャンネル登録はこちらから★
https://www.youtube.com/channel/UCNTxclE0N4qsUuirssL_D8w?sub_confirmation=1

★今回のソースコード★
https://github.com/Shin-sibainu/tailwindcss-tutorial-yt

★運営者SNS★
Twitter:https://twitter.com/Shin_Engineer

★この動画で使用している機材★
キーボード(Keychron K6 赤軸):https://amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス):https://amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク):https://amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド):
https://amzn.to/3se5onZ
※アフィリエイトリンクになります。
【Tailwind CSS #1】最近流行りのTailwind CSSを学ぼう

しまぶーのIT大学

総視聴数
40,846
先月の視聴数
(2023年2月)
654
いいね数
924
公開日
2021年7月13日
Tailwind CSS講座 第2回
↪︎ https://youtu.be/T_WIbcvB5GM

Tailwind CSSに関する動画講座をこれからアップしていきます。今かなり流行りのCSSフレームワークで、ReactやVue.jsとも一緒に使われることが多いです。私もプロダクト開発で使っていますが、とにかく最高です。Bootstrapとかと比較してもかなり柔軟性が高いので、長く使われると予想しています。これから一緒に学んでいきましょう📝

オンラインサロン「IT KINGDOM」を運営しています。プログラミングを学びたい方、一緒に勉強する仲間を探したい方にオススメです!
https://it-kingdom.com
※ このサイトも私がReact × Next.js × TypeScriptで作っています

👨‍💻 しまぶー?
・文系未経験から独学でヤフーにエンジニア就職
・Yahoo! JAPANアプリのWebフロントエンド開発チーム
・現在は株式会社GameHintの代表取締役
・オンラインサロン「IT KINGDOM」の運営

📙 もくじ
0:00 Tailwind CSSを学んでいきましょう
0:23 Tailwind CSSとは?
1:41 Tailwind CSSを使う事前準備
2:40 実際にTailwind CSSを使ってみよう
5:05 長所① 命名を考えなくて良い
5:43 長所② 微調整で頭を使わなくて良い
6:39 レスポンシブ対応を見てみよう
9:22 ダークモード対応を見てみよう
10:40 Tailwind CSSで表現できないことは無い
11:01 Tailwind CSSはパフォーマンスも良い
11:38 今後のTailwind CSSの講座について
12:16 オンラインサロンIT KINGDOMについて

🔥この動画だけは見よ!
【CSS #1】基礎からちゃんと学ぶ CSS 入門!基本構文を抑えよう!【ヤフー出身エンジニアが教える初心者向けプログラミング講座】
https://www.youtube.com/watch?v=xBLIzweHYic

【HTML/CSSレイアウト #1】実践的かつデザインも学べるレイアウト講座を開講します【ヤフー出身エンジニアの初心者向けプログラミング講座】
https://www.youtube.com/watch?v=BOWH_7BpO8Q

🌏 SNS
Twitter: https://twitter.com/shimabu_it
Instagram: https://www.instagram.com/shimabu_it
TikTok: https://tiktok.com/@shimabu_it

🏷️ タグ
#css #tailwind #TailwindCSS
2023年/TailwindCSS ver3「インストール・使い方」ゼロから始める:VSCode

プログラミング教育者【遅咲きエンジニア・山崎大助】

総視聴数
221
先月の視聴数
(2023年2月)
-
いいね数
14
公開日
2023年1月21日
🔽Github サンプルURL :
https://github.com/yamazakidaisuke/tailwindcss_youtube/blob/main/setup.txt
▶ 07:25 この時間からインストール開始!

👇前回までの動画👇
🔽Lesson1:https://youtu.be/j_NutYm_chk
🔽Lesson2:https://youtu.be/S4oJXjfcSlk
🔽Lesson3:https://youtu.be/yrL4d6ow0sw
🔽Lesson4:https://youtu.be/rb38-dzcIcw
🔽Lesson5:https://youtu.be/wNm3vPrEVU0
🔽Lesson6:https://youtu.be/8mX3auwlD3o
🔽Lesson7:https://youtu.be/JBNN8TWz6iM
🔽Lesson8:https://youtu.be/0ZImKleAuUY


🔽 プロフィール
Microsoft MVP [ 2013 - 2023 ],
ジーズアカデミー/デジタルハリウッド講師
Twitter: @daisu_yamazaki


🔽関連おススメ動画!!
◆「Chrome デベロッパー ツール:徹底解説.vol1 」
  https://youtu.be/PjZyPfXdJFA
◆12分で解る!「クラウドとレンタルサーバー何がちがうの?!」
  https://youtu.be/GFr6eeY8V7M
◆【JavaScript入門「小さいアプリを作る」楽しく学ぶ!】
  https://www.youtube.com/playlist?list=PLTD8xMSOmM1KH_sFj5hLGLT071xAPwl1h


#css #tailwind #webデザイン

5. まとめ

Tailwind CSSのおすすめ講座を紹介しました。他の関連講座を学びたい方は、下記をご参考ください。

Next.js
HTML CSS
Laravel
Next.js
HTML CSS
Laravel

「自ら機会を創り出し、機会によって自らを変えよ」

株式会社リクルート創業者 江副浩正氏の有名な言葉です。自分の知識やスキルを高めることは、機会を作り出すことに役に立ちます。自らを変えようとしている方にとって、本ページの情報が少しでもお役に立てれば幸いです。

今回紹介したいずれかの講座を受講した後にさらに深掘りして学びたい方は、公式サイトやコミュニティサイトに行くことを、最新の情報をキャッチアップしていきたい方場合は、公式twitterアカウントをフォローすることをおすすめします。

一覧に戻る
Home About Share
Home
About
Privacy policy
Disclaimer
Contact
Official
© 2023 outlecture.com All Rights Reserved.