40代からのフロントエンドエンジニアリング。

フロントエンドを中心に、Web関連話をゆるく書いていきます。

CSS Talk vol.3で登壇しました

4月22日(土)、TAMコワーキングで開催された「CSS Talk vol.3」に参加いたしました。

f:id:mntp:20170429224341j:plain

1月のvol.2に続き、今回も何を血迷ったか登壇側として手を挙げました。今回はデザイナー・ディレクター向けの勉強会ということなので、ネタとして温めていた「単位」の話をしても一同 ( ゚д゚)ポカーン となる可能性が高かったため別のテーマに。ちょうど各ブラウザでCSS Grid Layoutが対応され始めていることもあり「グリッドレイアウト」にしました。

14時10分にセッションスタート。以下ざっくりと振り返ります。

グリッドレイアウト これまでとこれから

森永哲平(グラッドキューブ)

speakerdeck.com

ということで最初が私でした。

グリッドレイアウトとは何かというところから入り、これまでのグリッドレイアウト実装方法と実例(弊社サイト)、CSS Grid Layoutの説明と簡単なデモを行い、最後に今後どうなっていくかの考察という流れでセッションを行いました。

前回のようなウケ狙いは一切なし。

CSS Grid Layoutが広がっていくのはまだまだこれからですが、引き続き注目していきたいと考えております。

質疑やアンケートではIEでの対応を気にされている方が多かったですね……IEが最初にGrid Layoutに対応したのに古い仕様のままという残念な状況なので悩ましいところです。

このあたりは別記事で補足していきます。

※5/1追記:IE対応についての記事を書きました

CSS設計について考える

後藤知宏さん(chatbox)

qiita.com

CSSの設計が必要な場合はどのような時か、そして設計の記述方法であるスタイルガイドのためのツールとしてSC5 Styleguideの紹介。

確かに設計は必要ではありスタイルガイドも必要かなと思うこともあるのですが、導入や管理のための手間があってなかなか使う方向に気持ちが向かないのですよねぇ。SC5 Styleguideもツールとしてはなかなか便利そうではあるのですが。

エンジニアとデザイナーの距離

安田学さん(TAM)

www.slideshare.net

エンジニアとデザイナーとの距離を縮めるためにCSSをどう設計していくか。そのためにデザインの意図やコンテキストを考えたCSSの設計、命名規則適用を提案。一つの方法としてECSSの紹介がありました。また、エンジニアとデザイナーのコミュニケーションの取り方について考察も。

前回の時にも書きましたが、安田さんのセッションはCSSのコーディングの経験を活かしてどのようにコーディングを行っていけばより効率化できるかをちゃんと考えられており、こちらとしても新たな気づき、発見があって勉強になります。

OOCSSのデメリットやECSSのメリットとデメリットを踏まえ、今後どういった設計を行っていくか。私の職場もメンバーが増えてきているので改めて検討していこうと感じました。

懇親会

どういうわけか乾杯の音頭を私がやることに。

TAMの二俣さん曰く「最初に登壇した人に担当してもらうことにします」

……このルールが次回以降も続くかはわかりません(笑)。

今回はセッションではウケを取る方向に走らなかったので、ここで「本日はお日柄もよく…」と最初にきっちりウケを取ってから乾杯。

セッション内容の話や業界の話などで盛り上がったり、TAMの松尾さんによる「しゃかいか!」の紹介があったり。

18時半頃に解散となりました。

今回も参加者の皆さん、TAMのスタッフの皆さん、お疲れ様でした&ありがとうございました。週末に予定が入ることが増えてきて次回参加できるかどうかはまだ未定ですが、都合がつくようであればまた登壇するかもしれません。

今回見送った「単位」にするか、それともまた別の話にするかは勉強会のテーマなどを踏まえて考えます。