「当日の視聴は無料」スタイルで開催します。ぜひ、ご参加ください！
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について学びましょう。
