我が社で初めて開催した勉強会 Sketchy Talks #1 CSSについて学ぶのメモです。箇条書きでごめんなさい。
CSSアニメーションはじめました
- jQueryアニメーションは重い
- 結局CSS3とVelocity.jsで書いた
- jQueryのアニメーションのところを置き換えるだけだからそんなに学習コストはかからない
- Velocity.jsはjQueryと互換性があるので動かないブラウザでは勝手に対応してくれる
CSS filter
- 案件ではちょっと使いにくいかも
- 色相回転は角度でやる
- 透過PNGだとbox-shadowは全体に影が、drop-shadowだと中の文字とか
- グレースケールとセピアスケールは一緒に使わないほうがいいらしい
- スクロールをしたらぼやけてるのがなくなったとか
CSS設計とスタイルガイド /小畑タカユキさん
- スタイルガイドを作ろう
- 製作者たちのスキルを均一にできる
- mailchimpのシンプルなスタイルガイド
- 新しい人が入ってきた時にあるといいかも
- スタイルガイドをgulpで自動化して作ってみる
- FontNoteやAigisを触ってみた
- FontNote、記法を覚える必要がある
- Aigisより見やすそう
- スタイルガイド結構重要かも
案件規模✖︎CSS拡張
- CSS拡張メタ言語を使うタイミングは？
- 案件規模と導入可否には法則があるはず
- 案件規模と学習コストのバランス
- 学習コストは担当者次第
- Sass導入は案件規模ではなく制作体制であるべき
- 技術的な試みに理解がある人の数
- 制作チームの把握
- ジョブ多すぎ
- デザイナーとエンジニアの比率
- CSSスプライト（？）
- まずはクローズドな社内をオープンにする
- 導入側もちゃんと説明しないと
ミニマムなCSSフレームワーク
- Skelton
- scssも用意されている
- 最初にフレームワークを使うのおすすめ
- ヤフーのやつはメンテされてないっぽい
- ノーマライズとしてスケルトン使うと良いかも
- インブラウザデザインにいいかも
- ブラウザ上でデザインをする
- 大きいフレームワークも良いけど規模によるとちょっと扱いづらいかも、なのでミニマムなやつがいいんじゃないかなー
詳細度
- 詳細度が高いと上書きできなくなったりする
- 詳細度グラフ
- 右上がりになるといいらしい
- セレクタの中でインポートすると詳細度がゼロにならない
- BEMが大事
- ユニークな名前にするならBEMにせざるを得ない
- DOMとCSSの構造を一緒にしない
感想
ラフな感じだったのでワイワイすごくたのしかったです。
たぶん発表が苦手な人でも参加しやすい勉強会なのでぜひともみなさんご参加おまちしております〜。