#朝までマークアップ 2（CSS編）

2023年11月に開催した#朝までマークアップ、今回はCSS特集で開催します。23組24名の猛者が持ち時間10分、合計8時間のボリュームでお届けします。

• 当日参加できない方には、 アーカイブ視聴（有料）をご用意しています。
• アーカイブ視聴チケットはスライドやサンプルファイルなどの特典付きです。

「当日の視聴は無料」スタイルで開催しますが、アーカイブチケット購入やサブスク登録でサポートくださいますと助かります！

出演

順不同です。

• 鹿野 壮 @tonkotsuboy_com
• 小山田晃浩 @yomotsu
• 綿貫 佳祐 @xrxoxcxox
• タムショー @tamshow_
• 伊原 力也 @magi1125
• たにぐち　まこと @seltzer
• 長谷川喜洋 @hiro_ghap1
• 半田 惇志 @assialiholic
• 佐藤あゆみ @pentaprogram
• 沖 良矢 @448jp
• 浅井泰名 @yas613a
• 長谷川 巧 @_unshift
• もち @makiko_sakamoto
• くーつ @Koots2021
• あしざわ @ash_creator
• 長谷川広武 @h2ham
• TAK @tak_dcxi
• 相原典佳 @noir44_aihara
• みらる @miral_kashiwagi
• 草野あけみ @ake_nyanko
• せきゆおう @wurst_design
• 倉科 宏行 @tortemusic
• 森川 結子 @talocohc_rion
• いつか @itsuka0311

イベント概要

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

• 開催日：2025年1月31日（金） 21:00 - 05:00
• 形式：オンライン（YouTube Live）
• MC：鷹野 雅弘、相原 典佳
• MV制作：オクモト、この、おかしん、ニワダイスケ
• ロゴ制作：モンブラン
• テーマソング：ロックオン柳田
• アドバイザリー：相原 典佳、長谷川 喜洋
• 主催：CeeBeeDee
• 共催：CSS Nite、DTP Transit
• 協賛（制作会社）：ウェブライダー、LINICA、エンタミナ、コンセント、サービシンク、ビットエー、トゥーアール（to-R）、ヘルツ、アップルップル、CODE54、HAMWORKS、S-FACTORY、necco、FLAT、ONiWA ほか
• 協賛：文賢（ブンケン）、KDDIウェブコミュニケーションズ、一般社団法人ウェブコンサルタント・ウェブアドバイザー協会、JILLA（日本イラストレーション協会）

お申し込みと参加費

• 当日の視聴は無料です。
• 参加にはお申し込みが必要です。受け付けは終演時刻まで。

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

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

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

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

• アーカイブ動画の視聴期限はありません。ずっと見られます。

配信に関してのあれこれ

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

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

配信URL

YouTube Liveで配信します。

https://youtube.com/live/2tKSi3ZOO2k?feature=share

X（Twitter）にて同時配信も行っていますが、YouTube Liveにてコメントも含めてお楽しみください。

YouTube関連

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

リアクションや質問

• CommentScreenを使って、画面上にスタンプを送信できます。スマホだけでなく、PCからも送信可能。ただし、CommentScreenのコメント機能は使っていません。
• スクショ付きのツイート歓迎です。ぜひ、ハッシュタグ（#朝までマークアップ）を付けてください。ただし、事例の部分などでNGマークがついている箇所、講演者からNGの指示のある箇所はご遠慮ください。
• 終了後、ぜひアンケートにお答えください！　「フィードバックはギフト」。話してくださった方の成長の材料になり、また、イベントの改善につながります。

その他

• 「UDトーク」にて文字情報を提供しますので、別のブラウザーなどでご覧ください。タイムラグや精度についてはご容赦ください。
• サンプルファイルや配布資料、アーカイブ動画のURLをSNSなどで再配布するのは禁止です。
• 開演の30分前くらい前からテスト配信をスタートします。音声などが聞こえるかチェックなさってください。
• スマホやタブレットで視聴される方もいると思いますが、PCでの視聴を前提としています。なるべくPCでご覧ください！
• ご覧いただく回線状況によっては、YouTubeの動画が止まってしまったり、音声が途切れてしまうことがあります。その場合には、ブラウザーを再読み込みしたり、OSを再起動してみてください。

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

領収書

インボイス対応の領収書が必要な方は、アーカイブ購入者向けのNotionからPDFをダウンロードしてご利用ください。

• 「アーカイブ視聴（会社として申し込み、社内で共有）」のチケットを購入いただいている場合のみ、個別対応いたします。

所轄税務署、インボイス制度電話相談センターなどに相談し、次のようにすることにしました。

• インボイス対応の領収書発行について

オンライン椅子ヨガ

本イベントはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです！

• 開演前
• 休憩時間（適宜）

一緒に「ちょっとメンテ」しましょう。
https://chotto-maint.com/online-yoga

グッズ

モンブランさんによるデザインの #朝までマークアップ のロゴ入りグッズ（22アイテム）をSUZURIで販売しています。

FAQ（よくある質問と、その回答）

セッション番号の見方を教えてください

24のセッションに「セッション番号」を設定しています。

• 最初のアルファベット：1時間ごと3組を「グループ」とし、AからHのグループに分けています。
• 次の数字：グループ内での出演順
• 「-」に続く数字：通しでのセッション番号

領収書について

インボイス対応の領収書は開催翌日にダウンロード方法をメールにてご案内します。

詳しくは、こちらのnoteをご覧ください。

スマホでも見られますか？

YouTube Liveで配信しますので、インターネット回線がある環境でしたら、PC/Mac、スマホ、タブレット、TVなどで閲覧可能です。

ただし、コーディングのデモは、スマホでは細かいところが見えにくいと思いますので、PC/Macでの閲覧をオススメします。

お申し込み後、メールが届かない…

お申し込み直後に「info@doorkeeper.jp」からメールが送信されています。事前・事後のアナウンスのメールを受け取れないとお困りになると思いますので、次を参考になさってください。

• 迷惑メール扱いになっていないか、ご確認ください！
• 住所録に登録してVIP扱いにしたり、メールサーバーにてホワイトリストに設定すると受け取りやすくなります。
• iCloudやYahoo!メール、Hotmailは受け取りにくいです（迷惑メールに入らず、サーバーではじかれてしまうのか見つかりにくい）。異なるメールアドレスにて申し込まれるのが安全かもです。
• キャリアのメールでは文字数制限のため、メールが受け取れないことがあります。
• 「アーカイブ視聴を含む」チケットを購入なさった方には「info@doorkeeper.jp」から、終了後にメールを送信します。

チケットを切り替えたい（無料 → アーカイブ）

Doorkeeperにログインし、いったん「当日の視聴のみ」チケットをキャンセルし、改めて「アーカイブ視聴付き」のチケットをお申し込みください。

• 終演時刻まで可能ですが、ギリギリだと決済でトラブることがあるため、余裕を持ってお願いします。

仲間と集まって見てもいいですか？

大歓迎です！

スライドやサンプルファイルなどのダウンロードはありますか？

次の方にはご用意しています。ぜひ、リアルタイムにご覧ください！

• アーカイブチケットを購入された方
• リアルタイム視聴され、1時間ごとのアンケートにお答えいただいた方（1時間ごと3組を「グループ」とし、グループ単位で提供します）

アーカイブ視聴のチケットを購入された方には、終了後にまとめページをご用意します。

アーカイブ動画はいつまで見られますか？

基本的に永久に見られます。

アーカイブは公開されますか？　それはいつですか？

基本的に公開予定ですが、公開時期については未定です。

動画を公開する場合でも、サンプルファイルなどの特典は付いていませんので、そのためだけにアーカイブを購入される意味はあります。

「いつでも見られる」と思うと、結局ずるずる見ないもの。「無料で見られる」となると、なおさらです。可能な範囲で当日、見られない分は終了後、早めに見ていただくのがよさそうです。

アーカイブ視聴ではノンストップ版を選べますか？

はい。

次の動画をご用意します。

• セッションごとに切り出した動画
• ノンストップのフル尺版（YouTubeのチャットは見えません）

字幕（文字情報）の提供はありますか？

• スマホなどでUDトークをご利用ください。URLはNotionをご覧ください。
• 配信画面には表示しません。

「アーカイブ視聴、特典付き（会社として申し込み、社内で共有）」のチケットについて教えてください

• 代表の方がお申し込みください。
• お申し込んだ方にメールをお送りします。
• 視聴URLや特典ファイルなどを社内で共有なさってください。

協力企業のご紹介

本イベントには、下記の企業の協賛、協力をいただいています。

• 文賢（ブンケン）～文章をより良くするための推敲・校閲・校正支援ツール
• KDDIウェブコミュニケーションズ レンタルサーバー「CPI」、簡単ホームページ作成「ジンドゥー」など提供
• 一般社団法人ウェブコンサルタント・ウェブアドバイザー協会 戦略を立て、ターゲットとするお客様に明確に伝え、選ばれ、成果を出すための教育を提供
• JILLA（日本イラストレーション協会）　文芸美術国保への加入や交流会などメリットいっぱい
• WEBSTAFF　あなたの“強み”をとことん見つける　IT・Web好きの転職エージェント

また、多くの制作会社に協賛いただいています。

• ウェブライダー
• LINICA
• エンタミナ
• コンセント
• サービシンク
• ビットエー
• トゥーアール（to-R）
• ヘルツ
• アップルップル
• CODE54
• HAMWORKS
• S-FACTORY
• necco
• FLAT
• ましじめ
• グローバルデザイン
• エイチツーオー・スペース
• Gear8
• マジカルリミックス
• ONiWA
• さきがけデジタル
• r360studio

通年で協賛を募集しています。検討くださいますと幸いです。

お問い合わせ

問い合わせはDoorkeeperのフォームからお送りください。

セッション情報

【A1-1】AIでCSSを自動生成！　bolt.newとCursorで実現するAIコーディング

今や、AIとコーディングは切っても切り離せない関係になりつつあります。

AIチャットへの相談や、エディタのコード補完、自動生成など「自分の手を動かさない」CSSコーディングが実現しつつあります。

このセッションでは、AIエディタの「Cursor」と、AI生成ツールの「bolt.new」を利用したAIコーディングの今をご紹介します。

特典（アーカイブチケット or アンケート回答）

• スライドPDF
  デモのソースコード

【A2-2】初心者が挑戦！CSSを使ってStudioでループアニメーションを実装してみよう！

Studioのデフォルト機能ではできないループアニメーションを、CSSの@keyframesを使って実装する方法を解説します。

CSS初心者の私が、同じ初心者でも真似しやすいポイントを押さえてお伝えします！StudioとCSSを使った新しい表現に挑戦したい方はぜひご参加ください。

特典（アーカイブチケット or アンケート回答）

• デモのソースコード

【B1-3】CSSでリッチなインタラクションを作ってみよう

@propertyによるカスタム変数の定義と、sin, cosなどの数学関数、transformプロパティを駆使して、CSSだけでリッチなインタラクションを実現できます。

少しの数学の知識があれば、WebGLのライブラリを使用せずとも、CSSのみで簡単な3D表現が可能であることを実践してみたいと思います。

特典（アーカイブチケット or アンケート回答）

• スライドPDF
  デモのソースコード

【B2-4】使って得するTailwind CSSの書き方

近年人気を集めているTailwind CSSの魅力と活用法をご紹介します。

Tailwind CSSは、2019年のv1.0の登場から進化を続け、Arbitrary Properties/Variantsなど柔軟な機能や書き方が増えており、利便性も上がっています。

「ユーティリティファーストって、余白やフォントサイズを指定できるくらいでしょ？」という方、そしてまだ触ったことがない方に向けて、「Tailwind CSSって、こんな風に書けるんだ！」をご紹介します。

【B3-5】CSSのゲームチェンジャー:has()の活用事例

2023年末に遂に全ブラウザ対応し、対応ブラウザも普及したCSSの:has()。

:has()を使うと、これまでJavaScriptを使わないと難したかった表現がCSSだけでできるようになったり、冗長なCSSのコードを短く安全に記述できるようになります。

本セッションでは、単なる:has()の使い方にとどまらず、開発現場で:has()をどのように活用できるのか実践的な実例を紹介します。

特典（アーカイブチケット or アンケート回答）

• スライドPDF
• デモのソースコード
  

【C1-6】CSS実装から始めるアクセシビリティ〜実務で役立つ4つの達成基準と実装テクニック〜

受託制作プロジェクトにおいて、アクセシビリティへの対応要件が増えています。

本セッションでは、Webアクセシビリティガイドライン（WCAG）2.2のうち、CSSに関連する実装について解説します。

レベルAAまでの達成基準から、実装頻度の高い要件に焦点を当て、現場で活用できる知見を共有します。

さらに、アクセシビリティのチェックツールの活用方法を紹介しながら、ツールだけでは発見できない課題への対処方法についても説明します。

【C2-7】CSSの変態直伝！ハイセンスCSSテクニック「CSSだけで実装するパララックススクロール」

近年のWebサイト表現は自由が度高くバリエーションも豊富ですが、それに比例して実装難易度も昔にくらべ高くなっています。

今回は、Webサイト制作初心者の方でも比較的扱いやすい「CSSだけで実装するパララックス（視差効果）」のテクニックをご紹介します。

CSSが秘める無限の可能性を感じワクワクしながら楽しく学びましょう！

特典（アーカイブチケット or アンケート回答）

• デモソースコード

【C3-8】font-feature-settingsで操るタイポグラフィの世界

なにげなく使っているフォントには、数多くの秘められた機能が存在しています。

それらの機能はデザインツールからだけでなく、CSSからも操れることをご存じですか？

フォントとCSSの関係性を知ることで、Web上のタイポグラフィの可能性が広がります。

本セッションでは、文字の振る舞いをCSSで変更する方法や、Figma上での文字設定をGoogle FontsのCDNでどこまで再現できるのかを、デモを交えてご紹介します。

特典（アーカイブチケット or アンケート回答）

• スライドPDF（デモの解説資料付き）

【D1-9】突撃！隣のスタイルシート

スタイルシートを書くとき、他の人がどのように書いているのか気になったことはありませんか？

例えばfont-familyの指定はどのようにしているのか、よく使われている単位は？など、実際のウェブサイトの傾向について知りたいと思ったことがあるはずです。

そこで本セッションでは、多くのエンジニアが一度は悩んだであろうこれらのポイントについて、東証プライム上場（旧・東証一部上場）企業約1,600社のウェブサイトを対象に調査した結果をご紹介します。

特典（アーカイブチケット or アンケート回答）

• スライドPDF

【D2-10】現場で役立つ失敗しないレイアウト作り！vw/vhの実践テクニック

CSSレイアウトでよく使われるvwやvh。

便利だけれど、「横スクロールが出る」「高さがズレる」といった問題で悩んだことはありませんか？

本セッションでは、初心者がつまづきやすいvw/vhの落とし穴をデモで解説しつつ、CSS変数とJSを活用した実践的な解決方法をご紹介します。

日々の制作現場で直面しやすい課題を解決するヒントがきっと見つかるはずです。

現場で役立つCSSの基本と応用を、この機会に学んでみませんか？

特典（アーカイブチケット or アンケート回答）

• スライドPDF
  デモのソースコード

【D3-11】CSS変数を利用して、ブロックエディタCMSの運用体験を1つ上に引き上げました

「ブロックをページ内の好きな所に配置できる」ブロックエディタを搭載したCMSが登場したことで、ウェブサイトの運用は格段にラクに、かつ自由度が高くなりました。

しかし、実はきちんと考えられた作成されたブロックでないと、「ブロックをどこでも好きな所に使う」ことはできません。

「ブロックをきちんと作る」ためにCSS変数を活用した例と、そこに至るまでに経た思考プロセスも併せてご紹介します。

【E1-12】セレクタと詳細度、見直すなら今！:where()が変えるCSS管理

大きく話題になることは少ないですが、2024年にリリースされたWordPressではCSSの詳細度が再検討され、テーマ管理を容易にするためにセレクタの詳細度を下げる方針が取り入れられました。

CSSの詳細度を抑えることは、普段のお仕事で書いているスタイルにも応用できる大切な考え方です。

本セッションでは、詳細度が高いと起こりがちな問題点を整理しながら、:where()などの擬似クラスを活用して保守性と柔軟性を高める具体的な方法を紹介します。

特典（アーカイブチケット or アンケート回答）

• スライドPDF
• デモのソースコード

【E2-13】10分でわかる！進化するWordPressサイト制作と便利プラグイン＆パターン活用

WordPressのブロックエディターやブロックテーマの登場により、サイト制作の手法が大きく変化しています。

本セッションでは、初心者の方にも分かりやすく、ブロックによる構築のメリットや最近のアップデートで追加されたCSS関連機能、ブロックパターンの活用などを10分で簡潔に解説します。

さらに、ブロックエディターをより活用するための便利なプラグイン紹介や、WordPress制作の新しい手法が学べる書籍、最新情報をスピーディーにキャッチアップする方法もあわせてご紹介します。

短い時間でポイントをしっかり押さえられる内容となっていますので、WordPressでのサイト制作を学習中の方も、既に実務で取り組んでいる方もぜひお気軽にご参加ください。

特典（アーカイブチケット or アンケート回答）

• スライド資料
• WordPressのお役立ち情報リンク集

【E3-14】スクリーンリーダー最適化のためのCSS

「スクリーンリーダー（画面読み上げツール）にCSSは影響します！」と言われても、ピンとこない方は多いのではないでしょうか。

実は、CSSの書き方一つで読み上げに影響を与えることがあります。

視覚的には問題なくても、音声として読み上げた場合にユーザー体験を損なうケースは少なくありません。

また、スクリーンリーダー対応を含むウェブアクセシビリティの確保は、視覚に頼らないユーザーだけでなく、すべてのユーザーが快適に利用できるウェブサイトを作る上で欠かせない要素です。

今回のセッションでは、スクリーンリーダーのデモを交えながら、CSSがどのように読み上げに影響を与えるのかを解説します。

特典（アーカイブチケット or アンケート回答）

• スライド資料
• 主要スクリーンリーダーによる調査結果

【F1-15】相対カラー構文とcolor-mix()関数で差をつける、2025年の色指定のテクニック

日々進化が止まらないモダンCSSですが、特に色指定に纏わるCSSはこの数年で革命が起こりました。

Oklchなどの新しく登場した色空間にも触れつつ、僕が昨年のCSSのコーディングでお世話になった「相対カラー構文」と「color-mix()関数」について便利なテクニックとそれぞれの使い分けについて解説します。

特典（アーカイブチケット or アンケート回答）

• スライドPDF
  デモのソースコード

【F2-16】CSS関数や変数とFigmaを連携！コーダーをダメにするデザインデータの作り方

Figmaの開発モードを活用するだけでもコーディングの工数は削減できますが、効率化をさらに進めてみませんか？

ローカルバリアブルの数値をCSS変数と統一し、「あるCSS関数」を取り入れることで、Figmaの開発モードで出力されるスタイルがより実用的に仕上がります。

また、メディアクエリの数も減らせるので、コーディング工数もさらに削減でき、より運用しやすいコードを実現できます。

FigmaのデザインデータとCSS関数を組み合わせ、多くのスタイルをコピペで効率的に構築できる「コーダーをダメにするFigmaデザインデータの作り方」をご紹介します！

特典（アーカイブチケット or アンケート回答）

• スライドPDF
• デモのソースコード
  

【F3-17】古くて新しいzoomプロパティー

CSSのzoomプロパティーはSafariとChromeでは古くからサポートされており、2024年にFirefoxでもサポートされました。

これによりzoomプロパティーは実務でも気軽に使えるプロパティーになりました。

zoomプロパティーはレスポンシブ対応においてとても有用なプロパティーです。

このセッションでは、zoomプロパティーの特徴と、どんなときに役に立つかの具体例を紹介します。

特典（アーカイブチケット or アンケート回答）

• CodeGrid記事「古くて新しいzoomプロパティー」無料開放（1週間）
• CodeGrid新規読者60日間無料
• スライドPDF
• デモのソースコード

【G1-18】今すぐ使おうコンテナクエリ！

CSSがどんどん進化して新しい機能も続々登場していますが、

実際のところ実務でどのくらい使い道があるのか正直よくわからず利用をためらっている人も結構いるのではないでしょうか？

このセッションでは数あるモダンCSSの中でも昨年実際に使ってみて特に「これはイイ！」と思ったコンテナクエリに注目して、どのようなケースで利用すると威力を発揮するのか、従来のメディアクエリと比較しながら具体的に紹介していきたいと思います。

【G2-19】あぶないCSS

CSSの進化に伴い「CSSだけで作る◯◯」という実験的なコードを見かける機会が増えました。

ドロップダウンメニュー、ハンバーガーメニュー、アコーディオン、ツールチップ、タブ、カルーセル、そしてモーダルダイアログ。

確かに、これらがCSSだけで作れたら便利です。

しかしコードを見てみると、操作不可能な状態を生み出してしまう「あぶない」ものが多いようです。

本セッションでは、こうしたCSSの問題点と解決方法を考えてみます。

特典（アーカイブチケット or アンケート回答）

• スライドPDF
• よくある「CSS × アクセシビリティ」課題リスト

【G3-20】Webページ表示速度やアクセシビリティを検証できる！Lighthouseの使いかた

Googleが提供している、Webページの表示速度やアクセシビリティについての状態を検証できるツール、Lighthouseを紹介します。

このセッションでは、Lighthouseを用いて検証結果のよいWebページと悪い結果のWebページをそれぞれ検証し、どの点を改善すると「よりよいWebページになるのか」を解説します。

Lighthouseを使ったことがない人でも、どの箇所を直せばよいのかの「勘どころ」がわかるようになる、初心者向けの内容です。

特典（アーカイブチケット or アンケート回答）

• スライドPDF
• デモのソースコード

【H1-21】アニメーションの12の原則をCSSで表現するには…？

CSSアニメーションを実装しているとき、「なんだか動きが直線的」「無機質」と感じることはありませんか？

1981年に出版された『ディズニーアニメーション The Illusion of Life ― 生命を吹き込む魔法 ― 』で紹介されたアニメーションの12の原則から、CSSアニメーションに取り込むコツをご紹介します。

コピペで使えるイージングから、@propertyを用いたアニメーション調整まで、今までCSSアニメーションが苦手だった方も、この機会にぜひチャレンジしてみてください。

特典（アーカイブチケット or アンケート回答）

• スライドPDF
• デモのソースコード

【H2-22】サンプルで学ぶCSSアニメーションの実践テクニック

このセッションでは、CSSアニメーションの実践テクニックとして、「ループする横スクロールアニメーション」と「スクロールで動画を再生するようなアニメーション」の2つを取り上げます。

いずれもJavaScriptを使用せずに実装する方法を解説し、実際の動きを確認しながらサンプルコードを通して学べるため、部分的な箇所からでもクライアントワークに応用できる内容となっています。

また、アクセシビリティを意識した作りについても紹介しますので、動きと使いやすさを両立しやすくなるはずです。

ぜひ本セッションを活用して、より魅力的なページ作りにお役立てください。

特典（アーカイブチケット or アンケート回答）

• スライドPDF
• デモのソースコード

【H3-23】Tailwind CSSに「インラインスタイルで十分」と言う人、こうなるけど大丈夫ですか？

Tailwind CSSは世の中にだいぶ浸透してきました。

しかし、Tailwindの話になると絶対にこうやって言う人が出ます。

「これを使うくらいならインラインスタイルで十分。

」

本当にそうなのでしょうか？

実際にインライン記述だけでスタイルを完結させようとするとどうなるのでしょうか？

十分と思っている人は現実的な問題を認識する機会に、考えたこともなかった人は技術選定の1つの要素にしてみてください。