Doorkeeper

Coder's High 2022 (Part 1)

2022-09-16(金)21:00 - 23:00 JST
オンライン リンクは参加者だけに表示されます。
申し込む
経費で参加 5,000円 前払い
申込締切
9月16日 19:00
自腹で参加 3,000円 前払い
申込締切
9月16日 23:00
協賛企業枠 無料
申込締切
9月14日 21:00
出演者、スタッフ 無料
申込締切
9月14日 21:00

詳細

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

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

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

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

セッション概要

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

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

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

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

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

相原 典佳(あいはら・のりよし)

DTP、Webアシスタントディレクター業務を経たのち、2010年にフリーランスとして独立。ディレクションからデザイン、フロントエンド構築まで、一貫したWebサイト制作を提供している。また、2011年からデジタルハリウッドにて講師を担当。

共著者として『初心者からちゃんとしたプロになる Adobe XD基礎入門』、『初心者からちゃんとしたプロになる HTML+CSS実践講座』、『初心者からちゃんとしたプロになる HTML+CSS標準入門』(いずれもMdN刊)がある。

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

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

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

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

西畑 一馬(にしはた・かずま)

株式会社トゥーアール

2016年2月にフロントエンド専門のWeb制作会社「株式会社トゥーアール」を設立し、ReactなどのJavaScriptフレームワークを利用したWebアプリケーションやWebサイトの受託開発を行っている。「初心者からちゃんとしたプロになる JavaScript基礎入門」や「Web制作の現場で使うjQueryデザイン入門」などの執筆著書多数。

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

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

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

平尾 ゆうてん

株式会社ディーゼロ
ウェブアクセシビリティ専門家

アクセシビリティをベースに情報設計・広義のデザインから、実装、テスト、運用までのアドバイスやレビューを中心としたコンサルティングを行っている。また、社内では品質の管理やガイドラインの整備など「仕組み」による改善に取り組んでいる。HTMLリンター「markuplint」の開発者。HTMLのプロ。

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

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

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

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

小山田 晃浩(おやまだ・あきひろ)

株式会社ピクセルグリッド
フロントエンド・エンジニア

大規模Webサイトの壊れにくいHTML/CSS設計及び実装を経験し、SVG・Canvas・WebGLの扱いも得意としている。外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。three.jsのCSS3DRendererのコントリビューター。2011年から2020年まで10連続でMicrosoft MVP for IEを受賞。


@yomotsu

イベント概要

  • 開催日: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をお知らせします。

お振込の方

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

FAQ(よく聞かれる質問と、その回答)

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

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

参加資格はありますか?

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

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

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

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

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

協賛

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

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

株式会社ヘルツ有限会社アップルップルともすた株式会社トゥーアール(to-R)株式会社Gear8Qiita株式会社株式会社エイチーム

コミュニティについて

CSS Nite

CSS Nite

CSS Nite(シーエスエス・ナイト)は、ウェブ制作に関わる方のためのセミナーイベント。2005年にスタートし、2021年10月で丸16年。 仙台、大阪、岡山、札幌、甲府、神戸、福岡、長野、青森、名古屋、沖縄、福島など首都圏以外での“地方版”なども開催しています。地方版は、現地の有志などにより主催・運営されています。 これまでに、800回を超える関連イベントを通して、のべ75,000名...

メンバーになる