CSS Dayとは？2026年の全14講演と2025年の振り返り、2027年6月の会場・チケット

CSS Dayは、オランダのアムステルダムで毎年6月に開かれるCSS専門のカンファレンスです。2026年は6月11日・12日に第12回が開かれ、色、文字サイズ、グリッドレーン、カスタマイズ可能なselectなど14本の講演がありました。次の第13回は2027年6月3日・4日で、会場がOosterkerkに変わります。この記事では、公式サイトの時刻表と講演概要をもとに2026年と2025年の全講演を整理し、講演で扱われた機能が2026年11月時点でどこまで使えるかをBaselineのデータで確かめます。2027年に参加するためのチケット・会場・ビザの条件もまとめます。

まとめ：CSS Dayの要点（2026年11月時点）

• CSS Dayは2013年に始まった年1回のCSSカンファレンスで、2022年からは2日ともCSSだけを扱います。講演は1トラック制で、1日7本ずつ計14本です。
• 2026年（第12回）は6月11日・12日。Lea Verou、Jake Archibald、Bramus Van Damme、Una Kravets、Eric Meyerらが登壇し、Google・Mozilla・Microsoft・Ladybirdなどブラウザ開発側の登壇者が多い回でした。
• 2026年の動画はConffabの有料配信（AU$49）です。2025年の14講演はYouTubeで無料公開されています。
• 講演で扱われた機能のうち、スクロール駆動アニメーションは2026年10月27日にBaselineへ入りました。if()・grid-lanes・カスタマイズ可能なselect・text-scaleのメタタグは、まだ主要ブラウザがそろっていません。
• 2027年（第13回）は6月3日・4日に新会場のOosterkerkで開催。2026年予算枠のチケットは€675＋オランダ付加価値税21%で、請求書払いで申し込めます。

CSS Dayとは：成り立ちと「2日なのにDay」の理由

CSS Dayは、Web Conferences Amsterdamが主催する年1回のCSSカンファレンスです。公式サイトのAboutページは、仕様を書く人・ブラウザを実装する人・教える人・書く人を集め、CSSの現状と今後の機能を議論する場だと説明しています。入門講座ではなく、仕様策定中か実装が始まったばかりの機能を、当事者から聞ける場です。

2013年にKrijn HoetmerとPPK（Peter-Paul Koch）が立ち上げ、Krijnは2024年の開催を最後に運営から退きました。現在はPPKをEventstackが支える体制です。開催形態は次のように変わってきました。

2日間になっても名前を「CSS Days」に変えなかったのは、ロゴを作り直す必要があり、ロゴもカンファレンスの歴史の一部だからだと公式サイトは書いています。

開催概要：2025年・2026年・2027年の比較

2025年・2026年はどちらも、アムステルダム現地時間の8時30分開場、9時20分開会、9時30分から1本目の講演が始まり、18時から21時までは会場で飲み物と軽食をとりながら話す時間でした。使用言語は英語です。2026年の会場は、主催者PPKが2026年4月14日のブログでZuiderkerkと書いています。

公式サイトの2026年の参加者一覧には255人が名前を載せています。国コード欄で数えると、オランダ136人、ドイツ31人、イギリス19人、ベルギー14人、フランス8人の順でした。2025年（297人）はオランダ144人、ドイツ33人で、2年とも参加者の約半数がオランダからです。日本の国コードは2025年に2人、2026年は0人でした。一覧に載るのは名前の公開に同意した人だけなので、実際の参加者数とは一致しません。

2026年（第12回）の全14講演

時刻表は公式サイトのSchedule、講演概要はSpeakersに載っています（2027年の発表が進むと内容が差し替わります）。

1日目（6月11日）の7講演

2日目（6月12日）の7講演

2026年の論点：CSSの役割拡大と色・文字サイズ・ブラウザ実装

2026年は、これまでJavaScriptや独自実装に頼っていた仕事をCSSとブラウザが引き受ける、という方向の講演が複数ありました。Kevin Powellは、拡張されたattr()、スタイルクエリ、if()によってCSSが値を直接読んで判定できるようになり、JavaScriptはデータを取ってきてCSSに渡すだけになる、という役割分担を示しています。Jake Archibaldは、selectを自由にスタイルできるようになるまでに、先に入る必要があった周辺機能とその標準化の経緯を扱いました。Patrick Brossetは、グリッドに似ているが詰めて並べるgrid-lanes（以前masonryと呼ばれた配置）の仕組みと、グリッドとの違いを解説しています。

色の講演は2本ありました。Lea Verouは、色を明るくしたのに見た目が合わない、2色を混ぜたら濁ったといった日常の困りごとから、新しい色の機能の使いどころと限界を話しています。Sara Joyは、color-schemeとそれに関わる色関数で複数テーマを出す方法を、本番で使えるものとまだ早いものに分けて整理しました。

実装の内側を見せる講演もありました。Ladybirdブラウザを開発するJelle Raaijmakersは、CSSの値が宣言値・カスケード値・指定値・計算値・使用値・実際値の6段階を経て画面に届く処理を、自分たちのエンジンの実装で説明しています。getComputedStyle()が名前どおりの計算値を返すとは限らない理由も、この6段階で説明できます。

BBCのJosh Tumathは、OSの文字サイズを大きくしても多くのWebサイトでは文字が大きくならない問題を取り上げました。講演概要では「スマートフォン利用者の約35%がOSの文字サイズを変えている」、講演後の要約記事では「AndroidとiOSの利用者の約37%」と、本人が述べています。本人が公開した講演の要約によると、CSS Working Groupに提案した対策は2つです。ページ全体の既定の文字サイズをOSやブラウザの設定に合わせるメタタグと、設定の倍率を一部の要素だけに使う環境変数 env(preferred-text-scale) です。メタタグは次の1行で、ルートのfont-sizeをpxで固定せず、remやemで文字を指定しているサイトなら、そのまま利用者の設定に合わせて文字が大きくなります。

<meta name="text-scale" content="scale">

2026年11月時点で、このメタタグに対応しているのはChrome・Edge 146以降だけです。未対応のブラウザではメタタグが無視されて従来どおりの表示になります。対応ブラウザで入れる前に、文字を大きくしたときに固定の高さや段の幅で文字が欠けたり重なったりしないかを確かめてください。文字サイズの単位とブレークポイントの設計はレスポンシブデザインの作り方で扱っています。

登壇者には、Google（Bramus Van Damme、Una Kravets）、Mozilla（Jake Archibald）、Microsoft Edgeチーム（Patrick Brosset）、Igalia（Eric Meyer）、Ladybird（Jelle Raaijmakers）と、ブラウザやエンジンの開発に関わる人が並びました。参加者一覧のページも、CSS Working Groupのメンバーやブラウザベンダーの人が例年来ていると書いており、仕様の当事者と直接話せるのがCSS Dayの特徴です。

2025年（第11回）の全14講演

2025年の時刻表・講演概要・スライドは、公式サイトの2025年ページに残っています。

2025年の中心は、UI部品をブラウザ標準の部品とCSSに置き換える流れでした。Brecht De Ruyteはカスタマイズ可能なselectを、対応ブラウザでだけ見た目を強化するプログレッシブエンハンスメントとして示し、AppleのWebKitエンジニアのTim Nguyenはフォーム部品がスタイルしにくかった理由と今後の改善を説明しています。Cyd Stumpelは、GSAPやSwupで組んでいたアニメーションをView Transitionsとスクロール駆動アニメーションへ移した経験から、置き換えられることとまだできないことを整理しました。

設計の話では、Chris Coyierが@scopeはビルドツールのスコープ処理と同じではない（CSS Modulesを置き換える話ではない）と断ったうえでスコープの考え方を扱い、Miriam Suzanneは公開スライドで@functionと@mixinの構文を示しつつ、プリプロセッサはすぐには不要にならないと結論づけています。Ahmad Shadeedはコンテナクエリと:has()でコンポーネント自身が周囲に合わせて形を変える作り方を、Rachel AndrewはMulticol Level 2のcolumn-heightとcolumn-wrap、段の間に線を引くギャップ装飾を示しました。Hidde de VriesはW3CのWeb Sustainability Guidelinesを紹介しました。

2026年にもselectとView Transitionsが取り上げられ、2年続けて同じ機能が題材になりました。どちらも2025年6月の開催時点ではブラウザの対応がそろっていませんでした。2026年は、Bramus Van DammeがView Transitionsを仕様の想定を超えて使う応用を、Jake Archibaldがselectの標準化の経緯を扱っています。

講演で扱われた機能の現在地（2026年11月時点）

次の表は、npmで2026年11月2日に公開されたweb-features 3.45.0のBaselineデータで確認したものです。「新たに利用可能」はChrome（デスクトップ・Android）、Edge、Firefox（デスクトップ・Android）、Safari（macOS・iOS）の最新版がそろって対応した状態、「広く利用可能」はそこから30か月たった状態を指します。読み方はWeb Platform Baselineとは？3つの状態と対応ブラウザ、確認・ビルド・Lintへの組み込み【2026年10月】で詳しく扱っています。

「広く利用可能」のコンテナクエリ・:has()・offset-path・color-schemeは、本番で採用しやすい機能です。採用する前に、自社サイトが対応を約束しているブラウザの範囲と照らし合わせてください。実装手順はCSSコンテナクエリ（@container）の使い方｜container-type・cqi単位・メディアクエリとの違いにまとめています。「新たに利用可能」の機能は主要ブラウザの最新版ではそろいましたが、古い端末の利用者が多いサイトでは、未対応でも表示が崩れない書き方にとどめるのが安全です。contrast-color()で文字色を自動で決める場合も、結果がWCAGのコントラスト比を満たすかは別に確かめる必要があります。基準値はWebアクセシビリティのコントラスト比：4.5対1と3対1の適用範囲・CSS実装・自動検証の落とし穴を参照してください。

if()・@function・@mixinを前提に設計を組むのは、まだ早い段階です。if()と@functionはChromium系だけが対応し、@mixinは対応ブラウザがありません。Sassのミックスインや条件分岐を置き換える目的で入れると、FirefoxとSafariでは関数を使った宣言が効かず、ミックスインはどのブラウザでも適用されません。grid-lanesも通常設定で使えるのはSafariだけで、当面は通常のグリッドで代わりのレイアウトを用意する前提になります。グリッドとgrid-lanesの関係はCSS Gridの使い方｜auto-fitとsubgridの実装とGrid Lanes対応状況で触れています。

カスタマイズ可能なselectは、2025年のDe Ruyteの講演と同じく、対応ブラウザでだけ見た目を変える形なら今日から使えます。通常のselectとして動くHTMLを保ち、追加のCSSを@supportsの中に限定すれば、未対応のFirefoxでは標準の表示に戻ります。各optionにはテキストを残し、未対応環境での表示と操作も確認してください。

@supports (appearance: base-select) {
  select,
  ::picker(select) {
    appearance: base-select;
  }
}

選択肢の一覧（ピッカー）をボタンの近くに置く位置決めには、アンカー配置が使われています。単独で使うときの書き方はCSS Anchor Positioningの使い方｜position-area・@position-tryと対応ブラウザで解説しています。

講演動画・スライドの入手先

2026年の14講演の動画は、公式サイトが案内しているとおりConffabで公開されています。Conffabは有料で、2026年11月時点ではCSS Day 2026の全講演がAU$49、Conffab Proの12か月分と組み合わせるとAU$249で販売されています。

2025年の14講演は、主催者のYouTubeチャンネルWeb Conferences Amsterdamで無料で見られます。2日間をまとめた「CSS Day 2025 compilation」もあり、公式サイトの2025年ページから再生リストに移動できます。

スライドは、公式サイトの時刻表にある「Slides」から各登壇者の資料に移動できます。2026年はJosh Tumath（要約記事を兼ねる）、Lyra Rebane、Sara Joy、Patrick Brosset、Manuel Matuzović、Adam Argyleの6講演に、2025年はMiriam Suzanne、Rachel Andrewなどの講演にリンクがあります。

2027年（第13回）の参加方法：チケット・会場・ビザ

2027年のチケット価格と購入条件、2026年の販売実績

公式サイトのトップページによると、2026年の予算で支払いたい企業向けに、2027年のチケットを請求書払いで販売しています。価格は€675にオランダ付加価値税21%を足した額（税込€816.75）で、5枚以上の注文は10%引きです。申し込みは、必要な枚数、事務担当者、会社の住所、請求書に入れる発注番号などを主催者に伝える方式です。早割は2027年の予算扱いで別に出る予定で、案内はニュースレターで先に届きます。

参考までに2026年の条件を挙げます。PPKのブログによると、€675だった価格は2026年5月14日から€750に上がり、5月1日以降はStripeでの支払いだけになって請求書払いはできなくなりました。チケットページでは追加販売分が€750（税込€907.50）と案内されていました。チケットは払い戻しできませんが、他人への譲渡はできます。料金には両日の会場への入場、コーヒー・昼食・軽食、両日夜の飲み物と軽食が含まれます。オランダのフロントエンド団体Fronteersは、2026年に会員向けとして、早割終了後の通常価格から€100引く割引を案内していました。

2027年の新会場Oosterkerkと交通・車椅子での来場

2027年からはOosterkerk（Kleine Wittenburgerstraat 1, 1018 LS Amsterdam）に会場が移ります。講演・休憩・昼食・夜の懇親会はこれまでどおり同じ建物の中です。アムステルダム中央駅から42番のバスで行くと建物の前に停まり、トラム1番なら降りてから徒歩5分です。車椅子で入れますが、事前に連絡するよう求められています。

ビザの招へい状と教員・学生向けの制度

2026年の案内では、シェンゲン圏の短期滞在ビザが必要な人には4月下旬までに申請を始めるよう勧めていました。チケットを購入・支払いしたうえで連絡すると招へい状が発行され、ビザが却下された証拠を5月28日までに送ればチケット代が返金される条件です。大学でCSSを教える教員がチケットを買うと学生用の無料チケットを申し込める制度もあり、4月末までの申し込みが必要でした（枚数は保証されません）。2027年の条件は、同年の公式案内で確かめてください。

よくある質問

CSS Dayはいつ、どこで開催されますか？

毎年6月にオランダのアムステルダムで2日間開催されます。2026年は6月11日・12日、次の第13回は2027年6月3日・4日で、会場はOosterkerkです。

CSS Dayの講演動画は無料で見られますか？

年によって違います。2025年の14講演はYouTubeの「Web Conferences Amsterdam」で無料で見られます。2026年の講演はConffabでの有料公開（全講演AU$49）です。

2日間の開催なのに、なぜ「CSS Day」という名前なのですか？

最初の3回は1日だけのカンファレンスで、その名前とロゴを引き継いでいるためです。2016〜2019年はCSSの日にテーマ日を足した2日構成で、2022年から2日ともCSSを扱う形になりました。

CSS Dayのチケットはいくらですか？

2027年分は2026年の予算枠で€675＋オランダ付加価値税21%（税込€816.75）、5枚以上なら10%引きです。2026年は5月14日に€750へ値上げされました。2027年の早割はまだ発表されていないので、ニュースレターの案内と比べて判断してください。

CSS Dayで取り上げられた機能はもう使えますか？

機能によって違います。コンテナクエリ・:has()・offset-pathは「広く利用可能」、@scope・field-sizing・同一ドキュメントのView Transitions・スクロール駆動アニメーションは「新たに利用可能」です。if()・@function・@mixin・grid-lanes・カスタマイズ可能なselectは、2026年11月時点で主要ブラウザがそろっていません。

関連記事

• Web Platform Baselineとは？3つの状態と対応ブラウザ、確認・ビルド・Lintへの組み込み【2026年10月】
• CSSコンテナクエリ（@container）の使い方｜container-type・cqi単位・メディアクエリとの違い
• CSS Anchor Positioningの使い方｜position-area・@position-tryと対応ブラウザ
• CSS Gridの使い方｜auto-fitとsubgridの実装とGrid Lanes対応状況
• Webアクセシビリティのコントラスト比：4.5対1と3対1の適用範囲・CSS実装・自動検証の落とし穴