Doorkeeper

CodeGridから読み解くイマドキのCSS 第二弾

2021-11-19(金)20:00 - 22:00 JST
オンライン リンクは参加者だけに表示されます。
申し込む
経費での参加 5,000円 前払い
申込締切
11月19日 22:00
自腹での参加 2,700円 前払い
申込締切
11月19日 22:00
CodeGrid読者割(経費での参加) 4,200円 前払い
申込締切
11月19日 22:00
CodeGrid読者割(自腹での参加) 2,500円 前払い
申込締切
11月19日 22:00
協賛企業枠 無料
申込締切
11月17日 20:00
出演者、スタッフ 無料

詳細

フロントエンドに関わる人々のためのオンラインメディアとして、毎週配信されている「CodeGrid」。好評だった今春の第一弾に続き、CodeGridの中でも主にCSSに関する記事で反響が大きかったテーマを、4つのセッションで取り上げる第二弾です。登壇者は、執筆者でありピクセルグリッドのエンジニアの4名です。

  • IE11がない時代のコーディング/小山田 晃浩
  • フォーカスと:focus-visible/矢倉 眞隆
  • 日本語文字組みで知っておきたいCSS/國仲 義則
  • Headless UIでスタイル自由でアクセシブルなUIを/高津戸 壮

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

CodeGridについて

ピクセルグリッドのフロントエンド・エンジニアが、現場で使った実感から本当に実務に必要な知識を記事として配信する有料オンラインメディア。

基礎から最新トレンド情報まで、毎週木曜日に最新記事が更新(月4回配信)。
https://www.codegrid.net/about/

IE11がない時代のコーディング

長年、制作現場での対応が必要だったIE11は、2022年6月15日をもってマイクロソフトによる正式サポートが終了します。また、それに向けて主要なWebサイトも続々IE11のサポートを対応外とし始めています。

私たちのWeb制作現場でもIE11のサポートを対応外とする流れが進んでいくものと思われますが、IE11を外すと開発の仕方や表現の幅はどう変わるでしょうか? このセッションでは、「IEとはなにか?」「MS Edgeとはなにか?」をおさらいし、IE11対応が不要となった時代のコーディングの知識を共有します。

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

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

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


@yomotsu

フォーカスと:focus-visible

2020年と2021年は:focus-visibleという擬似クラスの実装が進んだ年でした。これは古くから存在する:focus擬似クラスに関わりのある、新しい疑似クラスです。

この:focus-visibleですが、アクセシビリティとCSSでのスタイルにとって重要な機能です。今回のセッションはこの:focus-visibleについて、:focusとの違いや使い方、:focus-visibleが提案された背景をふまえつつ、フォーカスを効果的に伝える方法を考えます。

矢倉 眞隆(やくら・まさたか)

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

Web標準技術やブラウザの実装動向に明るく、イベントでの講演や雑誌・オンラインメディアへの原稿執筆、書籍の監修・監訳などを数多く経験。

@myakura

日本語文字組みで知っておきたいCSS

日本語(に限らず東アジアの言語)では、欧文とは異なる文字組みが求められます。文字間などの細かい部分より前の話で、紙の文書では当たり前に見かける文字組みの機能でもWebサイトでは実現が難しかったり、以前から存在はするものの最近になって仕様が新しくなったものもあります。

このセッションでは、日本語Webサイトにおける文字組みの機能のうち、CSS標準機能を使って行える処理をいくつか紹介します。ルビや圏点(傍点)、句読点の行末処理などといった今すぐ使える機能から、将来使えるようになるかもしれない便利な機能を見ていきましょう。

國仲 義則(くになか・よしのり)

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

HTML、CSS、ビュー周りのJavaScriptを主に担当。CSSアニメーション・トランジションを使用した印象的な表現を得意とする。

@ub_pnr

Headless UIでスタイル自由でアクセシブルなUIを

これまでのUIライブラリというのは、基本的にスタイルの情報も一緒に組み込まれているものが主流でした。「いい感じ」の見た目のダイアログやアコーディオンが、お手軽に実装できてしまうという具合です。

しかし、その特長は、デザインの変更が自由にならないという欠点にもなることがあります。また、タブやキーボードでちゃんと操作できるか、スクリーンリーダーでの読み上げは問題ないかという点も、そのUIライブラリの出来栄え次第という問題があります。

Headless UIは、このような問題をスマートに解決してくれるUIライブラリです。自由にスタイルを当てることができ、アクセシブルなUIを作ることができるといった特徴があり、開発コストを大きく削減してくれる存在です。このセッションでは、Headless UIはどのようなものなのかについて紹介します。

高津戸 壮(たかつど・たけし)

株式会社ピクセルグリッド
テクニカルディレクター

数多くのWebサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。

@Takazudo

イベント概要

  • 開催日:2021年11月19日[金] 20:00-22:00
  • 形式:オンライン(Zoomウェビナー)
  • 主催:CSS Nite
  • 参加費(お一人)
    • 5,000円(経費での参加)
    • 2,700円(自腹での参加)
    • CodeGrid読者割(経費での参加):4,200円
    • CodeGrid読者割(自腹での参加):2,500円

終演時間は若干の延長の可能性があります。

参加費について

2つの金額設定を設けています。

  • 企業、フリーランスを問わず、経費として処理される方は「経費での参加」のチケットを選択してください。
  • 学生、休職中、就職活動中、また、経費としては落ちず個人負担で参加される方向けに、応援の意味で「自腹での参加」というチケットを設けています。切り分ける方法はなく、誰でも「自腹での参加」ができてしまいますが、みなさんの良心を信じます。

もちろん CSS Niteの運営を応援したい方、お金が余ってしかたない方は、個人であっても「経費で参加」のチケットを選択していただくことはウェルカムです!

当日の進行などに関して

  • 19:30以降にZoomにログインしてください。Zoomアプリは最新版にしておくことをオススメします。
  • 19:45から「椅子ヨガ」を予定しています。
  • 質問事項は、Zoomウェビナー内の「Q&A」でなく、Sli.doにご記入ください。事前に記入いただくことも可能です。
  • ツイートされる場合には、ハッシュタグは「#cssnite」をお付けください。
  • 終演時間は若干の延長の可能性があります。また、終了後、1時間を目安に「アフタートーク」を予定。

視聴に関して(1)

  • Zoomの視聴URLは前日・当日に再確認をお願いします。
  • 参加される方のカメラ、マイクは自動的にOFFになっています(ONにできません)。
  • 画面共有でスライドやデモ画面を表示しますので、PCでの参加をおすすめします(スマホ/タブレットでも参加できます)。
  • 内蔵スピーカーでは聞き取りづらい場合があります。イヤホン・ヘッドホンの利用を推奨します。
  • 120分程度の接続で数百MBのデータ通信が必要です。通信制限の上限等にご注意ください。

視聴に関して(2)「音声が途切れる。画面が遅延する/カクカクする」場合

  • Zoomから退出したり、PCを再起動するなどして再度接続してみてください。
  • バックグラウンドで走っているアプリケーションを終了することで改善されることもあります。
  • 可能であればWi-Fiでなく有線で接続してみてください。
  • 改善されない場合には、後日提供する動画をご覧ください。

後日の視聴

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

  • 動画の視聴期限は開催から3週間を予定。

お振込の方

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

その他

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

オンライン椅子ヨガ

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

  • 19:45-20:00 開演まで
  • 20:55-21:05 休憩時間

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

協賛

CSS Niteには次の企業をはじめ、多くの制作会社に協賛いただいています。

株式会社ヘルツ一般社団法人ウェブコンサルタント協会a-blog cms

コミュニティについて

CSS Nite

CSS Nite

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

メンバーになる