5月18日 (金) に Meguro.css #1 が開催されました！弊社からは会場と懇親会の飲食の提供をさせていただきました。
Meguro.css はゆるく CSS の情報共有をする勉強会で、当日は5人の方が CSS に関するネタを持ち寄って LT されました。皆さん様々なネタで発表されており、とても興味深く聞かせていただきました！
CSS in ERB in JS の仮説検証
トップバッターのユーンさんの LT は大規模なシステムにおける CSS 管理の手法についてのお話でした。SPA であれば CSS in JS という成功事例があるのですが、そのコンセプトをどのようにして SPA ではない Rails のシステムに持ち込むかというテーマでした。
こちらの LT の内容はユーンさんのブログにて整理されているので、ご興味のある方は以下も読むと良いかと思います。
CSS in ERB in JS という実証実験 - Eutech Blog
きれいなCSSの書き方
2番目の Kou さんの LT はきれいな CSS を書くために便利なツールについてのご紹介でした。CSS を書く人が気をつけるだけではエンジニアのスキル差があったり、エンジニア以外の人が書くこともあったりとうまくいかないので、自動的な整形や Lint を行ってくれるツールとして CSScomb や Stylelint を使用することをおすすめされていました。
CSSで頑張る3D
3番目の LT は弊社エンジニアの中矢の発表でした。中矢は去年から CSS だけでアニメーションや 3D などをどこまで表現できるかに挑戦しており、今回の発表は 3D に関するお話でした。
ご興味のある方はこのブログにも記事があるのでぜひご覧ください！
CSS Custom PropertiesとCSS Properties and Values APIの話
4番目の深見さんの LT は CSS Custom Properties とその周辺の仕様に関するお話でした。Custom Properties は Sass などの変数とは違い、動的に値を書き換えることができますし、JS 側でプロパティの定義を行うことで、型を定義したり、デフォルト値を設定したりと、より柔軟な挙動の制御ができるとのことでした。特に興味深かったのが Custom Property に指定した値の QR コードを描画するデモで、未来の CSS の可能性を強く感じました！ブラウザの実装状況はまだまだのようですが、今後対応されるのが楽しみです！
transformが覚えられない
最後の LT は atsuco さんから、案件で CSS Transform を使って渋い要件に対応したお話でした。デザインの文字が 8px 以下でブラウザがそこまで小さい文字を表示してくれないときに、scale で小さくしたり、まだ CSS の縦書きが Firefox で実装されていないときに rotate と margin を使って縦置きのタブを実装したりと、筆者自身も身に覚えのある話がありました……！
株式会社オロでは CSS の好きなエンジニアを募集してます！
オロには大規模サイトの CSS 設計から、CSS アニメーションを駆使した華やかな制作まで、様々な CSS のスキルを活かす機会があります。興味のある方はお気軽にご連絡ください！