「Meguro.css #2 @ oRo」に参加してきました

• Meguro.cssに参加してきました

megurocss.connpass.com

• CSSの勉強会は珍しいので参加してみました。実践的な内容が多く勉強になりました。

タイトル	発表者
RSCSS体験談	@mhz_univ
flex: 1;	@ryutamaki
CSSでクオリティをよりよくする	@umiremix
Dart Sassであそぼう	@terrierscript
"いい感じ"にするためのイージング	@448jp
CSSでボーン	@s14garnet

RSCSS体験談

• @mhz_univさん

docs.google.com

RSCSSとは

• http://rscss.io
• Sanity(責任能力)を損なわないためのCSS構造のアイディア集
  • BEMとかそういう系

RSCSSの構成

• Component
  • 一意のクラス名
  • グローバル
• Element
  • 子要素
  • 子セレクタ
• Variant
  • 色違いとか
• Helper
  • 一時的な上書き
• サンプル

.search-form {
.search-form {
  > .button { /* ... */ }
  > .field { /* ... */ }
  > .label { /* ... */ }

  // variants
  &.-small { /* ... */ }
  &.-wide { /* ... */ }
}

なぜRSCSS

• CSS強い人いなかったから4分類だけで入りやすそう

大きさを考えて書く

• 大きい粒度にしすぎるとつらくなる

1対1を考えて書く

• 多html 対 多CSS
  • bootstrapのような
  • 影響範囲が大きいから変更がつらくなる
• 1html 対 1CSS
  • 変更が容易
• 多html 対 1css
• mixin/extend
  • 隠れ多対1
  • classは違うけどmixinで実は同じもの使ってる
• 共通な部品を作りたくなったらコンポーネントを新しく作る

flex:1;

• @ryutamakiさん

20180727 megurocss from Ryu tamaki

flex

• flex-grow
• flex-shrink
• flex-basis

flexの基礎知識

• flex-container/flex-item
• flex-direction
  • row/column

flex-basis

• flex-itemの主軸方向の長さ
• max-width > flex-basis (> width)

flex-grow/flex-shrink

• flex-grow
  • flex-containerの余ったスペースを比率で配分し拡大
  • 数値が大きいほど領域は大きくなる
  • 0だったら元の値より広げることはしない
• flex-shrink
  • flex-containerからはみ出したスペースを比率で配分し縮小
  • 数値が大きいほど領域は小さくなる

用例

• sidebar-main
  • sidebarは固定値
  • 余った領域をmain
• header-main-footer
  • contentが少なければheader/footer固定
  • content多ければfooterはスクロールした一番下

CSSでクオリティをよくする

• @umiremixさん

CSSでクオリティをよりよくする from Umi Yamamoto

umiremix.com

CSSでテキストをより美しく

均等配置

• テキストの右端を揃える
• text-align: justify
• 文字量が大くフォントサイズ小さいテキストに使うと良い

フォントサイズのジャンプ率

• pxではなくvwでfont-sizeを指定するとジャンプ率が保たれる
• ジャンプ率：本文サイズに対する見出しサイズとの比率
• font-size: calc(30 / 640 * 100vw);

折返し

• 自然な開業を作るか改行をさせない指定

.wrap: { display: block; }
.inner: { display: inline-block; }

アニメーション

• iPhoneはスタイリングではなくインターフェイスデザイン
  • iPhoneを使っているという感覚ではなく直接情報を触っているという感覚を目指している
• Webでも存在を意識させない自然なアニメーションを
• CSSのアニメーション
  • CSS Transitions
    • 0.5s以上かかると違和感ある(ケースバイケース)
  • CSS Animations
• 複雑だとJSでやった方が向いてる(JS/CSSの併用も)

DartSassであそぼう

• @terrierscriptさん

Sassの最近

• ruby-sassがdeprecated
• 今後はdart-sass

Dart

• 最近flutterで復活?

Dart Sass

• ruby-sassより高速

Dart Sassをブラウザで動かす

• 頑張ったら動いた！

いい感じにするためのイメージ

• @448jpさん

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

• いい感じにして下さいとよく頼まれる
• いい感じのアニメーション
  • 好さ + 善さ
  • 美しさメンテナンス性
  • ユーザ/ビジネス課題を解決する

いい感じのアニメーション

• 90%はイージングで決まる
• アニメーション調整の優先度
  • イージング > 時間 > 対象
• RobertPennerのイージング関数
• cubic-bezier関数がいい
• http://cubic-bezier.com/

CSSでボーン

• @s14garnetさん

docs.google.com

ボーンって何?

• flashや3Dソフトではお馴染みのツール
• 骨/骨格のイメージ
• 意識するのは関節
• CSSだけで腕みたいな動きを作れる！

デモ

codepen.io