css nite Coder’s High 2022 (Part 1)のアーカイブを見ました。

2022年9月16日（金）に開催されたcss niteのオンラインセミナー、当日参加できなかったのでアーカイブを 見させていただきました。

4つのセッション

下記の4つのセッションがありました。

• サイト高速化入門 ページ表示速度の計測とフォントのサブセット化
• Next.jsで始めるモダンウェブ制作
• WAI-ARIAから学ぶHTMLが面白くなる話
• dialog要素でつくるモーダルダイアログ

この中でも私の実際の業務ですぐに使えそうな「高速化入門」と「dialog要素でつくるモーダル」について詳しく見ていきます。

サイト高速化入門

スマホの閲覧数の方が多くなってから、高速化についてちょこちょこは対応していました。このサイトも特にWordPress化してから表示が遅くなっていることが気になっていました。きちんと体型的に何をやれば良いかは整理されていなかったので、とても参考になりました。

こちらのセッションでは高速化のために、大きくは「PageSpeed Insights」の見方と「フォントのサブセット化」の２つについて解説されていました。「PageSpeed Insights」について、pcとスマホのそれぞれの点数やその下の要因をチラッと見るくらいでしたが、詳しい見方を教えていただいて、全然見ていなかった部分を知ることができました。

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

jsを直接書いたりするのが苦手な私は、今までモーダル画面をコーディングする時は大体jQueryを使っていました。<dialog>という要素を使うとモーダルが作れるようです！ポイントとしては、重なりを一番前にできること。z-indexでいくら数値を大きくしても<dialog>の方が一番手前に来てくれるようです。

もっと詳しい内容が知りたい方は、css niteCoder’s High 2022 (Part 1)のアーカイブはこちらからも見ることができます。（有料note）

最近セミナーなどに参加してなかったのですが、時々情報収集のために参加した方が良いですね。オンラインで自分の都合良い時に倍速で見れるようになって、とても助かります。