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

バリエーションづけ、ハイフンをつける

Hepler

上書き用スタイル

!important

大きさを考えて書く

ネストが複雑になりかける

1対1で考えるようにする

他のページをまたぐComponentがある場合

ページが広がる分、責任範囲が広がっていく

違うクラス名のはずがmixinで内容は共通となると

対応策

他のクラスを疎結合する

class="xxx-panel aaa-box"

class="xxx-panel bbb-box"

02. flex: 1; (ryutamaki)

Technical Lead

スライド

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でテキストをより美しく。

均等配置

文字量多めでフォントサイズ小さいときオススメ

ジャンプ率

高いと活気がある、低いと知的に見える

font-size: calc(フォントサイズ / 基準の画面幅 * 100vw);

文字の折返し

外 block

中 inline-block

iPhoneがアニメーションぬるぬるうごく理由

☓ ... スタイリング、演出、流行性

○ ... インターフェイスデザインのため

iPhoneが使っている認識がなくても情報を感じ取れるようにするため

CSSも同じように違和感をもたせず情報を感じ取らせることができるんじゃないか？

CSS Transiton

CSS Animations

複雑なアニメーションはJSのほうが良い

04. "いい感じ"にするためのイージング (@448jp)

フリーランス | インタラクションデザイナー

スライド

制作事例

アニメーションの実装における指示例

コンテ

参考サイト

アニメーションツール（Ae, An）

「いい感じ」にしてください

いい感じとは？

好さ

美しさを備えるメンテナンス性が高い内向き

善さ

ユーザー/ビジネス課題を解決する表す外向き

90%イージングがよければいい感じになる

イージング>時間>対象

イージングの種類は少ない…

時間は同じでもイージングを変えると印象が変わる

Sassの変数で登録しておくと使い回せる

S.Suzuki | フリーランス

スライド

まだブラウザで動かせない（２年間Issue開きっぱなし）

とりあえず動かしてみる

import Sass form "sass";

dart-sassをコンパイルすると動く？

動いた

Buggerのpolyfillが必要

Bootstrap4で動かしてみたい

parcelのプラグインを使う

WebWorkerでうごかしたい

Illigal Invocation

percelのプラグインでなんとかならんおか

まとめ

一応ブラウザ表現できるけどimport絡むとめんどくさい

dart-sass自体は楽な気がする

Sass.jsを使え

06. CSSでボーン (@s14garnet)

テクニカルクリエイター

スライド

骨や骨格のイメージ

実際は「関節をつくる」

繰り返しでつくる

demo

人体を構成するパーツをシンプルに考え直すと

https://gyazo.com/d64ed0c6144bb5ba487095d142537f88