BEGIN:VCALENDAR VERSION:2.0 PRODID:-//https://techplay.jp//JP CALSCALE:GREGORIAN METHOD:PUBLISH X-WR-CALDESC:#朝までマークアップ 2（CSS編） X-WR-CALNAME:#朝までマークアップ 2（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:966156@techplay.jp SUMMARY:#朝までマークアップ 2（CSS編） DTSTART;TZID=Asia/Tokyo:20250131T210000 DTEND;TZID=Asia/Tokyo:20250201T050000 DTSTAMP:20260528T082718Z CREATED:20241202T140334Z DESCRIPTION:イベント詳細はこちら\nhttps://techplay.jp/event/96615 6?utm_medium=referral&utm_source=ics&utm_campaign=ics\n\n本イベント は終了しています。「アーカイブ動画を見たい方」「 スライドをダウンロードしたい方」はSTORESからお求め ください。個人向け（3\,300円）会社で共有（11\,000円） 月額：1\,650円で2023年と2024年以降に開催の85本のアーカ イブが見放題になるサブスクも用意しています。\n\n202 3年11月に開催した#朝までマークアップ、今回はCSS特集 で開催します。23組24名の猛者が持ち時間10分、合計8時 間のボリュームでお届けします。\n\n\n当日参加できな い方には、 アーカイブ視聴（有料）をご用意していま す。\nアーカイブ視聴チケットはスライドやサンプル ファイルなどの特典付きです。\n\n\n「当日の視聴は無 料」スタイルで開催しますが、アーカイブチケット購 入やサブスク登録でサポートくださいますと助かりま す！\n\n出演\n\n順不同です。\n\n\n鹿野 壮 @tonkotsuboy_com\n 小山田晃浩 @yomotsu\n綿貫 佳祐 @xrxoxcxox\nタムショー @tams how_\n伊原 力也 @magi1125\nたにぐち　まこと @seltzer\n長谷 川喜洋 @hiro_ghap1\n半田 惇志 @assialiholic\n佐藤あゆみ @pent aprogram\n沖 良矢 @448jp\n浅井泰名 @yas613a\n長谷川 巧 @_unshi ft\nもち @makiko_sakamoto\nくーつ @Koots2021\nあしざわ @ash_crea tor\n長谷川広武 @h2ham\nTAK @tak_dcxi\n相原典佳 @noir44_aihara\n みらる @miral_kashiwagi\n草野あけみ @ake_nyanko\nせきゆおう @wurst_design\n倉科 宏行 @tortemusic\n森川 結子 @talocohc_rion\n いつか @itsuka0311\n\n\nイベント概要\n\nYouTube Liveでライブ 配信します。\n\n\n開催日：2025年1月31日（金） 21:00 - 05: 00\n形式：オンライン（YouTube Live）\nMC：鷹野 雅弘、相 原 典佳\nMV制作：オクモト、この、おかしん、ニワダ イスケ\nロゴ制作：モンブラン\nテーマソング：ロック オン柳田\nアドバイザリー：相原 典佳、長谷川 喜洋\n 主催：CeeBeeDee\n共催：CSS Nite、DTP Transit\n協賛（制作会 社）：ウェブライダー、LINICA、エンタミナ、コンセン ト、サービシンク、ビットエー、トゥーアール（to-R） 、ヘルツ、アップルップル、CODE54、HAMWORKS、S-FACTORY、ne cco、FLAT、ONiWA ほか\n協賛：文賢（ブンケン）、KDDIウェ ブコミュニケーションズ、一般社団法人ウェブコンサ ルタント・ウェブアドバイザー協会、JILLA（日本イラ ストレーション協会）\n\n\nお申し込みと参加費\n\n\n当 日の視聴は無料です。\n参加にはお申し込みが必要で す。受け付けは終演時刻まで。\n\n\nフォローアップ（ アーカイブ）\n\nスライドなどのフォローアップ（アー カイブ）は、アーカイブ購入／サブスクの方限定のコ ンテンツです。\n\nフォローアップ（アーカイブ）の購 入\n\n次の3つの方法があります。いずれかを選択なさ ってください。\n\n\nアーカイブ動画の視聴期限はあり ません。ずっと見られます。\n\n\n購入方法個人法人受 け取り備考金額 終演までその後 Doorkeeper （単品）2\,2 00円-11\,000円終演時刻にメールを送信（info@doorkeeper.jpか ら送信されます）「当日の視聴のみ」のチケットを申 し込まれた方は、いったん、キャンセルして「アーカ イブ視聴付き」のチケットを申し込んでください。STOR ES（単品）2\,200円3\,300円11\,000円購入するとダウンロー ドできるテキストファイルに、アーカイブ動画や特典 を掲載予定のページへのリンクがあります（アーカイ ブ動画や特典の掲載はイベント終了後）ユーザー登録 してから申し込むと、［マイページ］の［購入履歴］ から、後からダウンロードできます。サブスク1\,650円 （月額）詳細［メンバー限定］セクションの［フォロ ーアップ（アーカイブ）］から本イベントのNotionにア クセスしてください。法人は別途\n\nアンケート回答に ついて\n\n\n1時間ごと3組を「グループ」とし、AからHの グループに分けています。\nグループごとに8つのアン ケートがあります。それとは別にイベント全体の「最 終アンケート」があります。\n「8つのアンケート」に 答えると、それぞれの特典ページにアクセスできるよ うになります。つまり、特典ページも8つあります。\n 「8つのアンケート」は、それぞれ回答時間が限られて います。その時間に起きていないと回答できません。\ nアーカイブチケットを購入された方は、後日、すべて の特典ページにアクセスできます。\n\n\nアンケートで 強制アウトプットすることで定着につながると思いま すので、がんばってください！ 「フィードバックはギ フト」 → 登壇者の励みにもなります。\n\nグループ回 答開始〆URLグループA［21-22］21:2023:00https://tally.so/r/nGqzk QグループB［22-23］22:200:00https://tally.so/r/nPb64xグループC ［23-24］23:201:00https://tally.so/r/3jJygYグループD［24-25］0:20 2:00https://tally.so/r/3EZXA2グループE［25-26］1:203:00https://tall y.so/r/3xRpgEグループF［26-27］2:204:00https://tally.so/r/nGqzkOグ ループG［27-28］3:205:00https://tally.so/r/mObzrMグループH［28- 29］4:206:00https://tally.so/r/nrJ6gX\n\n配信に関してのあれこ れ\n\n各URLは、YouTubeの概要欄にも掲載しています。\n\n\ nチャットやスタンプ、ツイートなど「参加型」でお楽 しみください！\n「音声のバランスが悪い」など、何 かお困りの場合、コメントなどで教えてください！\n\n \n配信URL\n\nYouTube Liveで配信します。\n\nhttps://youtube.com/l ive/2tKSi3ZOO2k?feature=share\n\nX（Twitter）にて同時配信も行 っていますが、YouTube Liveにてコメントも含めてお楽し みください。\n\nYouTube関連\n\n\nYouTubeチャットを活用く ださい！　スパム回避のため、YouTubeチャンネル登録者 のみがコメント可能にしていますので、事前にチャン ネル登録をお願いします。\nスーパーチャット（スパ チャ＝投げ銭）を利用できます。少額でも大歓迎です ！　いただいた全額を講演者にお渡しします。\n質問 がある場合、YouTubeチャットで冒頭に★または【質問】 を付けてコメントください。すべては拾いきれません 。「〜は〜という意味です」「自分の現場ではこうや っている」など、視聴される方からのサポート的なコ メントを歓迎します！　一緒に場を作ってくださいま すと嬉しいです!! \n\n\nリアクションや質問\n\n\nスクシ ョ付きのツイート歓迎です。ぜひ、ハッシュタグ（#朝 までマークアップ）を付けてください。ただし、事例 の部分などでNGマークがついている箇所、講演者からNG の指示のある箇所はご遠慮ください。\n\n\nその他\n\n\n 「UDトーク」にて文字情報を提供しますので、別のブ ラウザーなどでご覧ください。タイムラグや精度につ いてはご容赦ください。\nサンプルファイルや配布資 料、アーカイブ動画のURLをSNSなどで再配布するのは禁 止です。\n開演の30分前くらい前からテスト配信をスタ ートします。音声などが聞こえるかチェックなさって ください。\nスマホやタブレットで視聴される方もい ると思いますが、PCでの視聴を前提としています。な るべくPCでご覧ください！\nご覧いただく回線状況によ っては、YouTubeの動画が止まってしまったり、音声が途 切れてしまうことがあります。その場合には、ブラウ ザーを再読み込みしたり、OSを再起動してみてくださ い。\n\n\n配信準備は念入りに行っていますが、本番に なると予期せぬトラブルが生じるのがライブ配信です 。それも含めて楽しんでください。\n\n領収書\n\nイン ボイス対応の領収書が必要な方は、アーカイブ購入者 向けのNotionからPDFをダウンロードしてご利用ください 。\n\n\n「アーカイブ視聴（会社として申し込み、社内 で共有）」のチケットを購入いただいている場合のみ 、個別対応いたします。\n\n\n所轄税務署、インボイス 制度電話相談センターなどに相談し、次のようにする ことにしました。\n\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\nDoorkeeperでアーカイブ チケットを購入された方にひあ、終了時刻にメールを お送りします。そのメール内に「アーカイブチケット 購入者向け」のNotionへのリンクを掲載しています。\n\n \nすべてのグループの特典をまとめています。\n数日内 にセッションごとに切り出した動画を掲載します（配 信したURLとは別）\nアーカイブ視聴期限はありません 。基本的に永久に見れます。\n領収書のダウンロード リンクも掲載しています。各自でダウンロードなさっ てください。\n\n\nグッズ\n\nモンブランさんによるデザ インの #朝までマークアップ のロゴ入りグッズ（22ア イテム）をSUZURIで販売しています。\n\n\n\nFAQ（よくあ る質問と、その回答）\n\nセッション番号の見方を教え てください\n\n24のセッションに「セッション番号」を 設定しています。\n\n\n\n\n最初のアルファベット：1時 間ごと3組を「グループ」とし、AからHのグループに分 けています。\n次の数字：グループ内での出演順\n「- 」に続く数字：通しでのセッション番号\n\n\n領収書に ついて\n\nインボイス対応の領収書は開催翌日にダウン ロード方法をメールにてご案内します。\n\n詳しくは、 こちらのnoteをご覧ください。\n\nスマホでも見られま すか？\n\nYouTube Liveで配信しますので、インターネット 回線がある環境でしたら、PC/Mac、スマホ、タブレット 、TVなどで閲覧可能です。\n\nただし、コーディングの デモは、スマホでは細かいところが見えにくいと思い ますので、PC/Macでの閲覧をオススメします。\n\nお申し 込み後、メールが届かない…\n\nお申し込み直後に「inf o@doorkeeper.jp」からメールが送信されています。事前・ 事後のアナウンスのメールを受け取れないとお困りに なると思いますので、次を参考になさってください。\ n\n\n迷惑メール扱いになっていないか、ご確認くださ い！\n住所録に登録してVIP扱いにしたり、メールサー バーにてホワイトリストに設定すると受け取りやすく なります。\niCloudやYahoo!メール、Hotmailは受け取りにく いです（迷惑メールに入らず、サーバーではじかれて しまうのか見つかりにくい）。異なるメールアドレス にて申し込まれるのが安全かもです。\nキャリアのメ ールでは文字数制限のため、メールが受け取れないこ とがあります。\n「アーカイブ視聴を含む」チケット を購入なさった方には「info@doorkeeper.jp」から、終了後 にメールを送信します。\n\n\nチケットを切り替えたい （無料 → アーカイブ）\n\nDoorkeeperにログインし、いっ たん「当日の視聴のみ」チケットをキャンセルし、改 めて「アーカイブ視聴付き」のチケットをお申し込み ください。\n\n\n終演時刻まで可能ですが、ギリギリだ と決済でトラブることがあるため、余裕を持ってお願 いします。\n\n\n\n\n仲間と集まって見てもいいですか？ \n\n大歓迎です！\n\nスライドやサンプルファイルなど のダウンロードはありますか？\n\n次の方にはご用意し ています。ぜひ、リアルタイムにご覧ください！\n\n\n アーカイブチケットを購入された方\nリアルタイム視 聴され、1時間ごとのアンケートにお答えいただいた方 （1時間ごと3組を「グループ」とし、グループ単位で 提供します）\n\n\nアーカイブ視聴のチケットを購入さ れた方には、終了後にまとめページをご用意します。\ n\nアーカイブ動画はいつまで見られますか？\n\n基本的 に永久に見られます。\n\nアーカイブ視聴ではノンスト ップ版を選べますか？\n\nはい。\n\n次の動画をご用意 します。\n\n\nセッションごとに切り出した動画\nノン ストップのフル尺版（YouTubeのチャットは見えません） \n\n\n字幕（文字情報）の提供はありますか？\n\n\nスマ ホなどでUDトークをご利用ください。URLはNotionをご覧 ください。\n配信画面には表示しません。\n\n\n「アー カイブ視聴、特典付き（会社として申し込み、社内で 共有）」のチケットについて教えてください\n\n\n代表 の方がお申し込みください。\nお申し込んだ方にメー ルをお送りします。\n視聴URLや特典ファイルなどを社 内で共有なさってください。\n\n\n協力企業のご紹介\n\n 本イベントには、下記の企業の協賛、協力をいただい ています。\n\n\n文賢（ブンケン）～文章をより良くす るための推敲・校閲・校正支援ツール\nKDDIウェブコミ ュニケーションズ レンタルサーバー「CPI」、簡単ホー ムページ作成「ジンドゥー」など提供\n一般社団法人 ウェブコンサルタント・ウェブアドバイザー協会 戦略 を立て、ターゲットとするお客様に明確に伝え、選ば れ、成果を出すための教育を提供\nJILLA（日本イラスト レーション協会）　文芸美術国保への加入や交流会な どメリットいっぱい\nWEBSTAFF　あなたの“強み”をとこ とん見つける　IT・Web好きの転職エージェント\n\n\n\n\n また、多くの制作会社に協賛いただいています。\n\n\n ウェブライダー\nLINICA\nエンタミナ\nコンセント\nサー ビシンク\nビットエー\nトゥーアール（to-R）\nヘルツ\n アップルップル\nCODE54\nHAMWORKS\nS-FACTORY\nnecco\nFLAT\nまし じめ\nグローバルデザイン\nエイチツーオー・スペース \nGear8\nマジカルリミックス\nONiWA\nさきがけデジタル\nr3 60studio\n\n\n\n\n通年で協賛を募集しています。検討くだ さいますと幸いです。\n\nお問い合わせ\n\n問い合わせ はDoorkeeperのフォームからお送りください。\n\nタイム テーブル\n\n\n1時間ごと3組を「グループ」とし、AからH の8グループに分けています（Aグループのみ2組）。\n 状況によって多少前後することがあります。\n\n\nグル ープ#セッション名講演者A21-22A1-1AIでCSSを自動生成！　 bolt.newとCursorで実現するAIコーディングたにぐち まこ とA2-2初心者が挑戦！CSSを使ってStudioでループアニメー ションを実装してみよう！もちB22-23B1-3CSSでリッチなイ ンタラクションを作ってみよう長谷川 巧B2-4使って得 するTailwind CSSの書き方佐藤あゆみB3-5CSSのゲームチェン ジャー:has()の活用事例鹿野 壮C23-24C1-6CSS実装から始め るアクセシビリティ〜実務で役立つ4つの達成基準と実 装テクニック〜森川 結子、いつかC2-7CSSの変態直伝！ ハイセンスCSSテクニック「CSSだけで実装するパララッ クススクロール」あしざわC3-8font-feature-settingsで操るタ イポグラフィの世界みらるD24-25D1-9突撃！隣のスタイル シート沖 良矢D2-10現場で役立つ失敗しないレイアウト 作り！vw/vhの実践テクニック浅井 泰名D3-11CSS変数を利 用して、ブロックエディタCMSの運用体験を1つ上に引き 上げました半田 惇志E25-26E1-12セレクタと詳細度、見直 すなら今！:where()が変えるCSS管理長谷川 広武E2-1310分で わかる！進化するWordPressサイト制作と便利プラグイン ＆パターン活用くーつE3-14スクリーンリーダー最適化 のためのCSS倉科 宏行F26-27F1-15相対カラー構文とcolor-mix( )関数で差をつける、2025年の色指定のテクニックTAKF2-16 CSS関数や変数とFigmaを連携！コーダーをダメにするデ ザインデータの作り方せきゆおうF3-17古くて新しいzoom プロパティー小山田 晃浩G27-28G1-18今すぐ使おうコンテ ナクエリ！草野あけみG2-19あぶないCSS伊原 力也G3-20Web ページ表示速度やアクセシビリティを検証できる！Ligh thouseの使いかた相原 典佳H28-29H1-21アニメーションの12 の原則をCSSで表現するには…？長谷川 喜洋H2-22サンプ ルで学ぶCSSアニメーションの実践テクニックタムショ ーH3-23Tailwind CSSに「インラインスタイルで十分」と言 う人、こうなるけど大丈夫ですか？綿貫 佳祐\n\n\n\n\n\n \n\n\n\n\n\nセッション情報\n\n【A1-1】AIでCSSを自動生成！ 　bolt.newとCursorで実現するAIコーディング\n\n今や、AIと コーディングは切っても切り離せない関係になりつつ あります。AIチャットへの相談や、エディタのコード 補完、自動生成など「自分の手を動かさない」CSSコー ディングが実現しつつあります。このセッションでは 、AIエディタの「Cursor」と、AI生成ツールの「bolt.new」 を利用したAIコーディングの今をご紹介します。\n\n\n\n 特典（アーカイブチケット or アンケート回答）スライ ドPDF\nデモのソースコード\n\nたにぐち まこと H2O space 富士ゼロックス、ソニーネットワークコミュニケーシ ョンズなどでウェブエンジニアとして勤務ののち、2002 年に独立。株式会社エイチツーオー・スペースを設立 。メンテナンスしやすいウェブサイトを手ごろな価格 で提供することで、大小問わずさまざまな業界のクラ イアントを応援している。合わせて、YouTubeやUdemyなど の動画プラットフォームを通じた、学習コンテンツも 展開している。主な著書に『6さいからつかえるパソコ ン』（技術評論社刊）、『よくわかるPHPの教科書』（ マイナビ刊）など。𝕏（Twitter）：@seltzer\n\n【A2-2】初 心者が挑戦！CSSを使ってStudioでループアニメーション を実装してみよう！\n\nStudioのデフォルト機能ではでき ないループアニメーションを、CSSの@keyframesを使って実 装する方法を解説します。CSS初心者の私が、同じ初心 者でも真似しやすいポイントを押さえてお伝えします ！StudioとCSSを使った新しい表現に挑戦したい方はぜひ ご参加ください。\n\n\n\n特典（アーカイブチケット or アンケート回答）デモのソースコード\n\nもち 株式会 社xenodata lab. ・NOT DESIGN SCHOOLAI系BtoB SaaSのスタートアッ プ株式会社xenodata lab. CDO（Chief Design Officer）専門学校で グラフィックデザインを学んだのち、複数のスタート アップでプロダクトのUIデザインを経験し、現在はUI・ UXデザインを中心に社内の全クリエイティブを担当。 本業以外ではStudioを使用したweb制作、オンラインスク ール事業、Twitterの発信などの活動も積極的に行ってい る。2023年7月にFigmaの本を出版。𝕏（Twitter）：@makiko_sa kamoto\n\n【B1-3】CSSでリッチなインタラクションを作っ てみよう\n\n@propertyによるカスタム変数の定義と、sin\, cosなどの数学関数、transformプロパティを駆使して、CSS だけでリッチなインタラクションを実現できます。少 しの数学の知識があれば、WebGLのライブラリを使用せ ずとも、CSSのみで簡単な3D表現が可能であることを実 践してみたいと思います。\n\n\n\n特典（アーカイブチ ケット or アンケート回答）スライドPDF\nデモのソース コード\n\n長谷川 巧 はせがわ・たくみunshift Inc.unshift I nc. Creative / Front-end developer。STUDIO DETAILS エンジニアユニ ットの外部アドバイザー。2008年からFlashをはじめ様々 な技術を用いてWebサイト制作に携わり、数社を経て2016 年に独立。2021年11月に法人化。WebGLなどのWebグラフィ ック技術を用いたWebサイトの実装を多数手掛ける。𝕏 （Twitter）：@_unshift\n\n【B2-4】使って得するTailwind CSSの 書き方\n\n近年人気を集めているTailwind CSSの魅力と活用 法をご紹介します。Tailwind CSSは、2019年のv1.0の登場か ら進化を続け、Arbitrary Properties/Variantsなど柔軟な機能 や書き方が増えており、利便性も上がっています。「 ユーティリティファーストって、余白やフォントサイ ズを指定できるくらいでしょ？」という方、そしてま だ触ったことがない方に向けて、「Tailwind CSSって、こ んな風に書けるんだ！」をご紹介します。\n\n\n\n佐藤 あゆみ さとう・あゆみ株式会社necco株式会社neccoCTO | フロントエンドエンジニアhttps://necco.inc/2014年12月より 、屋号 PentaPROgram（ペンタプログラム）にてフリーラン スとして独立。ウェブ専業ではない多様な業界の実情 を見ながら、中小企業で「ウェブ担／パソコン担当さ ん」として業務を続けてきた経験を活かし、その後の 運用を見据えたECサイトやコーポレートサイトの構築 、技術サポートを行う。2018年より、WebCAおよびCSS Nite 、Bau-yaなどでフロントエンド技術に関するテーマで登 壇。2019年、書籍『HTMLコーダー&ウェブ担当者のためのW ebページ高速化超入門』（技術評論社）出版。2022年4月 、株式会社neccoのCTO/取締役に就任。2023年12月、書籍『 ノーコードでつくるWebサイト』（MdN）出版。𝕏（Twitte r）：@pentaprogram\n\n【B3-5】CSSのゲームチェンジャー:has() の活用事例\n\n2023年末に遂に全ブラウザ対応し、対応 ブラウザも普及したCSSの:has()。:has()を使うと、これま でJavaScriptを使わないと難したかった表現がCSSだけでで きるようになったり、冗長なCSSのコードを短く安全に 記述できるようになります。本セッションでは、単な る:has()の使い方にとどまらず、開発現場で:has()をどの ように活用できるのか実践的な実例を紹介します。\n\n \n\n特典（アーカイブチケット or アンケート回答）ス ライドPDFデモのソースコード\n\n\n鹿野 壮 かの・たけ しUbie株式会社Ubie株式会社プロダクトエンジニア2024年 にUbie株式会社に入社。九州大学でメディアアートを学 んだ後、テックリードやフロントエンドチームリーダ ーを経験する。現在はUbieでフロントエンド・バックエ ンド問わずフルスタックにプロダクト開発をしている 。TechFeed公認エキスパート。近著に『JavaScriptコードレ シピ集』（技術評論社）があるウェブサイト𝕏（Twitte r）：@tonkotsuboy_com\n\n【C1-6】CSS実装から始めるアクセシ ビリティ〜実務で役立つ4つの達成基準と実装テクニッ ク〜\n\n受託制作プロジェクトにおいて、アクセシビリ ティへの対応要件が増えています。本セッションでは 、Webアクセシビリティガイドライン（WCAG）2.2のうち、 CSSに関連する実装について解説します。レベルAAまで の達成基準から、実装頻度の高い要件に焦点を当て、 現場で活用できる知見を共有します。さらに、アクセ シビリティのチェックツールの活用方法を紹介しなが ら、ツールだけでは発見できない課題への対処方法に ついても説明します。\n\n\n\n森川 結子 もりかわ・ゆ うこトゥーアール商社で事務職を経験した後、2013年に ウェブ業界へ。制作会社でデザイン、マークアップ、 ディレクションなど幅広い経験を積み、2017年現職のト ゥーアールに入社。最近ではTailwindCSSやNext.jsを利用し たウェブアプリケーション開発に従事している。「ア クセシビリティで一発当て太郎」の弟子としてアクセ シビリティ啓発活動にも尽力している。マークアップ とWebアクセシビリティ関連の講師経験をもつ。チョコ レート好き。𝕏（Twitter）：@talocohc_rion\n\nいつか ウェ ブサイト受託制作フリーランス。業務ソフト開発会社 にて開発補助、カスタマーサポート、デザイン業務な どに携わるなか、自社サイトのリニューアルに携わっ たことをきっかけにウェブサイト制作の道へ。職業訓 練校のWebクリエーターコースで講師を務めた後、2021年 から医療機関向けサービス事業会社に所属しつつ、個 人でWordPressやStudioを使ったウェブサイト制作を請け負 っている。マークアップとミスチルが好き。𝕏（Twitte r）：@itsuka0311\n\n【C2-7】CSSの変態直伝！ハイセンスCSS テクニック「CSSだけで実装するパララックススクロー ル」\n\n近年のWebサイト表現は自由が度高くバリエーシ ョンも豊富ですが、それに比例して実装難易度も昔に くらべ高くなっています。今回は、Webサイト制作初心 者の方でも比較的扱いやすい「CSSだけで実装するパラ ラックス（視差効果）」のテクニックをご紹介します 。CSSが秘める無限の可能性を感じワクワクしながら楽 しく学びましょう！\n\n\n\n特典（アーカイブチケット o r アンケート回答）デモソースコード\n\nあしざわ 株式 会社ZEROSTANCE株式会社ZEROSTANCE 代表取締役Webクリエイタ ー育成スクール - SLash 代表／講師1991年生まれ。法学部 卒の元キャリアコンサルタント。インハウスのクリエ イターとしてグラフィックデザインやWebサイト制作を 経験したのちフリーランスとして独立。2021年にZEROSTANC E（旧CRANKS）を設立。各種デザインはもちろん、フロン トエンド開発や3Dモデリング、イラスト、モーション グラフィックスなどクリエイティブなことならだいた い何でもできる。ほぼすべてのスキルを独学で身につ けてきたこともあり、教えるのがとても得意。ずっと 憧れていた仕事に就けて幸せです！心の底からこの仕 事（クリエイティブ）を愛してます！夢は一流と言わ れるクリエイターになることです！よろしくお願いし ます！𝕏（Twitter）：@ash_creator\n\n【C3-8】font-feature-setti ngsで操るタイポグラフィの世界\n\nなにげなく使ってい るフォントには、数多くの秘められた機能が存在して います。\nそれらの機能はデザインツールからだけで なく、CSSからも操れることをご存じですか？\nフォン トとCSSの関係性を知ることで、Web上のタイポグラフィ の可能性が広がります。\n本セッションでは、文字の 振る舞いをCSSで変更する方法や、Figma上での文字設定 をGoogle FontsのCDNでどこまで再現できるのかを、デモを 交えてご紹介します。\n\n\n\n特典（アーカイブチケッ ト or アンケート回答）スライドPDF（デモの解説資料付 き）\n\nみらる GrowGroup株式会社名古屋のWeb制作会社で 働くWebエンジニア。2014年大学卒業後からWeb制作会社で Webデザイン・Webコーディングに携わる。現在はバック エンド・フロントエンドの両方を担当するWebエンジニ ア職として働いているが、心はいつもマークアッパー 。𝕏（Twitter）：@miral_kashiwagi\n\n【D1-9】突撃！隣のス タイルシート\n\nスタイルシートを書くとき、他の人が どのように書いているのか気になったことはありませ んか？例えばfont-familyの指定はどのようにしているの か、よく使われている単位は？など、実際のウェブサ イトの傾向について知りたいと思ったことがあるはず です。そこで本セッションでは、多くのエンジニアが 一度は悩んだであろうこれらのポイントについて、東 証プライム上場（旧・東証一部上場）企業約1\,600社の ウェブサイトを対象に調査した結果をご紹介します。\ n\n\n\n特典（アーカイブチケット or アンケート回答） スライドPDF\n\n沖 良矢 おき・よしや合同会社世路庵198 1年愛媛県生まれ。インタラクションデザイナー。2003 年よりWeb制作に携わる。2008年にフリーランスとして独 立後、2019年に合同会社世路庵を設立。ビジネスとクリ エイティブの両立を強みとして、戦略立案、UI/UX設計 、デザイン、フロントエンド開発に携わる。現場で培 った知見をもとに講演、執筆、コミュニティ運営にも 取り組んでいる。長岡造形大学非常勤講師、元東京造 形大学非常勤講師、WebクリエイティブコミュニティDIST 主宰、Vue Fes Japan全体統括。𝕏（Twitter）：@448jp\n\n【D2- 10】現場で役立つ失敗しないレイアウト作り！vw/vhの実 践テクニック\n\nCSSレイアウトでよく使われるvwやvh。 便利だけれど、「横スクロールが出る」「高さがズレ る」といった問題で悩んだことはありませんか？本セ ッションでは、初心者がつまづきやすいvw/vhの落とし 穴をデモで解説しつつ、CSS変数とJSを活用した実践的 な解決方法をご紹介します。日々の制作現場で直面し やすい課題を解決するヒントがきっと見つかるはずで す。現場で役立つCSSの基本と応用を、この機会に学ん でみませんか？\n\n\n\n特典（アーカイブチケット or ア ンケート回答）スライドPDF\n\n浅井 泰名 あさい・やす な株式会社FLAT2020年にWeb業界へ転身。Webデザイナーと しての1年間の勤務経験を経て、現在は株式会社FLATで フロントエンドエンジニアとして主にWebサイト制作に 従事。デザイナーとしての経験からUIデザインへの関 心も強く、アクセシビリティを意識した、ユーザーに 優しいサイト制作を目指している。𝕏（Twitter）：@yas6 13a\n\n【D3-11】CSS変数を利用して、ブロックエディタCMS の運用体験を1つ上に引き上げました\n\n「ブロックを ページ内の好きな所に配置できる」ブロックエディタ を搭載したCMSが登場したことで、ウェブサイトの運用 は格段にラクに、かつ自由度が高くなりました。しか し、実はきちんと考えられた作成されたブロックでな いと、「ブロックをどこでも好きな所に使う」ことは できません。「ブロックをきちんと作る」ためにCSS変 数を活用した例と、そこに至るまでに経た思考プロセ スも併せてご紹介します。\n\n\n\n半田 惇志 はんだ・ あつしフリーランスフロントエンドエンジニア 兼 HubSp otテクニカルエキスパートフロントエンドエンジニア としては特にコンポーネント設計に強く、PRECSS（ https: //precss.io ）並びにCSS設計完全ガイド（ https://amzn.to/3EHj5 AU ）の生みの親。HubSpotにおいてはCRMの導入支援からデ ータ設計、マーケティングオートメーションフローの セットアップ、CMSによるサイト構築まで、フルスタッ クに対応している。𝕏（Twitter）：@assialiholic\n\n【E1-12 】セレクタと詳細度、見直すなら今！:where()が変えるCS S管理\n\n大きく話題になることは少ないですが、2024年 にリリースされたWordPressではCSSの詳細度が再検討され 、テーマ管理を容易にするためにセレクタの詳細度を 下げる方針が取り入れられました。CSSの詳細度を抑え ることは、普段のお仕事で書いているスタイルにも応 用できる大切な考え方です。本セッションでは、詳細 度が高いと起こりがちな問題点を整理しながら、:where( )などの擬似クラスを活用して保守性と柔軟性を高める 具体的な方法を紹介します。\n\n\n\n特典（アーカイブ チケット or アンケート回答）スライドPDFデモのソース コード\n\n長谷川 広武 はせがわ・ひろむ株式会社HAMWOR KS[株式会社HAMWORKS](https://h2ham.net/) 代表取締役[株式会社 カワラバン](https://kawaraban.ltd/) 取締役[bit part 合同会社] (https://www.bit-part.net/) 業務執行社員テクニカルディレク ター 兼 フロントエンドエンジニアSaCSS主催（Sapporo.css ） 主催(´ ºムº `)の人。北海道札幌市在住。2016年2月 に株式会社HAMWORKSを設立し、代表取締役に就任。HTML & C SS & JavaScriptのコーディングや、WordPressなどのCMSを利用 したWebサイト構築などを得意としている。また、2009年 より札幌でWebデザイナー向けの勉強会「[SaCSS](https://sac ss.net/)」の主催・運営を行っている。𝕏（Twitter）：@h2 ham\n\n【E2-13】10分でわかる！進化するWordPressサイト制 作と便利プラグイン＆パターン活用\n\nWordPressのブロッ クエディターやブロックテーマの登場により、サイト 制作の手法が大きく変化しています。本セッションで は、初心者の方にも分かりやすく、最近のアップデー トで追加されたCSS関連機能、ブロックパターンの活用 などを10分で簡潔に解説します。さらに、ブロックエ ディターをより活用するための便利なプラグイン紹介 や、WordPress制作の新しい手法が学べる書籍、最新情報 をスピーディーにキャッチアップする方法もあわせて ご紹介します。短い時間でポイントをしっかり押さえ られる内容となっていますので、WordPressでのサイト制 作を学習中の方も、既に実務で取り組んでいる方もぜ ひお気軽にご参加ください。\n\n\n\n特典（アーカイブ チケット or アンケート回答）スライド資料WordPressのお 役立ち情報リンク集\n\nくーつ 株式会社テックブリッ ジ 代表取締役ベンチャー企業で法人営業を経験後、コ ーダーに転身。コーディング、WordPressサイトのセキュ リティメンテナンス等に従事。2024年に株式会社テック ブリッジを設立。「ひとり法人」の強みを活かし、小 回りの利く柔軟な対応で顧客をサポート。営業、ディ レクション、コーディングからWordPressサイトの保守管 理や改修まで一貫して対応。開発の効率性、保守性、 セキュリティを重視したサイト構築と運用の実現に取 り組む。2024年にはWordCamp Kansaiに登壇し、WordPress制作の フローの変化について自身の体験を交えて紹介。また 、大阪を拠点に「おおさかもくもく会」を主催し、フ リーランスや企業内クリエイターとの交流やスキル・ 情報共有の場を提供している。4児の父。𝕏（Twitter） ：@Koots2021\n\n【E3-14】スクリーンリーダー最適化のため のCSS\n\n「スクリーンリーダー（画面読み上げツール） にCSSは影響します！」と言われても、ピンとこない方 は多いのではないでしょうか。実は、CSSの書き方一つ で読み上げに影響を与えることがあります。視覚的に は問題なくても、音声として読み上げた場合にユーザ ー体験を損なうケースは少なくありません。また、ス クリーンリーダー対応を含むウェブアクセシビリティ の確保は、視覚に頼らないユーザーだけでなく、すべ てのユーザーが快適に利用できるウェブサイトを作る 上で欠かせない要素です。今回のセッションでは、ス クリーンリーダーのデモを交えながら、CSSがどのよう に読み上げに影響を与えるのかを解説します。\n\n\n\n 特典（アーカイブチケット or アンケート回答）スライ ド資料主要スクリーンリーダーによる調査結果\n\n倉科 宏行 くらしな・ひろゆき1982年、山梨県生まれ。とに かく情報が大好物。ミュージシャンとしてジャパニー ズドリームを夢見るも色々あり、グローバルデザイン 株式会社にマークアップエンジニアとして入社し、ウ ェブの道へ。エンジニア時代につちかったフロントエ ンドのスキルや経験を活かして現在は、現在はプロジ ェクトマネージャー職に従事。ウェブアクセシビリテ ィ基盤委員会にも参加し、活動中。アクセシビリティ に優れた使いやすくわかりやすいサイト構築のために 日々取り組んでいる。𝕏（Twitter）：@tortemusic\n\n【F1-15 】相対カラー構文とcolor-mix()関数で差をつける、2025年 の色指定のテクニック\n\n日々進化が止まらないモダン CSSですが、特に色指定に纏わるCSSはこの数年で革命が 起こりました。Oklchなどの新しく登場した色空間にも 触れつつ、僕が昨年のCSSのコーディングでお世話にな った「相対カラー構文」と「color-mix()関数」について 便利なテクニックとそれぞれの使い分けについて解説 します。\n\n\n\n特典（アーカイブチケット or アンケー ト回答）スライドPDF\nデモのソースコード\n\nTAK たく19 93年群馬県生まれ。大学を卒業後、紆余曲折を経てWeb 制作に携わる。Web制作会社や東証プライム上場企業に てマークアップ・フロントエンド業務を経験した後、 フリーランスとして独立。自身の経験を活かし、主にC SS関連の技術発信を行う。備忘録や知識のアウトプッ トの場として運営しているブログ「TAKLOG」を運営。2025 年にCSSに関する書籍を出版予定。ウェブサイト𝕏（Twi tter）：@tak_dcxi\n\n【F2-16】CSS関数や変数とFigmaを連携！ コーダーをダメにするデザインデータの作り方\n\nFigma の開発モードを活用するだけでもコーディングの工数 は削減できますが、効率化をさらに進めてみませんか ？ローカルバリアブルの数値をCSS変数と統一し、「あ るCSS関数」を取り入れることで、Figmaの開発モードで 出力されるスタイルがより実用的に仕上がります。ま た、メディアクエリの数も減らせるので、コーディン グ工数もさらに削減でき、より運用しやすいコードを 実現できます。FigmaのデザインデータとCSS関数を組み 合わせ、多くのスタイルをコピペで効率的に構築でき る「コーダーをダメにするFigmaデザインデータの作り 方」をご紹介します！\n\n\n\n特典（アーカイブチケッ ト or アンケート回答）スライドPDFデモのソースコード \n\n\nせきゆおう 三重県出身。名古屋造形芸術大学短期 大学部で建築を専攻するも、当時熱中していたオンラ インゲームのギルドのHP制作を機に、Web制作者として の道を志す。その後、複数のWeb制作会社を経験した後 、2020年にフリーランスとして独立。受注から納品まで 一貫して担当するジェネラリストタイプ。独立した際 にTwitterをスタートし、同年4月には石油王アカウント を開設。現在のフォロワー数は2.3万人に達する。2020年 にWebクリエイター向けのオンラインコミュニティ「ク リエイターズ・シナジーカフェ」の共同運営を開始。2 022年にはKADOKAWAドワンゴ情報工科学院で半年間、コー ディングの初級講師を務めた。2023年にColosoで「ゼロか ら学ぶ実践的なコーディング＆スキルアップ講座」を リリース。Voicyにて「アブラジオ」というラジオ番組 も放送している。𝕏（Twitter）：@wurst_design\n\n【F3-17】 古くて新しいzoomプロパティー\n\nCSSのzoomプロパティー はSafariとChromeでは古くからサポートされており、2024年 にFirefoxでもサポートされました。これによりzoomプロ パティーは実務でも気軽に使えるプロパティーになり ました。zoomプロパティーはレスポンシブ対応において とても有用なプロパティーです。このセッションでは 、zoomプロパティーの特徴と、どんなときに役に立つか の具体例を紹介します。\n\n\n\n特典（アーカイブチケ ット or アンケート回答）CodeGrid記事「古くて新しいzoom プロパティー」無料開放（1週間）CodeGrid新規読者60日 間無料スライドPDFデモのソースコード\n\n小山田 晃浩 おやまだ・あきひろ株式会社ピクセルグリッド株式会 社ピクセルグリッド2006年よりWeb制作会社にてUI実装や 運用業務を経験した後、2010年よりフロントエンド・エ ンジニアとして株式会社ピクセルグリッドに入社。Reac t、Svelte、Vue問わずデザインシステムの実装作業に勤し む。SVG、Canvas、WebGLの扱いも得意としている。 この他 の実績として、[three.js](https://threejs.org/)のCSS3DRendererの コントリビューター。2011年から2024年まで連続で[Microso ft MVP](https://mvp.microsoft.com/en-US/mvp/profile/9bbb70c0-3c9a-e411-93 f2-9cb65495d3c4)を受賞。𝕏（Twitter）：@yomotsu\n\n【G1-18】 今すぐ使おうコンテナクエリ！\n\nCSSがどんどん進化し て新しい機能も続々登場していますが、実際のところ 実務でどのくらい使い道があるのか正直よくわからず 利用をためらっている人も結構いるのではないでしょ うか？このセッションでは数あるモダンCSSの中でも昨 年実際に使ってみて特に「これはイイ！」と思ったコ ンテナクエリに注目して、どのようなケースで利用す ると威力を発揮するのか、従来のメディアクエリと比 較しながら具体的に紹介していきたいと思います。\n\n \n\n特典（アーカイブチケット or アンケート回答）ス ライドPDFデモのソースコード\n\n草野あけみ くさの・ あけみリクルート系制作会社勤務ののち2003年からフリ ーランスとして独立。主に受託制作でのWebサイトコー ディング、セミナー講師、初心者向け書籍の執筆、ラ イトノベル系のカバー装丁デザインなどで活動。屋号 なし独自ドメインなし公式Webサイトなしで20年以上生 き残ってる多分日本で唯一のWeb系フリーランス。単著 として『HTML5&CSS3費用順デザイン講座』（翔泳社）、『 プロの「引き出し」を増やすHTML+CSSコーディングの強 化書』（MdN）、共著として『初心者からちゃんとした プロになるHTML+CSS実践講座』（MdN）などがある。𝕏（T witter）：@ake_nyanko\n\n【G2-19】あぶないCSS〜「CSSだけで 作る◯◯」の危険性〜\n\nCSSの進化に伴い「CSSだけで作 る◯◯」という実験的なコードを見かける機会が増え ました。ドロップダウンメニュー、ハンバーガーメニ ュー、アコーディオン、ツールチップ、タブ、カルー セル、そしてモーダルダイアログ。確かに、これらがC SSだけで作れたら便利です。しかしコードを見てみる と、操作不可能な状態を生み出してしまう「あぶない 」ものが多いようです。本セッションでは、こうしたC SSの問題点と解決方法を考えてみます。\n\n\n\n特典（ア ーカイブチケット or アンケート回答）スライドデータ （Googleスライド）デモのソースコード（CodePen）\n\n伊 原 力也 いはら・りきやfreeeビジネス・アーキテクツ にて情報アーキテクトとして活動後，2017年よりフリー 株式会社。社会における多様な働き方の実現を目指し ，プロダクトデザインおよびアクセシビリティの普及 啓発を実施。ほか，外部コンサルタントとして複数社 のアクセシビリティ改善を支援。著書（共著）に『Web アプリケーションアクセシビリティ』（技術評論社） など。𝕏（Twitter）：@magi1125\n\n【G3-20】Webページ表示 速度やアクセシビリティを検証できる！Lighthouseの使い かた\n\nGoogleが提供している、Webページの表示速度やア クセシビリティについての状態を検証できるツール、L ighthouseを紹介します。このセッションでは、Lighthouseを 用いて検証結果のよいWebページと悪い結果のWebページ をそれぞれ検証し、どの点を改善すると「よりよいWeb ページになるのか」を解説します。Lighthouseを使ったこ とがない人でも、どの箇所を直せばよいのかの「勘ど ころ」がわかるようになる、初心者向けの内容です。\ n\n\n\n特典（アーカイブチケット or アンケート回答） スライドPDFデモのソースコード\n\n相原 典佳 あいはら ・のりよしDTP、Webアシスタントディレクター業務を経 たのち、2010年にフリーランスとして独立。ディレクシ ョンからデザイン、構築まで、一貫したWebサイト制作 を提供している。現場での経験や知識をもとに、デジ タルハリウッド、ロクナナワークショップ、Schooなど で講師・授業を担当するほか、「Web初心者を抜けた人 たち」向けコミュニティ、Beans Collegeの運営を行ってい る。共著書として『初心者からちゃんとしたプロにな る HTML+CSS標準入門』（MdN刊）、『Figmaで作るUIデザイン アイデア集 サンプルで学ぶ35のパターン』（インプレ ス刊）などがある。𝕏（Twitter）：@noir44_aihara\n\n【H1-21 】アニメーションの12の原則をCSSで表現するには…？\n \nCSSアニメーションを実装しているとき、「なんだか 動きが直線的」「無機質」と感じることはありません か？1981年に出版された『ディズニーアニメーション T he Illusion of Life ― 生命を吹き込む魔法 ― 』で紹介さ れたアニメーションの12の原則から、CSSアニメーショ ンに取り込むコツをご紹介します。コピペで使えるイ ージングから、@propertyを用いたアニメーション調整ま で、今までCSSアニメーションが苦手だった方も、この 機会にぜひチャレンジしてみてください。\n\n\n\n特典 （アーカイブチケット or アンケート回答）スライドPDF デモのソースコード\n\n長谷川 喜洋 はせがわ・よしひ ろ株式会社How to Use株式会社How to Use CTO/株式会社ステラ クリエイト CEO/総合webサービス タダフラ 代表/ロクナ ナ・デジタルハリウッドSTUDIO大阪・京都芸術デザイン 専門学校 講師/futureshop認定マイスター/だし・星のソム リエ®大阪生まれ大阪育ち。 パチンコ店の店長からEC 業界へ。そののち、知財を扱うスタートアップでシス テム開発・Webサイト制作・アプリ開発を担当。フリー ランスとしてWeb制作も行う。EC時代に天体望遠鏡を販 売していた経験から、星空事業を主とした法人を2020年 に設立。𝕏（Twitter）：@hiro_ghap1\n\n【H2-22】サンプルで 学ぶCSSアニメーションの実践テクニック\n\nこのセッシ ョンでは、CSSアニメーションの実践テクニックとして 、「ループする横スクロールアニメーション」と「ス クロールで動画を再生するようなアニメーション」の2 つを取り上げます。いずれもJavaScriptを使用せずに実装 する方法を解説し、実際の動きを確認しながらサンプ ルコードを通して学べるため、部分的な箇所からでも クライアントワークに応用できる内容となっています 。また、アクセシビリティを意識した作りについても 紹介しますので、動きと使いやすさを両立しやすくな るはずです。ぜひ本セッションを活用して、より魅力 的なページ作りにお役立てください。\n\n\n\n特典（ア ーカイブチケット or アンケート回答）スライドPDFデモ のソースコード\n\nタムショー ましじめ株式会社まし じめ株式会社 代表物の構造やバックグラウンドを見る ことが好きで、自動車整備士の道へ進む。 その後デジ タルハリウッドでweb制作を学び制作会社へ転職。2021年 にましじめ株式会社を設立。CSS設計に関する著書の経 験があり、メンテナンス・運用のしやすいwebサイトの 構築を得意とする。受託では主にHTML・CSSから、ウェブ アクセシビリティ対応、CMSを利用したwebサイトの制作 を担当。また、焼き菓子を販売する「あしかクッキー 」の運営も行なっている。著者:『現場のプロから学ぶ CSSコーディングバイブル』𝕏（Twitter）：@tamshow_\n\n【 H3-23】Tailwind CSSに「インラインスタイルで十分」と言 う人、こうなるけど大丈夫ですか？\n\nTailwind CSSは世の 中にだいぶ浸透してきました。しかし、Tailwindの話に なると絶対にこうやって言う人が出ます。「これを使 うくらいならインラインスタイルで十分。」本当にそ うなのでしょうか？実際にインライン記述だけでスタ イルを完結させようとするとどうなるのでしょうか？ 十分と思っている人は現実的な問題を認識する機会に 、考えたこともなかった人は技術選定の1つの要素にし てみてください。\n\n\n\n特典（アーカイブチケット or アンケート回答）- スライドデータ\n- 台本\n- デモのソ ースコード\n\n綿貫 佳祐 わたぬき・けいすけQiita株式 会社/株式会社エイチームライフデザインQiita株式会社 と株式会社エイチームライフデザインに所属していま す。UIとマークアップが多めで、ときにはグラフィッ クやUXもやります。Friends of Figma Nagoyaのリーダーもして いて、Figmaの本も書きました。𝕏（Twitter）：@kskwtnk LOCATION:オンライン URL:https://techplay.jp/event/966156?utm_medium=referral&utm_source=ics&utm _campaign=ics END:VEVENT END:VCALENDAR