2018月05月23日

Meguro.css #1 レポート

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の書き方

きれいなCSSを書くためのTools スライド

2番目の Kou さんの LT はきれいな CSS を書くために便利なツールについてのご紹介でした。CSS を書く人が気をつけるだけではエンジニアのスキル差があったり、エンジニア以外の人が書くこともあったりとうまくいかないので、自動的な整形や Lint を行ってくれるツールとして CSScomb や Stylelint を使用することをおすすめされていました。

CSSで頑張る3D

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 で実装されていないときに rotatemargin を使って縦置きのタブを実装したりと、筆者自身も身に覚えのある話がありました……!

株式会社オロでは CSS の好きなエンジニアを募集してます!

株式会社オロ 採用情報

オロには大規模サイトの CSS 設計から、CSS アニメーションを駆使した華やかな制作まで、様々な CSS のスキルを活かす機会があります。興味のある方はお気軽にご連絡ください!

RELATED POSTS