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

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

Sketchy Talks #1 CSSについて学ぶ

関西フロントエンドUGなどで活躍されているchatboxの後藤さんが新たな企画「Sketchy Talks」を始められることをcompassで知りました。

で、

  • 第1回のお題が現在の業務と密接に関係しているCSS
  • 場所は今の職場から徒歩2分
  • 定時まで仕事をしてダッシュすれば(数分遅刻だが)参加できる!

ということで参加して参りました。


Sketchy Talks #1 CSSについて学ぶ

2016/6/10(Fri.) 19:30〜21:50 chatbox 本町オフィス

参加者は7名。一人ずつ調べたことなどの発表を5〜10分程度行い、その後質疑応答や意見交換などを行っていくスタイル。和やかに、ゆるく進んでいきました。

以下(くじ引きで決めた)発表順。

CSSアニメーション はじめました

もりてつ

はい、いきなり私でした。

今の会社に入ってからサイトのコーディングでCSSアニメーションを作った時の話を行いましたが、後半でVelocity.jsの話をしたために質疑応答、意見交換ではVelocity.jsの話が中心に…CSSどこ行った(苦笑)。

「ValocityとCSSの使い分けの基準は?」という質問に「今は決めていないがこれから決める」としか答えられなかったです。ということで、発表を通じて今後の業務課題もいろいろ見つかったことは収穫でした。

スライドは2時間で作ったグダグダなものですが興味のある方はどうぞ。

CSS のfilterについて紹介と試してみたことなど

chatbox 安井さん

いろいろなfilterをCODEPENで実際に動かしながらデモ。

面白い効果がいろいろあったのですが、IEが非対応なので業務では無理。個人でも使うのであればIEユーザーを切り捨てられるかどうかが悩みどころですね。

CSS設計とスタイルガイド

アナグラムワークス 小畑タカユキさん

読みづらいことが多い他の人のコード、破綻しやすいCSS、管理していくためにスタイルガイドは有用であるという話。そしてgulpで自動生成してみた結果。

私個人的には仕事での導入は後回しになるかなと思っていましたが最近社内でも導入したいなーという声も出てきているようなので、改めてスタイルガイドをよく研究しておいたほうがいいかなと思っている今日この頃です。

www.kobatatakayuki.com

案件規模×CSS拡張メタ言語

らいかさん

旧態依然としていてSassの導入が却下された現場。

そこから案件規模や制作体制を踏まえてCSSメタ言語を導入していくにはどうすればよいか、ということの考察、そして意見交換。

果たしてらいかさんの現場はどうなっていくのでしょうか……そして案件がどうなったのか気になるところ。

ミニマムなCSSフレームワーク

コンチさん

12kb(BootStrapの10分の1)のCSSフレームワークSkelton」の紹介。 軽い割には必要最小限のことは使えるので、どんな案件でも使えそうということです。

blog.cntlog.net

CSSコンポーネント設計

chatbox 庄埜さん

「Web制作者のためのCSS設計の教科書」を元に「CSSコンポーネント設計」の説明。

いいCSSとは何か。そのための手法としてOOCSS、SMACSSを紹介されていました。

この本については先ほどの小畑さんの話でも紹介されていました……まだ読んでいないのでとりあえず読まなきゃ。

Kindle版が激安だったので思わずポチりました。

qiita.com

CSSの詳細度

chatbox 後藤さん

詳細度が高過ぎるとあまりよろしくない。

詳細度グラフが右肩上がりになって行くように設計していきましょうということです。

……そういえば今の社内のコードの詳細度を考えたらうわ何をするやめ(ry

qiita.com


といった感じで、いろいろ勉強になりました。ゆるい雰囲気でしたがまさに勉強会。少人数だったためか意見交換も活発でしたし。

来月はjQueryがテーマ。いろいろネタが有りますがどうしようかなぁ。少なくとも今回みたいなグダグダな内容にはならないようにします(;´∀`)