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

/

Web Publishing

Tailwind CSS 実践ポートフォリオの公開

[Tailwind CSS実践ポートフォリオパブリッシング]は、Tailwind CSSを活用して26種類以上の実践例を製作する過程です。実践例を素早く多様に制作することで、その中で必須の理論を説明します。この講義は、開発者とパブリッシャーが作成するTailwind CSSスタイリングを中心に作成されました。

  • codingworks
실습 중심
TailwindCSS
HTML/CSS

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

こんなことが学べます

  • Tailwind CSS を活用したさまざまな実践例の作成

  • Tailwind CSS 独自の簡単モバイル対応レスポンシブ作業

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

  • 簡単な説明で Tailwind CSS の理解度を高める

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

  • Flex を使用して簡単にレスポンシブな Web サイトを作成する

  • Tailwind CSS を使用してさまざまなフォームを作成する

【動画更新ニュース】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特別属性の整理とHTMLワイヤフレーム構造

Tailwind CSS本番ポートフォリオパブリッシングオープン

実戦例制作だけでTailwind CSS実務能力向上!


Tailwind CSSを活用して26種類以上の実践例を製作する過程です。実践例を素早く多様に制作することで、その中で必須の理論を説明します。この講義は、開発者とパブリッシャーが作成するTailwind CSSスタイリングを中心に作成されました。

Webパブリッシュと開発者にとって、就職と転職のために大きな助けになると思います。

❤Tailwind CSS本番ポートフォリオパブリッシング

Tailwind CSS本番ポートフォリオパブリッシングは、実践例の制作プロセスでのみ構成されています。だから退屈ではないので、Tailwind CSSの本当の楽しみを感じることができます。実戦例を一つずつ作っていきながらTailwind CSSの実力も向上し、Tailwind CSSで製作した実戦例を個人ポートフォリオにワークとして残すことができます。

合計14時間以上の講義時間と同じくらい忠実な内容と体系的な理解を助ける理論の説明で製作されたTailwind CSSポートフォリオ本番制作映像を学習できるようになります。


川の主な特徴

  • 26以上の多様なTailwind CSS本番サンプル制作(完成版のプレビュー映像参照)

  • HTMLワイヤフレーム構造の製作過程を詳細に実戦を通じて示します。

  • HTMLワイヤフレーム構造の作成能力を向上させることで、パブリッシングのスキルを最大化することができます。

  • Webパブリッシングに役立つさまざまな参考資料を提供する

講義の主なセクション

  1. Tailwind CSS CLI環境の構築と注意事項

  2. Tailwind CSSの実践例 - ナビゲーション

  3. Tailwind CSS実践例 - カード(Card)UIデザイン

  4. Tailwind CSS 実践例 - セクション UI デザイン

  5. Tailwind CSSの実践例 - タブメニューコンテンツ(Tab Menu Content)

  6. Tailwind CSSの実践例 - ログインフォーム(Login Form)デザイン

CSS Frameworks Ranking in 2024

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

Tailwind CSSを短く言うと..

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

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


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

Tailwind CSSは最近開発者に求められています

優遇事項を超えて今は支援資格です。




🚩講義に関する予想される質問 & 必読事項


Q. Tailwind CSSの実践ポートフォリオパブリッシングは、理論講義を聞かずにすぐに受講できますか?

  • Tailwind CSSが初めての場合は、コーディングワークスの講義中に「Tailwind CSSで作る素晴らしいWeb UIスタイリング」という理論講義を聞いて、その講義を受講してください。

  • その講義をすぐに受講する場合は、 Tailwind CSS公式サイトを先に学習し、公式サイトを並行しながら学習してください。

  • Tailwind CSSで作る素晴らしいWeb UIスタイリングレッスンの紹介: https://inf.run/pjqKk



Q. Tailwind CSS本番ポートフォリオパブリッシングで作成された完成したHTMLを提供しますか?

  • はい。受講生の参考資料ダウンロードセクションでは、ビデオで作成されたすべての実践例の完成した本を含む圧縮ファイルを入手できます。 (HTML、CSS、JS、画像、参照サイト、ソーステキスト、ワイヤフレームPDFなど)

  • 講義ビデオの開始前にダウンロードした圧縮ファイルをプッシュして、index.html、style.cssファイルを削除して開始してください。ソースフォルダとimagesフォルダを除いて、HTMLの基本構造から作成してください。もし完成版を参照する必要がある場合は、いつでも圧縮ファイルを解凍してみてください。


Q. 受講前に先行するウェブコーディング能力はどのくらいですか?

  • まず、HTML + CSSの基本的な理解が必要です。たとえば、float、position 属性の理解が不足している方はついてきてちょっとめちゃくちゃです。この講義は基本的なパブリッシング能力を持つ方々を念頭に置いて製作された講義です。参考にしてください!

  • JQueryやJavaScriptの先行能力はあまり必要ありません。ただし、ジェイクエリの不可欠なコア理論の理解が必要です。クラス制御、要素ナビゲーションなど、講義全体でジェイクエリーベースで相互作用を作っており、JavaScriptは例を経験する面で使用するため、JavaScript能力に対する負担はありません。



Q. 例の学習順序は、最初から順に学習するのですか?

  • サンプル学習では、順序を守る必要はありません。ご希望のセクションから学習してください。


  • セクションによる難易度はあまり決まっていません。学習したい例を個別に選別的に学習しても構いません。


  • [TMI] パブリッシングを勉強して実践例を製作する際に知っておくべき理論がとても多いです。心のような理論的な部分をすべてまとめて映像を作りたいのですが、現実的に難しい部分があります。 Tailwind CSS公式サイトを通じて不足している部分は満たしてください。


Q. 実践例 完成本と理論例 完成本はどこからダウンロードできますか?

  • レッスンビデオで作成されたすべてのコンプリートファイル(html、css、js、画像ファイルなど)は、下の最後のセクション(セクション8)にすべてのコンプリートをダウンロードできます。


💻 Tailwind CSS本番サンプル制作結果のプレビュー


▲ Tailwind CSS グラデーション


😊 Tailwind CSS本番の例 - ナビゲーション


▲ナビゲーション - 一般型上部ナビゲーション(3種類)


▲ナビゲーション - 反応型トップナビゲーション


▲ナビゲーション - ソーシャルメディアアイコンホバーナビゲーション


▲ナビゲーション - カスタムドロップダウンセレクト


▲ナビゲーション - サイドバーアイコンナビゲーション


😊 Tailwind CSS本番の例 - カード(Card)UIデザイン



▲カードUIデザイン - figureカードホバーエフェクト(groupセレクタの使い方)


▲カードUIデザイン - 新商品カードUIデザイン


▲カードUIデザイン - プロフィールカードホバーフリップ(3D Card Flip)


▲カードUIデザイン - Apple TV購読プランを選択(:has仮想クラス)


😊 Tailwind CSS 実践例 - セクション UI デザイン


▲セクションUIデザイン - グラスモフィズム(Glassmorphism)ログインフォーム


▲セクションUIデザイン - アニメモーダル(Modal)


▲セクションUIデザイン - チケットカードUI(Frontend Online Class)


▲セクションUIデザイン - テーブルデザイン(Premier League)


▲セクションUIデザイン - アコーディオンコンテンツ with Emoji

▲セクションUIデザイン - モバイルプラン画面(ホバーツールチップ)


▲セクションUIデザイン - Dark Modeの作成(ft.SVGの使い方)


▲セクションUIデザイン - レスポンシブスキル紹介セクション


▲セクションUIデザイン - ニュース紹介カードサムネイルセクション(Latest news)


▲セクションUIデザイン - Webホスティングプラン価格表(Price Plan)


▲セクションUIデザイン - ウェディングレスポンシブイントロセクション(Testimonial Intro)


😊 Tailwind CSS実践例 - タブメニューコンテンツ(Tab Menu Content)


▲タブメニューコンテンツ - タブメニューコンテンツ(CSS方式、JQUERY方式)


▲タブメニューコンテンツ - 男女区分デートアプリタブメニュー


😊 Tailwind CSS実践例 - ログインフォーム(Login Form)デザイン


▲モバイルアプリ壁紙アニメーションログイン


▲レスポンシブコンタクトフォーム - Contact Form


▲パスワードを見て隠すログインフォーム


▲CSS検証コンタクトフォーム - Dark Mode

セクション1.講義の紹介

  • [講義紹介] Tailwind CSS本番ポートフォリオパブリッシング

  • [実用例のプレビュー] Tailwind CSS本番ポートフォリオパブリッシング

セクション 2. Tailwind CSS CLI 環境の構築と注意事項

  • CDN環境でTailwind CSSユーティリティクラスを使用する

  • CDNおよびCLI環境でTailwind CSS Configを変更する(ft. Webフォント)

  • Tailwind CSSでCLI環境を構築する(ft. Node.js)

  • CLI環境でのユーティリティクラスの使用とWebフォントの利用

  • 実践例制作のための準備とグラデーションの使用(背景、テキスト)

セクション 3. Tailwind CSS 実践例 - ナビゲーション

  • ナビゲーション - 一般型上部ナビゲーション(3種類)

  • ナビゲーション - レスポンシブトップナビゲーション

  • ナビゲーション - ソーシャルメディアアイコンホバーナビゲーション

  • ナビゲーション - カスタムドロップダウンセレクト

  • ナビゲーション - サイドバーアイコンナビゲーション

セクション 4. Tailwind CSS 実践例 - カード (Card) UI デザイン

  • カードUIデザイン - figureカードホバーエフェクト(グループセレクタの使い方)

  • カードUIデザイン - 新製品カードUIデザイン

  • カードUIデザイン - プロフィールカードホバーフリップ(3D Card Flip)

  • カードUIデザイン - Apple TVサブスクリプションプランの選択(:has仮想クラス)

セクション 5. Tailwind CSS 実践例 - セクション UI デザイン

  • セクションUIデザイン - Glassmorphismログインフォーム

  • セクションUIデザイン - アニメーションモーダル

  • セクション UI デザイン - チケットカードUI (Frontend Online Class)

  • セクションUIデザイン - テーブルデザイン(Premier League)

  • セクションUIデザイン - アコーディオンコンテンツ with Emoji

  • セクションUIデザイン - モバイルプラン画面(ホバーツールチップ)

  • セクションUIデザイン - Dark Modeの作成(ft.SVGの使い方)

  • セクションUIデザイン - レスポンシブスキル紹介セクション

  • セクションUIデザイン - ニュース紹介カードサムネイルセクション(Latest news)

  • セクションUIデザイン - Webホスティングプラン価格表(Price Plan)

  • セクションUIデザイン - ウェディングレスポンシブイントロセクション(Testimonial Intro)

セクション 6. Tailwind CSS 実践例 - タブメニューコンテンツ (Tab Menu Content)

  • タブメニューコンテンツ - タブメニューコンテンツ(CSS方式、JQUERY方式)

  • タブメニューコンテンツ - 男女別のデートアプリタブメニュー

セクション7. Tailwind CSSの実践例 - ログインフォーム(Login Form)デザイン

  • モバイルアプリの壁紙アニメーションログイン

  • レスポンシブコンタクトフォーム - Contact Form

  • パスワードを表示隠すログインフォーム

  • CSS検証コンタクトフォーム(1) - Light Mode

  • CSS検証コンタクトフォーム(2) - Dark Mode

セクション8. [ダウンロード]完成した本と参考資料をダウンロードする

  • [ダウンロード] Tailwind CSS本番の例 完成版のコレクション

  • [参考資料] Tailwind CSS特別属性の整理とHTMLワイヤフレーム構造

  • [参考資料]ビジュアルスタジオコード(Visual Studio Code)必須設定

知識共有者の紹介

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

インフォーカスインタビューを見る:https: //www.inflearn.com/pages/infocus-8-20230704

こんな方に
おすすめです

学習対象は
誰でしょう?

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

  • Tailwind CSS を簡単にアクセスして活用したい Web パブリッシャー

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

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

  • HTML+CSS の基礎

こんにちは
です。

12,541

受講生

737

受講レビュー

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

カリキュラム

全体

42件 ∙ (14時間 35分)

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

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

受講レビュー

全体

4件

5.0

4件の受講レビュー

  • segun408님의 프로필 이미지
    segun408

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    講義してくださるのに苦労しました。 よく見ました! :)

    • codingworks
      知識共有者

      初受講ありがとうございます。

  • zzolyoon70313님의 프로필 이미지
    zzolyoon70313

    受講レビュー 9

    平均評価 5.0

    5

    53% 受講後に作成

    私は、安易に判断することを好まないため、100%受講してから書こうと思っていたのですが、とても気に入って成長している自分を見て、Coding Worksという人が本当にすごいし、かっこいい、最高に見え始めました。 私は、1つの講義または1つの内容の起承転結が明確であるべきだと考えていますが、この人はそのような起承転結をうまく表現していると思います。 これから、おいしいものを少し減らして、Coding Worksさんの最新の講義に投資しようと思います。本当に、学習している間ずっと幸せで、タップダンスを踊らせたくなるような講義です。素晴らしい講義、素晴らしい作品を作ってくれてありがとうございます。 Coding Worksさん、そしてこのレビューをご覧になった皆さん、皆さんもよい一日をお過ごしください!

    • codingworks
      知識共有者

      受講評価ありがとうございます!!

  • shtnwls11111101님의 프로필 이미지
    shtnwls11111101

    受講レビュー 4

    平均評価 5.0

    5

    69% 受講後に作成

    • codingworks
      知識共有者

      受講レビューありがとうございます

  • provenceblue14984572님의 프로필 이미지
    provenceblue14984572

    受講レビュー 1

    平均評価 5.0

    5

    55% 受講後に作成

    私だけが知っておきたい講義ですね^^ 面白いです。ありがとうございます。❤️

    • codingworks
      知識共有者

      受講レビューありがとうございます!!

¥6,502

codingworksの他の講座

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

似ている講座

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