BEGIN:VCALENDAR VERSION:2.0 PRODID:-//https://techplay.jp//JP CALSCALE:GREGORIAN METHOD:PUBLISH X-WR-CALDESC:“コンポーネント” が登場してCSS設計はどう 変わったか？ X-WR-CALNAME:“コンポーネント” が登場してCSS設計はどう 変わったか？ X-WR-TIMEZONE:Asia/Tokyo BEGIN:VTIMEZONE TZID:Asia/Tokyo BEGIN:STANDARD DTSTART:19700101T000000 TZOFFSETFROM:+0900 TZOFFSETTO:+0900 TZNAME:JST END:STANDARD END:VTIMEZONE BEGIN:VEVENT UID:938996@techplay.jp SUMMARY:“コンポーネント” が登場してCSS設計はどう変わ ったか？ DTSTART;TZID=Asia/Tokyo:20240516T210000 DTEND;TZID=Asia/Tokyo:20240516T230000 DTSTAMP:20260528T154624Z CREATED:20240317T140233Z DESCRIPTION:イベント詳細はこちら\nhttps://techplay.jp/event/93899 6?utm_medium=referral&utm_source=ics&utm_campaign=ics\n\nSTORESにてア ーカイブ（スライド・動画）を購入できます。「アー カイブを見たい方」「申し込みそびれてしまった方」 はご利用ください。https://ceebeedee.stores.jp/items/65eb40cfb7ac 33233a27131c\n\nコンポーネント時代におけるCSS設計につい て、半田 惇志さんに解説いただきます。\n\n「当日の 視聴は無料」スタイルで開催します。ぜひ、ご参加く ださい！\n\n“コンポーネント” が登場してCSS設計は どう変わったか？\n\nCSS設計がウェブ制作の現場で使わ れ始めてから久しいですが、CSS設計が考案された時代 はウェブ制作の開発環境は比較的シンプルでした。し かし現代のウェブ制作の開発環境の選択肢はとても多 く、また複雑化しています。中でもJSフレームワーク 等による “コンポーネント” という概念の登場によ り、BEMなど従来のCSS設計をいつまで、ないし、どの程 度利用すべきか迷っている方が多いのではないでしょ うか。\n\n本セッションではBEMやTailwindなどのスタイリ ングに対するさまざまなアプローチはもちろん、CSSをJ avaScriptで処理するビルド環境の話も交えて、コンポー ネント時代においてCSSをどのように管理するとよいか を解説します。\n\n 半田 惇志 フロントエンドエンジ ニア 兼 HubSpotテクニカルエキスパート フロントエン ドエンジニアとしては特にコンポーネント設計に強く 、PRECSS並びに『CSS設計完全ガイド』の生みの親。 HubSp otにおいてはCRMの導入支援からデータ設計、マーケテ ィングオートメーションフローのセットアップ、CMSに よるサイト構築まで、フルスタックに対応している。\ n\n聞き手、MC（進行）\n\n鷹野 雅弘（CeeBeeDee/CSS Nite/DTP T ransit）が“聞き手”を担当し、リアルタイムでチャッ トでの質問などを拾っていきます。\n\n鷹野 雅弘（た かの・まさひろ）株式会社スイッチグラフィックデザ イン、エディトリアルデザイン、ウェブ制作の分野で 、デザイン、オペレーション、設計・ディレクション など、25年以上、第一線で手を動かし続けている。そ のノウハウをテクニカルライティングや講演に落とし 込み、「制作→執筆→講演」のサイクルを回す。2015年 から大阪芸術大学 客員教授。 2017年からAdobe Community Eva ngelist。CSS NiteやDTP Transitのオンラインセミナーのオー ガナイザーとして企画・制作・配信なども担当。Twitter ：@swwwitch\n\nイベント概要\n\nYouTube Liveでライブ配信し ます。\n\n\n開催日：2024年5月16日（木） 21:00 - 23:00\n形 式：オンライン（YouTube Live）\nMC：鷹野 雅弘（スイッ チ）\n主催：CeeBeeDee\n共催：CSS Nite、DTP Transit\n協賛（制 作会社）：ウェブライダー、LINICA、エンタミナ、コン セント、サービシンク、ビットエー、トゥーアール（t o-R）、ヘルツ、アップルップル、CODE54、HAMWORKS、S-FACTOR Y、necco、FLAT、ONiWA\n協賛：文賢（ブンケン）、KDDIウェ ブコミュニケーションズ、一般社団法人ウェブコンサ ルタント・ウェブアドバイザー協会、JILLA（日本イラ ストレーション協会）\n\n\nお申し込みと参加費\n\n\n当 日の視聴は無料です。\n参加にはお申し込みが必要で す。受け付けは終演時刻まで。\n\n\nフォローアップ（ アーカイブ）\n\nスライドなどのフォローアップ（アー カイブ）は、アーカイブ購入／サブスクの方限定のコ ンテンツです。\n\nフォローアップ（アーカイブ）の購 入\n\n次の3つの方法があります。\n\n購入方法金額受け 取り備考終演までその後Doorkeeper（単品）2\,200円-開催 翌日にメールを送信「当日の視聴のみ」のチケットを 申し込まれた方は、いったん、キャンセルして「アー カイブ視聴付き」のチケットを申し込んでください。S TORES（単品）2\,200円3\,300円購入するとダウンロードで きるテキストファイルに、アーカイブ動画や特典を掲 載予定のページへのリンクがあります（アーカイブ動 画や特典の掲載はイベント終了後）ユーザー登録して から申し込むと、［マイページ］の［購入履歴］から 、後からダウンロードできます。サブスク1\,500円（月 ）［メンバー限定］セクションの［フォローアップ（ アーカイブ）］から本イベントのNotionにアクセスして ください。法人は別途\n\n「サブスク」をはじめます\n\ nCSS Nite、DTP Transitのオンラインセミナーのアーカイブ を管理しやすく利用いただけるように、2024年2月の開 催分から次のように変更します。 \n\n\nアーカイブ見放 題の「サブスク」：Circle\n単品での購入：STORES \n\n\n「 サブスク」（定額サービス）の仕組みによってコスパ よく利用いただけます。 ライブ配信は、従来通り「当 日の視聴は無料」スタイルを継続します。「サブスク 」の加入にかかわらず、誰でも見られます。 \n\nなお 、Circle、STORESにおいて、CSS NiteとDTP Transitの両方をカバ ーするブランド名として「CeeBeeDee（シー・ビー・ディ ー）」を使いはじめます。\n\n\n\nサブスクの有無にか かわらず、開催情報などをCircleに集約していきます。\ n\n配信に関してのあれこれ\n\n各URLは、YouTubeの概要欄 にも掲載しています。\n\n\nチャットやスタンプ、ツイ ートなど「参加型」でお楽しみください！\n「音声の バランスが悪い」など、何かお困りの場合、コメント などで教えてください！\n\n\n配信URL\n\nYouTube Liveで配信 します。\n\nhttps://youtube.com/live/xXO5tNiTKCw?feature=share\n\nX （Twitter）にて同時配信も行っていますが、YouTube Liveに てコメントも含めてお楽しみください。\n\nYouTube関連\n \n\nYouTubeチャットを活用ください！　スパム回避のた め、YouTubeチャンネル登録者のみがコメント可能にして いますので、事前にチャンネル登録をお願いします。\ nスーパーチャット（スパチャ＝投げ銭）を利用できま す。少額でも大歓迎です！　いただいた全額を講演者 にお渡しします。\n質問がある場合、YouTubeチャットで 冒頭に★または【質問】を付けてコメントください。 すべては拾いきれません。「〜は〜という意味です」 「自分の現場ではこうやっている」など、視聴される 方からのサポート的なコメントを歓迎します！　一緒 に場を作ってくださいますと嬉しいです!! \n\n\nリアク ションや質問\n\n\nCommentScreenを使って、画面上にスタン プを送信できます。スマホだけでなく、PCからも送信 可能。ただし、CommentScreenのコメント機能は使っていま せん。\nスクショ付きのツイート歓迎です。ぜひ、ハ ッシュタグ（#コンポーネント時代のCSS設計）を付けて ください。ただし、事例の部分などでNGマークがつい ている箇所、講演者からNGの指示のある箇所はご遠慮 ください。\n終了後、ぜひアンケートにお答えくださ い！　「フィードバックはギフト」。話してくださっ た方の成長の材料になり、また、イベントの改善につ ながります。\n\n\nその他\n\n\n「UDトーク」にて文字情 報を提供しますので、別のブラウザーなどでご覧くだ さい。タイムラグや精度についてはご容赦ください。\ nサンプルファイルや配布資料、アーカイブ動画のURLを SNSなどで再配布するのは禁止です。\n開演の30分前くら い前からテスト配信をスタートします。音声などが聞 こえるかチェックなさってください。\nスマホやタブ レットで視聴される方もいると思いますが、PCでの視 聴を前提としています。なるべくPCでご覧ください！\n ご覧いただく回線状況によっては、YouTubeの動画が止ま ってしまったり、音声が途切れてしまうことがありま す。その場合には、ブラウザーを再読み込みしたり、O Sを再起動してみてください。\n\n\n配信準備は念入りに 行っていますが、本番になると予期せぬトラブルが生 じるのがライブ配信です。それも含めて楽しんでくだ さい。\n\nオンライン椅子ヨガ\n\n本イベントはコモモ 先生 @komomoaichi のオンライン椅子ヨガ付きです！\n\n\n 開演前\n休憩時間（適宜）\n\n\n一緒に「ちょっとメン テ」しましょう。\nhttps://chotto-maint.com/online-yoga\n\n\n\n方 向性\n\n「オンラインセミナー」や「ウェビナー」とい うより「オンラインイベント」的なニュアンスです。\ n\n\nいわゆる「セミナー」ではなく、「オンラインイ ベント」です。\nあえて「教えることを生業にしてい ない方」を（多めに）ブッキングしています。“聞き 手”を立てることによってフォローしながら進めます が、それでも説明が足りなかったり、うまく時間配分 をコントロールできないことがあります。\nまた、「 オンラインで画面に向かって一人で喋る」のは場数を 多く踏まない限り、苦行です。そこで聞き手を立て、 うなづきや相づちを入れています。「うなづきがうる さい、不要」と思う方もいると思いますが、ご容赦く ださい！（録画の講座ではなく、オンラインイベント なのです）\n「当日の視聴は無料」ということは謝礼 もしかるべき金額ですし、日々の仕事の中から準備の 時間を捻出されています。少し寛大なムードで受け取 ってくださいますと幸いです。\n分単位で細かく練ら れたカリキュラムではなく、少し緩めに進行します。 コメントを拾って脱線することもあります。言い換え ると学習だけをされたい方には向いていません。\n若 干の延長など、ぴったり進行しないことがあります。\ n\n\n「当日の視聴は無料」を続けるために応援をお願 いします！\n\nDTP Transitのオンラインセミナーは「当日 の視聴は無料」で開催していますが、収入となる源泉 が「アーカイブ視聴のチケット」しかありません。\n\n 余裕のあるときなどに「アーカイブ視聴のチケット」 を購入いただけると助かりますが、次に挙げるような 〈無料でできる応援〉があります。\n\n\n「こんなイベ ントがある」と、まわりの方に知らせる\n「こんなイ ベントに参加したけど…」と感想をまわりの方に伝え る\nハッシュタグを付けてツイートする（スクショや ネタバレOKです）\nアンケートに回答する\n出演された 方のTwitterをフォローする／YouTubeをチャンネル登録す る\n参加されたイベントのYouTubeプログラムに「GOOD」（ 高評価）ボタンを押す\nDTP TransitのTwitterをフォローす る／YouTubeをチャンネル登録する\n\n\n特にお願いしたい のは「アンケート回答」です。 話してくださった方の 成長の材料になり、また、イベントの改善につながり ます。\n\n企業主催のセミナーのように「開催後に営業 メールが頻繁に届く」ようなこともなく続けられるた めに応援くださいますと幸いです。\n\n\n 「チャンネル 登録や高評価は無料でできる応援です」 by ベーコンさ ん \n\n\n協力企業のご紹介\n\n本イベントには、下記の 企業の協賛、協力をいただいています。\n\n\nKDDIウェブ コミュニケーションズ レンタルサーバー「CPI」、簡単 ホームページ作成「ジンドゥー」など提供\n文賢（ブ ンケン）～文章をより良くするための推敲・校閲・校 正支援ツール\n\n\nまた、多くの制作会社に協賛いただ いています。\n\n\nウェブライダー\nLINICA\nエンタミナ\n コンセント\nサービシンク\nトゥーアール（to-R）\nヘル ツ\nアップルップル\nCODE54\nHAMWORKS\nS-FACTORY\nnecco\nFLAT\nゴ ンウェブイノベーションズ\nエイチツーオー・スペー ス\nONiWA\nましじめ\n\n\n通年で協賛を募集しています。 検討くださいますと幸いです。\n\n \n\nお問い合わ せ\n\n問い合わせはDoorkeeperのフォームからお送りくだ さい。 LOCATION:オンライン URL:https://techplay.jp/event/938996?utm_medium=referral&utm_source=ics&utm _campaign=ics END:VEVENT END:VCALENDAR