Meguro.css#2
https://gyazo.com/3ae3d76fb3114b7bcb98f66e3b9da8f1
第1回目レポート
スポンサーLT
ビジネスソリューション事業部
ZAC(クラウドERPパッケージ)
ベンチャー・中小企業向け、ブルーオーシャン
Peach チケット予約システム構築
FRISK ブランドサイト
AEON PET ロゴ、サイト、アプリ
商業施設向け デジタルサイネージコンテンツ
転職サービス
成長し続けるエンジニア向け
エンジニアはVimmer多め
01. RSCSS体験談 (@mhz_univ)
スライド
責任能力を損なわないためのCSS構造のアイデア集
要素
Component
一意のクラスをつける
Element
Componentの小要素、子セレクタ
Variant
バリエーションづけ、ハイフンをつける
例:.-transparent
Hepler
上書き用スタイル
!important
大きさを考えて書く
ネストが複雑になりかける
1対1で考えるようにする
HTML VS CSS
class="aaa ccc"や class="bbb ddd" など多岐にわたると面倒くさくなる
aaa-box bbb-box ccc-box という感じで対1で考える
他のページをまたぐComponentがある場合
ページが広がる分、責任範囲が広がっていく
違うクラス名のはずがmixinで内容は共通となると
対応策
共通の部分を作る xxx-panel
他のクラスを疎結合する
class="xxx-panel aaa-box"
class="xxx-panel bbb-box"
02. flex: 1; (ryutamaki)
Technical Lead
スライド
flexについてちゃんと調べてみた
flex-grow
flex-shrink
flex-basis
flex-direction
主軸を決める(縦か横か)
flex-basis
itemの主軸方向の長さ
max-width > flex-basis (> width)
flex-grow
余ったスペースを比率で配分して拡大するもの
0 0 0 0 0 0
0 1 1 2 2 2
flex-shirnk
はみ出したスペースを比率で配分して縮小するもの
引き算なので大きい数字になると小さくなる
サイドバーレイアウト
ヘッダーメインフッター
03. CSSでクオリティをよりよくする (@umiremix)
webデザイナー | フロントエンド
スライド
CSSでテキストをより美しく。
均等配置
文字量多めでフォントサイズ小さいときオススメ
ジャンプ率
vwによる指定は高い
ただ最大値は決めておいたほうが良い。際限なくなるからyamanoku.icon
高いと活気がある、低いと知的に見える
font-size: calc(フォントサイズ / 基準の画面幅 * 100vw);
文字の折返し
外 block
中 inline-block
white-space: nowrapとか
iPhoneがアニメーションぬるぬるうごく理由
☓ ... スタイリング、演出、流行性
○ ... インターフェイスデザインのため
iPhoneが使っている認識がなくても情報を感じ取れるようにするため
CSSも同じように違和感をもたせず情報を感じ取らせることができるんじゃないか?
CSS Transiton
transition: .5s; 以上は違和感あり(※ 場合による)
CSS Animations
複雑なアニメーションはJSのほうが良い
04. "いい感じ"にするためのイージング (@448jp)
フリーランス | インタラクションデザイナー
スライド
制作事例
アニメーションの実装における指示例
コンテ
参考サイト
アニメーションツール(Ae, An)
「いい感じ」にしてください
いい感じとは?
好さ
美しさを備えるメンテナンス性が高い内向き
善さ
ユーザー/ビジネス課題を解決する表す外向き
90%イージングがよければいい感じになる
イージング>時間>対象
イージングの種類は少ない…
時間は同じでもイージングを変えると印象が変わる
cubic-bezier()で幅広いイージングの拡張ができる
Sassの変数で登録しておくと使い回せる
S.Suzuki | フリーランス
スライド
まだブラウザで動かせない(2年間Issue開きっぱなし)
とりあえず動かしてみる
import Sass form "sass";
dart-sassをコンパイルすると動く?
動いた
Buggerのpolyfillが必要
Bootstrap4で動かしてみたい
fsが必要になって動かない
parcelのプラグインを使う
WebWorkerでうごかしたい
Illigal Invocation
percelのプラグインでなんとかならんおか
まとめ
一応ブラウザ表現できるけどimport絡むとめんどくさい
dart-sass自体は楽な気がする
頑張るな yamanoku.icon
Sass.jsを使え
06. CSSでボーン (@s14garnet)
テクニカルクリエイター
スライド
骨や骨格のイメージ
実際は「関節をつくる」
transform-origin ... ここを関節とする
子要素は transfrom: translateX rotete
繰り返しでつくる
demo
人体を構成するパーツをシンプルに考え直すと
1つの関節と造形とで分解できる
https://gyazo.com/d64ed0c6144bb5ba487095d142537f88
ギネススタウト最高!一番好きなギネススタウトですyamanoku.icon
あとピザ食いました yamanoku.icon