2026/05/22(金)21:00 〜 23:00

【CeeBeeDee】これから覚えるTailwind CSS／こもりまさあき

Name: 【CeeBeeDee】これから覚えるTailwind CSS／こもりまさあき
Start: 2026-05-22T12:00:00+00:00
End: 2026-05-22T14:00:00+00:00

オンライン

CSS, Figma, Meetup

イベント内容

Tailwind CSSの基本や押さえておきたい特徴を中心に、TailwindベースのFigmaファイルを作成する方法までをこもりまさあきさんに解説いただきます。

本イベントは有料イベントとして開催します。

無料での配信は行わず、お申し込みいただいた方のみに配信URLをお知らせします。
アーカイブ（と当日の配信）はサブスクの対象ですが、こもりまさあきさんの「Tailwind CSS v4 実践ガイド」講座（7,700円）は付属しません。

これから覚えるTailwind CSS

非エンジニアでも、AIエージェントや各種サービスを活用すれば、プロンプトで指示するだけで手軽にモックアップを作成できる時代になりました。

サイトやアプリの画面をコード化するサービスの多くは、特別な技術仕様を指定しない限り、「Tailwind CSS」をベースにレイアウトやデザインを構築します。そのため、Tailwind CSSの基本を少しでも理解しておくと、プロンプトだけでは意図がうまく伝わらない場合でも、自分で簡単に調整できるようになります。

今回は、Tailwind CSSの基本や押さえておきたい特徴を中心に、TailwindベースのFigmaファイルを作成する方法まで解説します。

アジェンダ

AIが Tailwind CSS を好む理由（5分）
他のCSSフレームワークと何が違う？（5分）
ユーティリティファースト？（5分）
まずは自分で書いてみよう（10分）
今度はAIに書いてもらおう（10分）
できたコードを確認してみよう（10分）
VSCodeの拡張機能とコード補完（5分）
（休憩）
覚えておきたいサイズの法則（5分）
答えはすべて公式サイトに（5分）
クラス名の意味するところ（5分）
プリフィクスを使ってできること（10分）
Figmaのファイルはこう作れ（10分）
既存のCSSをTailwind に移植できる？（10分）
AIにコードを書かせるときの注意点（5分）

特典

本イベントには、こもりまさあきさんの「Tailwind CSS v4 実践ガイド」講座（7,700円）が付属します。

こもりまさあき

写真：

1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行して従事。2001年退職。以降フリーランスとして活動。案件ごとに業務内容などが異なるため、職域的な肩書きはなし。Web制作関連書籍の執筆多数。近年はフロントエンド周りの制作業務に関わりながら、Figmaの企業研修講師やデザインシステム構築、その他Shopifyの運用サポートやコンサルティング業務など幅広く活動中。

イベント概要

YouTube Liveでライブ配信します。

開催日：2026年5月22日（金） 21:00 - 23:00
形式：オンライン（YouTube Live）
MC：鷹野雅弘（スイッチ）
主催：CeeBeeDee
共催：CSS Nite、DTP Transit
協賛（制作会社）：ウェブライダー、LINICA、エンタミナ、コンセント、サービシンク、ビットエー、ヘルツ、アップルップル、CODE54、HAMWORKS、S-FACTORY、necco、FLAT、ONiWA ほか
協賛：文賢（ブンケン）、デジ革（一般社団法人デジタル経営革新協会）

お申し込みと参加費

本イベントは有料イベントとして開催します。
サブスクの対象イベントです。

フォローアップ（アーカイブ）

有料チケットには次が含まれます。これを「フォローアップ」と呼んでいます。

アーカイブ動画
スライド
リンク集や補足
サンプルファイルなど（プログラムにより）

フォローアップ（アーカイブ）は、アーカイブ購入／サブスクの方限定のコンテンツです。

アーカイブ動画の視聴期限はありません。ずっと見られます。
法人およびフリーランスで事業決済される方は「法人向け」をお求めください。

フォローアップ（アーカイブ）の購入

次の2つの方法があります。いずれかを選択なさってください。

終演時刻まで：Doorkeeper
サブスクを登録する

領収書

終了後にご案内するNotionからPDFをダウンロードしてご利用ください。

配信に関してのあれこれ

各URLは、YouTubeの概要欄にも掲載しています。

チャットやスタンプ、ツイートなど「参加型」でお楽しみください！
「音声のバランスが悪い」など、何かお困りの場合、コメントなどで教えてください！

YouTube関連

YouTubeチャットを活用ください！　スパム回避のため、YouTubeチャンネル登録者のみがコメント可能にしていますので、事前にチャンネル登録をお願いします。
質問がある場合、YouTubeチャットで冒頭に★または【質問】を付けてコメントください。すべては拾いきれません。「〜は〜という意味です」「自分の現場ではこうやっている」など、視聴される方からのサポート的なコメントを歓迎します！　一緒に場を作ってくださいますと嬉しいです!!

その他

120分のプログラムでは、60分前後のキリのいいタイミングで休憩（5-10分）をはさみます。
サンプルファイルや配布資料、アーカイブ動画のURLをSNSなどで再配布するのは禁止です。
開演の30分前くらい前からテスト配信をスタートします。音声などが聞こえるかなど、チェックなさってください。
スマホやタブレットで視聴される方もいると思いますが、PCでの視聴を前提としています。なるべくPCでご覧ください！
ご覧いただく回線状況によっては、YouTubeの動画が止まってしまったり、音声が途切れてしまうことがあります。その場合には、ブラウザーを再読み込みしたり、OSを再起動してみてください。同時配信しているX（Twitter）の方が安定してることがあります。
分単位で細かく練られたカリキュラムではなく、少し緩めに進行します。コメントを拾って脱線することもあります。言い換えると学習だけをされたい方には向いていません。
若干の延長など、ぴったり進行しないことがあります。

配信準備は念入りに行っていますが、本番になると予期せぬトラブルが生じるのがライブ配信です。それも含めて楽しんでください。