Sketchy Talks #1 CSSについて学ぶに参加

2016年6月24日

Sketchy Talks #1 CSSについて学ぶに参加しました。

株式会社chatboxのデザイナーYasuiRisaです
2016/06/10に開催された、「Sketchy Talks #1 CSSについて学ぶ」という全員発表型のイベントに参加しました。

全員発表型ということで最初は緊張していましたが、
少人数のイベントのだったため、質問もしやすい感じで、
どの発表後もたくさん質問が飛び交ってみんなで疑問を解消したり、考えを提案したりと
とてもフランクな雰囲気の勉強会になりました。

登壇者枠ではあまりお見かけない方のお話も聞けてよかったな〜と思いました。

発表/発表者リストはこんな感じ

  • CSSアニメーション はじめました @てつ さん
  • CSS のfilterについて紹介と試してみたことなど @yasui821(私)
  • CSS設計とスタイルガイド @小畑タカユキさん
  • ミニマムなCSSフレームワーク @maki_saki さん
  • 案件規模と拡張CSSのベストな関係について @lyca さん
  • コンポーネント設計のアイデアの活かし方について考えてみた @ShioriShono さん
  • CSSにおける「詳細度」とは何かを説明してみる @mikakane さん

自分の発表

CSS のfilterについて紹介と試してみたことなどお話しました。
ざっくりですがQiitaに上げました。
http://qiita.com/yasui05821/items/01d47f572a5f1a88036a

発見だったのは
– fillterはテキストにも反映されること
– 影の表現であるdox-shadowプロパティとfilterのdrop-shadowとの違い

あと、1つのプロパティに追求するとより表現の幅が広がったり
ちょっとトリッキーなコードが浮かんだりするきっかけになるのかなと。
結構調べてて楽しかったです。

他の方の発表のメモや感想など。

CSSアニメーション はじめました @もりてつさん

CSSアニメーションとvelocity.js両方使いながら触ってみた感想などのお話。
結局のところ使い分けに関しては作るサイトや個人の好みかもと感じました。

CSS設計とスタイルガイド @小畑タカユキさん

http://www.kobatatakayuki.com/entry/2016/06/11/112621
スタイルガイドの事良く知らなかったのですが、
FrontNote
Aigis
こんなツールがあるんですね。
ガイドの定義は考え方としてチームで共有する際に頭に入れておくべきだと感じました。

ミニマムなCSSフレームワーク @maki_saki さん

ミニマムなCSSフレームワークを幾つかご紹介されていました。
中でもSkeletonとのこと。
マークアップだけでかなり綺麗な見た目に仕上がってました。
Bootstrapは管理が大変ですが、Skeletonは管理しやすそうでした。

案件規模と拡張CSSのベストな関係について @lycaさん

新しい技術投入に関する会社やチームのあり方であったり、
携わるメンバー全員が納得のいく進め方で運用を回すことの難しさ等のお話や相談でした。
お話し聞いてると社内の体制が1番改善しなきゃいけないところのように感じました。
あと、ちょっとずれてるかも知れないんですが、
個人的に感じたのは勉強会って考えたこと発表するだけじゃなくて相談としての
活用法もあるよねということを再認識しました。

コンポーネント設計のアイデアの活かし方について考えてみた/ ShioriShono さん

http://qiita.com/shosho/items/7b7d38299bdb378bf3d4
設計についてベストを尽くそうといろいろ考えすぎても時間がかかってしまうのにはすごく共感しました。
まずは「予測しやすい」こと「再利用しやすい」の2点ぐらいを意識することが大事。
参考にされていた図書=Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

CSSにおける「詳細度」とは何か / mikakaneさん

http://qiita.com/mikakane/items/38a94864d2da1cd858e9
詳細度グラフがガタガタになると良くなくて、右上あがり状態が望ましいとのこと。
Sassの入れ子の乱用はできるだけ避けて、@mixinをうまく活用するのが良さそう。
OOCSSやBEMの考え方が重要になってくる。

二回目はjQueryについて学ぶ、をテーマに開催予定

2回目の開催も決定したようです。テーマは「jQuery」。

レベル高い勉強会だと「こんなこと話したいけど…」と尻込みしてしまうけど
他の勉強会と比べて話しやすい勉強会なので話してみたいなって方こそ
ぜひぜひ参加してみてください〜

Sketchy Talks #2 jQueryについて学ぶ – connpass