12月1日 (金) に Meguro.css #9 が開催されました！オロからの提供で、会場と懇親会の飲食の用意させていただきました。
Meguro.css はゆるく CSS の情報共有をする勉強会で、当日は6人の方が CSS に関するネタを持ち寄って LT されました。皆さん様々なネタで発表されており、とても興味深く聞かせていただきました！
ユーザースタイルシートや拡張機能で作る広告ブロック入門
始まりは Kaitou (@Kaitou1192) さん の LT です。
Web を見ていると、画面を占有する広告にうんざりした経験はありませんか？そのようなお邪魔 DOM は、ユーザースタイルシートで消してしまおう！という提案でした。class や id を特定して display: none; を仕掛けておけば、視界から消えてしまいますね！ちなみに visibility: hidden; pointer-events: none; ならレイアウトも崩れません。
ユーザースタイルシートは初めて知った… #megurocss
— Makoto.Ogata (@ogata0510) December 1, 2023
2020年から2023年までの CSS の変遷を振り返る
続いては やまのく🐶 (@yamanoku) さん の LT です。
発表資料: 2020年から2023年までの CSS の変遷を振り返る
2020年1月に開催された Meguro.css#8 から、ほぼ4年が経過。その間に追加されたり利用可能になったプロパティなど、変遷を辿りました。使わなくなった polyfill , 新しく使えるようになった aspect-ratio , :has , :not , :focus-visible など、思わず「あ〜」と声が漏れるほど、この2年間の CSS の進歩にみなさんワクワクしている様子でした。
CSSおまえ成長してんじゃん #megurocss
— Yusuke Nakaya (@s14garnet) December 1, 2023
Scroll-driven Animations と CSS の進化
3人目は 出口 裕貴 | Qiita (@degudegu2510) さん の LT です。
CSS とブラウザのスクロールだけで、パララックスエフェクトが作れちゃう時代です！重要なポイントとなる、Scroll Progress Timeline と View Progress Timeline について丁寧に解説いただきました。 animation-timeline プロパティ、使いこなせばとても面白そう。もう JavaScript の Intersection Observer API は不要?! ちなみに、DEMO 作品はデザインも素敵でした！
iPod の Cover Flow 表示みたいのも CSS だけで作れるのか #megurocss
— mascii (@mascii_k) December 1, 2023
カスタムプロパティのアニメーション
4人目は Katashin (@ktsn) さん の LT です。
発表資料: カスタムプロパティのアニメーション
数学的なアプローチを応用した圧巻の CSS アニメーションデモでした！スプリングアニメーションは「数式をぶちこんでみたら動いた」という、とてもアグレッシブな作品でした！CSS もまた、数学なのかもしれません。これからは「なんとなく」といった直感ではなく、数学的な美しさを求めることができそうです。また、カスタムプロパティでアニメーションを実装したときのパフォーマンス問題の検証なども添えられていて、未来を予感させるワクワクする発表でした。
発表の中で紹介されていたバネアニメーションのCSS
— shiryu (@shiryu_go) December 1, 2023
実際ビヨビヨしててわらけてくる、すごいhttps://t.co/vIVga65ZaT#megurocss
2年ぶりに CSS アニメーションを作ったよ！
5人目は うえむー@フロントエンドエンジニア (@uemuragame5683) さん の LT です。
この日のために作り上げた、スイカゲームをオマージュした CSS アニメーション作品の紹介でした！CSS で長尺アニメーションを組み上げようとすると、どうしても非常に煩雑なコードになってしまいますが、素晴らしい作り込みでした。要素の転がり方やバウンドなど、細かいところもきっちり仕上がっています。作品作りにあたってはまず絵コンテから始めるなど、丁寧な仕事に拍手です！
CSSのみのスイカゲーム、完成度高い！！ #megurocss
— Makoto.Ogata (@ogata0510) December 1, 2023
CSS だけで Cookie Clicker を作る
ラストは はと (@kthatoto) さん の LT です。
クッキークリッカーをご存知ですか？あのゲームをなんと CSS だけで作ってしまいました！このマジックのタネは、input タグ（チェックボックス）を多用したウルトラ条件分岐テクニックでした。「手続的なプログラムを書いている感覚」と話していましたが、ここまでくると本当にプログラミング言語と言えるのかもしれませんね。膨大になるコードも Pug/Sass をフル活用して実装されていました！
CSSだけでCookie Clickerを作る
— shiryu (@shiryu_go) December 1, 2023
すげ〜根性で実装してて笑ってしまう…。
clickするとcheckboxにcheckをして、次のcheckboxをチェックできるようにして…#megurocss
株式会社オロでは CSS の好きなエンジニアを募集してます！
オロには大規模サイトの CSS 設計から、CSS アニメーションを駆使した華やかな制作まで、様々な CSS のスキルを活かす機会があります。興味のある方はお気軽にご連絡ください！