脱IE時代のイマドキCSS 2023

2023/07/28(金)21:00 〜 23:00 開催

ブックマーク

#JavaScript, #CSS, #フロントエンド

イベント内容

noteにてアーカイブ（スライド・動画）を販売しています。
「アーカイブを見たい方」「申し込みそびれてしまった方」はご利用ください。

https://note.com/cssnite/n/n91bb82485ddc

IE時代に必要だったレガシーなCSSを、イマドキはどうやって書くのかを鹿野壮さんに解説いただきます。

「当日の視聴は無料」スタイルで開催します。ぜひ、ご参加ください！

脱IE時代のイマドキCSS 2023

IEの終焉に伴い、開発現場では新しいCSSが続々と使えるようになっています。新しいCSSを使えば、これまでJavaScriptを使って長く書いていたコードが短く書けたり、従来は画像を作らないとできなかったデザインを数行で実現できたり、ユーザー体験を向上させるコードを簡単に実現できたりします。

しかし、現場ではまだ過去の手法を使い続けているケースが散見されます。長くて読みづらいコードは、開発者の生産性やコードの保守性に悪影響を及ぼすばかりか、ユーザー体験にもマイナスの影響を与えます。

本セッションでは、IE時代に必要だったレガシーなCSSを、イマドキはどうやって書くのかを解説します。

以下の内容に重点を置いて解説します。

デザイナーにも嬉しいデザインを実現するCSS
@media だけでない、レスポンシブ対応の最新のアプローチ
CSS Grid・Flexboxの最近の進化
コードの簡潔さと効率性を高める新記法
ユーザー体験を向上させるための新しいCSS

具体的に次の内容を紹介します（予定）。

CSS Gridを使って、最短2行の上下左右中央揃え
よく作るレイアウトを div で過剰に囲まずに CSS Grid でスッキリ実装する
レスポンシブ対応時、ウインドウサイズを基準にするのではなく、 @container で任意の要素を基準にする
論理プロパティ margin-inline や padding-block で、短く margin や padding を指定する
メディアクエリで min-width や max-widthではなく、 < や <= を使って短く書く
スマートフォンの可変ビューポート対応には 100vh ではなく 100svh を使う
scroll-behavior・scroll-snap-type ・ scroll-margin-topを組み合わせて、JavaScriptを使わずにリッチなスクロールコンテンツを作る
近い将来使えるようになる便利CSS

本セッションを通し、一緒に新しいCSSについて学びましょう。

出演

鹿野壮（かの・たけし）

株式会社マネーフォワードビジネスカンパニー経理財務プロダクト本部会計開発部副部長

九州大学でメディアアートを学んだ後、ウェブ制作会社にてウェブページ制作やモバイルアプリ開発に携わる。現在は株式会社マネーフォワードで、フロントエンドチームのリーダーをしている。最新のフロントエンド技術を駆使したコンテンツづくりが好きで、暇があればコードを書いている。TechFeed公認エキスパート。

近著に『JavaScript コードレシピ集』（技術評論社）がある