Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Front-end

Tailwind CSS で作る素敵な Web UI スタイルリング

[Tailwind CSSで作る素敵なウェブUIスタイリング]の講義は、現在最もホットなフレームワークであるTailwind CSS v3.4.1を、理論から実戦的なレスポンシブなウェブサイトまで、19時間にわたって忠実に扱っています。講義時間が長いからといって良い講義ではありません。しかし、この講義は時間の長さだけでなく、良い講義であると自負しています。特に、Tailwind CSSのすべての理論を8時間30分かけて詳細に扱っているので、CSSの理論が不足している人でも、CSSの理論を忠実に学ぶことができます。この講義は、開発者とパブリッシャーが作るTailwind CSSのスタイリングを中心に作成されています。

  • codingworks
css
웹퍼블리싱
강의교안
TailwindCSS
Responsive Web
HTML/CSS

学習した受講者のレビュー

こんなことが学べます

  • 体系的な Tailwind CSS の基本理論の学習と応用

  • Tailwind CSS を使用して Flex と Grid を簡単に使用する方法

  • Tailwind ユーティリティ クラスと CSS のすべてのプロパティ

  • Tailwind CSS を活用した実践的な例の作成

  • 簡単な説明でCSS理論を確実に理解

  • Tailwind CSS のスキルと成果物を必要とする Web パブリッシャー

  • Tailwind CSS を使用して、履歴書とポートフォリオを簡単に紹介する、レスポンシブな Web サイトを作成する

【映像更新のお知らせ】 Tailwind CSS v4.0で正式発売しました。

2025年1月22日にTailwind CSS v4.0に関連する2つのビデオが更新され、PDF教材ファイルも更新されました。アップデート映像とPDF教材ファイルをご確認ください。

▼映像アップデート一覧

  • [アップデート] Tailwind CSS v4.0 CLIのインストールと環境設定

  • [アップデート] Tailwind CSS v4.0カスタムテーマの環境設定

▼教材アップデート一覧

  • [ダウンロード] Tailwind CSSをうまくするための必須事項とコア理論

Tailwind CSSで作る素晴らしいWeb UIスタイリング

「忠実な内容と例に基づいて、19時間の充実した授業内容と授業時間」

「経験豊富なパブリッシャーが知らせるTailwind CSS理論授業8時間30分」

「理論を完成する実践例制作と反応型ウェブページ制作」

「公式サイトのコードをコピーして授業せずにすべてを直接コーディングする授業方式」

「Tailwind CSSのインストールから環境設定、そしてすべての理論を込めたコーディングワークス製作PDF教材」

CSS Frameworks Ranking in 2023

CSS Frameworks Rankingで現在まで着実に人気を享受しており、満足度1位をしているTailwind CSSは最近世界で最もホットなCSSフレームワークです。ホットな理由の中で最も代表的なのがまさにユーティリティクラスを使った創造的なスタイリングができ、また、良いクオリティのデザインを作るための作業時間がかなり早いという点だと考えられます。

🎯 Tailwind CSS公式ウェブサイト:https: //tailwindcss.com/

画像ソース:OSS Insight( https://ossinsight.io/collections/css-framework/)

Tailwind CSS(テールウィンドCSS)とは?

Utility-First を指向する CSS フレームワークにより、CSS プロパティをクラスに直感的に表示することで、迅速かつ効率的に使用できます。

Web UI スタイリングに必要なほぼすべての CSS プロパティが built-in クラスの形であらかじめ決められているので、使用時に決められたクラスをよく組み合わせて使用​​すればよい。

そのため、CSSファイルを別に見ずにHTMLファイルだけを見ながらスタイリングするので集中度が良くなり、また素早く作業できるメリットが際立っています。

  • Utility-First :事前設定されたユーティリティクラスを活用してHTMLコード内でスタイリング

  • 例としてdivにマージン4(1rem)、パディング2(0.5rem)、文字の中央揃えと下線を描こうとすると、クラスに直観的にテールウィンドがあらかじめ決めたクラス名、まもなく、ユーティリティクラスを入れれば良い。

    ...

  • 従来のCSS方式では以下のようにしてきました。

  • div { margin: 1rem; padding: 0.5rem; text-align: center; text-decoration: underline; }

Tailwind CSSと一般的なCSSコードの比較

▲上記のUIを作成すると仮定するとき


▲一般CSS方式のコード


▲ Tailwind CSS方式のコード


Tailwind CSS方式のスタイリングは...

従来のCSS方式はHTMLファイルとCSSファイルを交互に見ながらスタイリングをしなければならない煩わしさがありますが、Tailwind CSS方式にする場合、上記の例のようにHTMLコードだけを見ながらスタイリングをします。

Tailwind CSS方式は同じ結果のスタイリングをしながらも従来のCSS方式に比べてHTMLコードだけを見るので集中度が良く、速度も速い大きな利点を持っています。


コーディングワークスが講義を準備する前にTailwind CSSの最大の欠点と考えていたこと

コーディングワークスがTailwind CSS講義を準備する1年前頃、Tailwind CSSがどんなものなのか、YouTubeの映像を見て、こんなことをしながらパブリッシャーとして2つの心配をしました。

最初の心配は良いですが、同じクラスネームを繰り返し入れてくれるのがあまりにも非生産的でHTMLも汚れてしまいます。書くちょっとそうではないか…と思いました。

しかし、本格的に講義の準備をしながら公式サイトもシャンシャンが遅れてハングル資料はほとんどなく、海外資料、海外YouTube講義を見ながら、より深く学習しながら、上記の心配が大変な心配で深く勉強していない状態で大いに判断したものと考えることになりました。 。以下のように子選択子を使用して、繰り返しクラス名の使用を最小限に抑えることができます。 Tailwind CSSの子選択方法で変更する場合は、ボタンの親要素で一度だけ変更できます。


2番目の心配は、通常のCSSはスタイル一つよく作って必要なところにクラスネームだけ入れて簡単に再使用できるのですが、Tailwind CSSはそうできないのではないか。まもなく、スタイルの再利用ができないと思いました。ただし、以下の例のように、Tailwind CSSのコンポーネントを使用して、通常のCSSスタイルの再利用と同じように使用できます。

私もそうでしたが、ブログや短いYouTubeのビデオでTailwind CSSの欠点だけを見て、私のように無視しないで、もっと深く勉強すればかなりまともなCSS Frameworksということ。に非常に良い競争力になることを知ってほしいです。

他のCSSフレームワークとの違い

BootstrapやSemantic UIなどの既存のCSSフレームワークでデザインを変更しようとすると、細かい修正が難しく、効率も非常に低下します。簡単なデザインを修正しようとしても、開発者ツールで難しく修正する必要があります。しかし、Tailwind CSSは最初から自由度の高いWeb UIスタイリングを可能にするように設計されています。

まもなく、既存のCSSフレームワークはウェブサイトが異なりますが、同様のデザインに見えますが、Tailwind CSSで作れば、製作者によって全く異なるウェブサイトスタイリングが可能です。


Tailwind CSSを短く言うと..

'創造的なスタイリングしながら

制作時間を短縮するNo.1 CSSフレームワーク

いくつかの欠点にもかかわらず、あまりにも大きな利点と魅力を持つTailwind CSS


😊 Tailwind CSSの利点

  • 迅速な開発で開発時間を短縮できる。

  • クラスネームを心配する必要はありません。

  • HTMLだけを見ながら集中しながら作業できる。

  • 一貫性のあるデザインシステムを適用するのに最適です。

  • レスポンシブレイアウト作業は非常に簡単です。

  • コンポーネントの活用で汚れたHTMLコードを補完することができる。

  • メンテナンスが良い。

  • フレームワークの独立性(他のフレームワークとの併用)ex)Bootstrap + Tailwind CSS

😞 Tailwind CSSの欠点

  • 一定のレベルに上がるには時間と労力が必要で、Learning Curveがあります(特に開発者)

  • 韓国語で製作された学習講義が非常に不足して情報を見つけるのが難しい。


  • HTMLコードに同じクラス名が繰り返し使用されます。
    - この部分は講義を通じてTailwind CSS方式の子&子孫セレクタで、その欠点を大幅に解消することができる。

  • 慣れる前まで序盤公式文書依存も高い編任。

  • 便利で高速ですが長くなるHTMLコードで、コードの読みやすさが大幅に低下します。

  • CLIインストール環境を作成してコンパイルする必要がある面倒です。

Q) Tailwind CSS講義受講の対象は開発者ですか? Webパブリッシャーですか?

A)受講対象は開発者、Webパブリッシャーの両方です。また、HTML+CSS 基礎を持つ Web デザイナー、UI/UX デザイナーも受講対象に該当します。

  1. Tailwind CSS理論を勉強する少しの難しさがありますが、思ったよりもランニングカーブはそれほど高くありません。 Tailwind CSS理論の勉強が過ぎると、Web UIの実践パブリッシングの例を制作する際、水の流れのように一四千里で制作することになります。

  2. Tailwind CSSの活用能力とTailwind CSSパブリッシングの成果は、絹開発者の競争力を高めるだけでなく、パブリッシングをしなければならない業務を持つすべての職員に競争力になります。 Tailwind CSSの活用能力が開発者にとってもう少し競争力になるのは、開発者はパブリッシングを必ずしなければならない直軍ではありません。しかし、開発者がパブリッシングをうまくやっているなら、それもきれいにすばやく行うことができれば、Webパブリッシャーよりも競争力があります。

  3. Tailwind CSSの活用能力は、ブートストリップなどの既存のCSS Frameworksの活用能力よりも優先されると考えられています。プロデューサーの能力に応じて、細かくて詳細なCSSデザインがTailwind CSSは可能だからです。

Tailwind CSS講義を聞いたら、このような結果を作ることができます。


▲カードUIデザイン(0) - Dark Modeを作成(ft.SVG)

▲ Card UI Design - Crew Contact List

▲ Card UI Design - Real State Price

▲ Section UI Design - Subscribe Form

▲ Section UI Design - Meet the team

▲ Section UI Design - Login Form

▲ table タグと div タグを使ったきれいなテーブルの作成 (ft. 順序をチェックする仮想クラス理論)

▲Tailwind CSS開発者とパブリッシャーキャリア履歴書&ポートフォリオ紹介レスポンシブWeb制作

🚩コーディングワークスTailwind CSS川の特徴

  • 経験豊富なパブリッシャーが実施するTailwind CSSクラス

  • 充実した内容と例に基づいて、19時間の充実した授業内容と授業時間

  • クラスでTailwind CSS公式サイトからコードをコピーせずに最初からすべてを直接コーディングする方法

  • Tailwind CSS すべての理論内容を扱い、個別に詳しく説明した後、コーディングしながら学習

  • Tailwind CSS理論に基づいてキャリアパブリッシャーも満足する多様できれいなWeb UIの実践例を制作

  • 開発者とパブリッシャー就職と競争力のためにTailwind CSSでキャリア履歴書レスポンシブWeb制作(本物の学習結果)

  • Tailwind CSS CLIのインストールから環境設定、そしてすべての理論を込めたコーディングワークス製作PDF教材

  • レスポンシブキャリア履歴書パブリッシングのためのHTMLワイヤフレーム構造の作成クラス

  • 開発者とパブリッシャーを対象に作成されたTailwind CSS講義

👍授業時間が長い理由
コーディングワークスは国費学院で授業する時もそうでしたが、パブリッシングをうまくするためには必ず体系的なステップが必要だと思います。それで、理論授業の割合が高いしかないと思います。誰でも理論クラスは退屈だと思います。しかし、理論に対する理解もなく例を作っても実力は増えません。

👍コードコピークラスではなく直接コーディングする方法
CSSフレームワークの学習で最もしないことは、公式サイトからHTMLコードをコピーして部分部分を修正することです。そうすれば、そのCSSフレームワークのHTML構造を理解できず、本当の勉強にはなりません。そのため、フレームワークの学習でも、必ずすべてのコードを一つ一つ打たなければなりません。そうしてこそ実力が出ます。

👍 HTMLワイヤフレーム構造を作成するクラス
実践例とレスポンシブキャリア履歴書を作成するためにHTMLワイヤフレーム構造を作成する方法を自分で作成しながら学習します。 Tailwind CSSの場合は、クラスネームをほとんど使用しないため、HTMLワイヤフレーム構造をうまく作成する必要があります。

👍最終結果であるレスポンシブキャリア履歴書を作成する理由
すべての学習の終わりには最終結果が必要です。そうすれば達成感も感じるようになり、実力的にも勉強した理論を実戦に適用する経験が重要です。そこで、レスポンシブキャリアの履歴書を作ります。

📖コーディングワークスが製作したTailwind CSS教材(PDF)

Tailwind CSS教材(PDF)は合計45ページで構成されています。 Tailwind CSS公式サイトで膨大な内容でぜひ!必要なコアだけが分かりやすくまとめました。理論クラスの内容だけでなく、初期設定から本番プロジェクトのためのCLIのインストールと環境設定、そしてHTMLワイヤフレーム構造まで、Tailwind CSS Stylingの詳細が含まれています。

Tailwind CSS公式サイトは英文になっていて特に必須ではない内容が膨大になっており、Tailwind CSS公式サイトを通じて理論を勉強することになると集中度が落ちて学習意欲が折りやすくなります。


📖完成本と参考資料を提供

理論レッスンでは、重要な項目と実践例の完成本、足跡キャリア履歴書&ポートフォリオ紹介レスポンシブWeb完成本を提供します。また、パブリッシングに役立つウェブサイトもまとめて提供されます。理論授業は、コーディングワークスが独自に製作したTailwind CSS教材(PDF)に基づいて授業します。

すべての資料は[セクション5.受講生参考資料のダウンロード]からダウンロードできます。


受講前の注意

  • Tailwind CSS IntelliSenseを必須にする必要があるため、テキストエディタではビジュアルスタジオコードを使用してください。

  • 授業対象が経験のあるパブリッシャーなら理論授業を倍速で見て実戦例制作に行っても大丈夫です。ただし、授業の対象がパブリッシングの基礎が不足している開発者またはパブリッシャーならば、理論の授業を忠実に学習することをお勧めします。

  • 実践例 授業前に[Tailwind CSS(v3.4.1) 理論と実践例の完成本]解凍し、個々のフォルダに images フォルダのみ残して削除して、授業に従います。

選手の知識

  • HTML+CSS 基礎程度だけ知っていればいいです。

注意事項

  • ReactやVueなどのJavaScriptフレームワークでのTailwind CSSのインストールと使用については、クラスでは扱いません。

  • 申し訳ありませんが、質問時にReactまたはVue環境でTailwind CSSを使用することに関する質問をしても、ReactまたはVue環境をよく知らないため、回答できません。

  • クラスで扱ったTailwind CSSに関する質問と一般的なCSSのプロパティと活用に関する質問だけをしていただきありがとうございます。

ビジュアルスタジオコードの使い方

該当講義はビジュアルスタジオコード(Visual Studio Code)で制作された講義です。ビジュアルスタジオコードは、使用制限のないフリープログラムです。すべてのレッスンビデオは、ビジュアルスタジオコードベースで説明されています。

以下のコーディングワークスのYouTubeビデオを使って基本的な使い方をまず理解し、<セクション1. [Tailwind CSSコア理論]基本要素の取り扱い(ver 3.4.1)>を学習してください。

  • ビジュアルスタジオコード(Visual Studio Code)の使い方と環境設定(ビデオを見る)

  • ビジュアルスタジオコード(Visual Studio Code)でのEmmetの使い方(ビデオを見る

  • ビジュアルスタジオコード(Visual Studio Code)必須拡張機能のインストールと使用法(ビデオを見る)

  • ビジュアルスタジオコードでCSSを変更したときに上がるフルリロードを防ぐ(ビデオを見る)

公式サイトからビジュアルスタジオコード(Visual Studio Code)をダウンロードする(クリック)

  • Live Sass Compilier ExtensionのインストールビデオはYouTubeにはありませんが、必ずインストールしてください。

  • 理論学習前に必須エクステンションを設置しておいて、簡単に練習してみると授業をはるかにスムーズにできます。

🖐よくある質問

下記の予想質問以外の質問は、該当講義コミュニティ質問掲示板に残していただければ最善を尽くしてご回答いたします。

Q) HTML+CSS選手の知識がどのくらい必要ですか?
HTML+CSS 奇跡的な使用経験であればフォローでき、期待するほどの実力と結果を得ることができます。

Q. 受講に関する注意事項(必要な環境、その他の留意事項など)はありますか?
授業内容が多く、スピード感があります。だからといって十分な説明なしで通り過ぎずに詳細に説明します。よく従うと思います。理論レッスンの前に、ビジュアルスタジオコードの基本的な使い方は必ず身につけておいてください。

可能であれば、デュアルモニター環境を整えることをお勧めします。理論クラスは関係ありませんが、最後のセクションでキャリア履歴書レスポンシブWebを作成するとき、シングルモニターは少し不便かもしれません。

Q) CSS Frameworksの使用経験が全くないのに大丈夫でしょうか?
まったく関係ありません。 Tailwind CSSは、既存のフレームワークとまったくシステムが異なるため、一般的なパブリッシングを学習すると考えてください。

Q)授業を聞いてCSS理論をもっと勉強するにはどうすればいいですか?
この場合、コーディングワークスのYouTubeチャンネルでCSSの理論の大部分を扱うので、必要に応じてコーディングワークスのYouTubeチャンネルで目的の項目を検索して勉強してください。

コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。

コーディングワークスパブリッシングYouTubeチャンネル: https: //www.youtube.com/codingworks

知識共有者の紹介

[Tailwind CSSで作る素晴らしいWeb UIスタイリング]講義を作成しました コーディングワークスは現在までに300人以上の国費パブリッシングコースの学生にパブリッシング理論、活用、個人ポートフォリオホームページ制作講義を行っています。特に、パブリッシャー就職のためのすべての準備過程をAからZまで完全にガイドしながら、学生のほとんどのコース終了後すぐに就職ができるように、長年にわたりパブリッシング講義だけが専門的にやってきた講師です。また、Inflearnでパブリッシング関連講義を進めながら、Inflearn受講生の方々にも役に立ったとの評価も受けています。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 体系的な Tailwind CSS の基本理論の学習と応用が必要な方

  • CSS を簡単にアクセスして活用したい開発者

  • Tailwind CSS の使用能力を追加して、就職転職競争力を高めたいパブリッシャー

  • レスポンシブな開発者経歴書を作成したい方

  • レスポンシブなウェブ パブリッシャーの履歴書を作成したい方

前提知識、
必要でしょうか?

  • HTML+CSS の基礎

こんにちは
です。

12,542

受講生

738

受講レビュー

2,105

回答

4.9

講座評価

23

講座

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

カリキュラム

全体

52件 ∙ (19時間 29分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

24件

5.0

24件の受講レビュー

  • pcdoomco4님의 프로필 이미지
    pcdoomco4

    受講レビュー 3

    平均評価 5.0

    5

    8% 受講後に作成

    이번에 새로운강의가 또나와 구입하게되었습니다. 항상 강의의 디테일이 증명해주듯 수박의겉핥기가아닌 끝짱을보자란 식으로 매우 디테일하게 강의가 진행되는방식은 적어도 웹퍼블관련강좌는 코딩웍스가 정답이구나를 느꼈습니다. 정말다른강사의 강의를 찾아볼필요가없이 이강좌하나만제대로 소화하면 실력이 확실히 쌓이는걸 체감하면 코딩웍스 팬이 안될수가없네요 이번강좌도 잘 듣겠습니다.

    • 코딩웍스(Coding Works)
      知識共有者

      첫번째 수강평 감사합니다!!

  • 공부벌레님의 프로필 이미지
    공부벌레

    受講レビュー 6

    平均評価 4.8

    4

    100% 受講後に作成

    실습 강의를 보고 그대로 따라해도 틀린 부분이 존재합니다~ 또 실습 강의 도중 중간에 변경 내용이 있을 때 다시 수정을 하시는데 제 작업중인 코드, 웹 창과 강의 영상, 강의 영상의 소스코드 한번에 4개의 화면을 계속 돌아가면서 보려니 피로감이 심합니다~ 강의 내용이 순차적으로 정리되었으면 더 좋았을 것 같아요. 하지만 그럼에도 불구하고 tailwind css를 배우기에는 정말 좋은 강의입니다.

  • Thomas님의 프로필 이미지
    Thomas

    受講レビュー 46

    平均評価 4.7

    5

    100% 受講後に作成

    많은 도움이 되었습니다.

  • My Dream님의 프로필 이미지
    My Dream

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    이번 강의는 저에게 큰 도움이 되었습니다. Tailwind CSS에 관심 있는 분들께 추천드립니다. 개인적으로는 TailwindCSS 실전 응용편 강의를 요청드리고 싶습니다. 이전에 수강한 "SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트"와 같은 실전 강의를 부탁드립니다. (Tailwind CSS가 저에게 딱 맞는 CSS 인것 같아서요.^^)

  • 박정식님의 프로필 이미지
    박정식

    受講レビュー 39

    平均評価 5.0

    5

    100% 受講後に作成

    고생하셨습니다.

    • 수강평 감사드립니다. 강의 오픈 일주일도 안되서 100% 달성하셨네요. 대단하십니다!!

¥9,038

codingworksの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!