当日参加できない方も、こちらにお申し込みいただければ後日アーカイブ（録画）を視聴いただけます。

毎年開催しているコーディング特集。ショートセッション4組にて構成します。

• サイト高速化入門 ページ表示速度の計測とフォントのサブセット化／相原 典佳
• Next.jsで始めるモダンウェブ制作／西畑 一馬（トゥーアール）
• WAI-ARIAから学ぶHTMLが面白くなる話／平尾 ゆうてん（ディーゼロ）
• dialog要素でつくるモーダルダイアログ／小山田 晃浩（ピクセルグリッド）

なお、Part 2を10月14日(金)に予定しています。

セッション概要

4つのショートセッションで構成します。

サイト高速化入門 ページ表示速度の計測とフォントのサブセット化

はじめてWebサイト表示高速化に取り組んでみたい、という方向けのセッションです。

Webページ計測ツールの「PageSpeed Insights」を使って、何も対策をしていないWebページの表示速度と、対策済みの表示速度を比較して、どのくらいの差があるのかを確認してみましょう。

webpとjpg、pngの比較、Google Fontsとサブセット化したフォントの比較、jQueryと素のJSの比較などを見ていきます。また、それらを実装するための方法もご紹介。

Next.jsで始めるモダンウェブ制作

話題のフレームワーク「Next.js」はWebアプリケーションの開発だけではなくWebサイトの制作でも力を発揮できるツールです。

本セッションではReactなどの他のJavaScriptフレームワークとの違いや、WordPressなどの従来のCMS開発との違いなどとともにNext.jsの魅力を紹介します。

また、Next.jsを利用する上でのメリット・デメリットや注意点の解説も行います。

WAI-ARIAから学ぶHTMLが面白くなる話

HTMLの要素の選び方、根拠を普段マークアップするときにしっかりと持っていますか？ 迷っていたり、気分で書いたりしていませんか？
多少のブレは許容するとしても、業務ではしっかりと品質として一貫性を持っていたいものです。

そんなときに拠り所にする要素としてWAI-ARIAという仕様があります。WAI-ARIAを学んでからHTMLについてもう一度向き合ってみませんか？

dialog要素でつくるモーダルダイアログ

モーダルUIを用意するとき、こんな悩みはありませんか？

• 「カスタマイズしづらく、毎回同じ見た目で妥協している」
• 「z-indexで重なりがおかしくなってしまう」
• 「ReactやVueで、PortalやTeleportに頼っている」

しかし、<dialog>を使えばJSの知識がほとんど不要で、CSSでカスタマイズしやすく、z-indexの重なり順考慮も不要です。このセッションでは<dialog>の利用方法、カスタマイズ方法、仕組みを解説し、みなさんの「モーダルめんどくさい」を克服します。

イベント概要

• 開催日：2022年9月16日（金）21:00 - 23:00
  • （最大24:00までアフタートーク）
• 形式：オンライン（Zoomウェビナー）
• 主催：CSS Nite
• 共催：DTP Transit

• 参加費（お一人）：

  • 5,000円（経費で参加）
  • 3,000円（自腹で参加）

• 「協賛企業枠」のチケットは、CSS Niteに年間で協賛してくださっている企業向けです。

参加資格などはありません

お仕事内容にかかわらず、興味があれば、どなたでもご参加ください！
学生や休職中、求職中の方も歓迎です。

当日の進行などに関して

• 開演の30分前くらい前（20:30くらい）からテスト配信をスタートしますので、音声などが聞こえるかチェックされてください。
• 開演の15分前から「椅子ヨガ」を行います。
• 終演時間は若干の延長の可能性があります。
• 途中に5-10分程度の休憩をはさみます。

ツイートなどの発信やスクショに関して

• 配信URL、および、その他の案内事項は、カウントダウンメールにてお知らせするNotionのフォローアップページに記載しています（終了後、スライドやリンク集、セミナー内容の補足などを掲載します）。
• ツイートされる方はハッシュタグを付けてください！
• スクショ（スクリーンショット）は自由にどうぞ！（事例の部分などでNGマークがついている箇所はご遠慮ください）
• スクショされるとき、講演者の顔が入ってもOKです。
• ツイートされたり、ブログに掲載されてもOKです。
• サンプルファイルや配布資料をそのまま再配布するのは、ご遠慮ください。

その他

• 開催前に「カウントダウンメール」、開催後に「フォローアップメール」をお送りします。こちらを必ずご一読ください。
• 本セミナーのタイトルや内容は調整されることがあります。

オンライン椅子ヨガ

今回のCSS Niteはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです！

• 20:45-20:58　開演まで
• 21:55-22:05　休憩時間（前後することがあります）

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

タイムテーブル

タイムテーブルはあくまでも目安で、状況に応じて調整しながら進めます。

時刻	コンテンツ
20:30	配信開始
20:45	「椅子ヨガ」
21:00	番組開始、オープニング
21:10頃	本編開始
22:00前後	休憩（椅子ヨガ）
23:00	終了予定
23:10	アフタートーク
24:00	完全に終了

後日の視聴

当日見られなかった方、および、改めて見返したい方には、5日後（翌月曜日）に発行するフォローアップメールにて視聴URLをお知らせします。

お振込の方

会社から複数名にて参加される場合には、まとめてお振込いただき、振り込み後にご一報ください。

パブリックビューイング（宮崎）

宮崎県のKIW MIYAZAKI TRUNKにてCoder’s High 2022 パブリックビューイングが行われます。

宮崎在住の方で、わいわい楽しみたいという方は、ぜひ、検討なさってください！

FAQ（よく聞かれる質問と、その回答）

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

もちろん可能ですが、スライドなどの画面の細かいところが見えにくいと思います。

参加資格はありますか？

ありません。お仕事内容にかかわらず、興味があれば、どなたでもご参加ください！
学生や休職中、求職中の方も歓迎です。

Twitter/note/YouTubeをフォローください！

セミナー前後に関連情報をお出しすることがありますので、Twitter/note/YouTube/LINEをフォローくださいますと幸いです。

• Twitter
• note
• YouTube
• LINE

CSS Nite（シーエスエス・ナイト）は、ウェブ制作に関わる方のためのセミナーイベント。2005年10月にスタートし、2021年10月で丸16年。

これまでに、800回を超える関連イベントを通して、のべ75,000名を超える方にご参加いただいています（2021年10月現在）。

• CSS Nite公式ウェブサイト

協賛

CSS Niteは下記の企業に協賛、協力をいただいています。

• KDDIウェブコミュニケーションズ レンタルサーバー「CPI」、簡単ホームページ作成「ジンドゥー」など提供
• Webクリエイター能力認定試験（サーティファイ）　年間受験者数15,000人以上
• Webフォント・サービス FONTPLUS

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