https://gyazo.com/3ae3d76fb3114b7bcb98f66e3b9da8f1

さくらのINFRA WARS

ファミコン風CSSフレームワーク

世界ランク4位

ドロップシャドウ効果をあたえるCSSプロパティ

使うのは以下だけ

code:css

box-shadow: {

inset

offset-x offser-y

}

カンマ区切りで複数指定ができる

ドット絵アニメーションもできる

key-framesで差分を指定する

https://gyazo.com/b7296b4f6523b3d267cdd240c43d5de9

box-shadowでのCSS芸はコスパがいい

参考

サーバーサイドエンジニア

リニューアル中

コードの改修が辛い

reset.cssが存在しない

入社する前ちゃんとフロントを書いている人がいなかった

ルール作り

コーディングガイド

週１のレビュー会

CSSを書けるデザイナーに修正点をあげてもらってレビュー会をする

フロントエンドエンジニア・デザイナー

CSSModulesのメンテナンスに消耗していませんか

!important

変更したら崩れる

前書いたCSSがわからない

スタイリングの継承

疑似要素、疑似クラスのセレクタをほぼサポート

移行

カラー管理

16進数に変更

擬似クラス

そのままいける

多段ネスト

大規模なCSSがほど構造は複雑

attrs

定義済みのコンポーネント拡張

より動的で拡張的なコンポーネントつくり

高階関数、HOCみたいなもの

シンタックスシュガー

まとめ

大規模なcssを一度に書き換えるのは難しい

制御構文の書き換えにはattrs

複雑なcssの書き換えにはセレクター

セレクターはprops制御に書き換えよう！

@ryamakuchi

去年6~10月までコーダーとして働いていた

業務レベルのCSSは書けるが複雑なものは無理

CSS芸人になりたい…！

強いCSS表現

線や湾曲や影のある2D のスタイル（静止画）

2Dアニメーション

3Dスタイル（静止画）

3Dアニメーション

静止画を書こう

書きたいパーツを分解して考える

1divとして捉える

線と面という認識で絵を見る

CSSに向いている静止画はなにか？

最適な題材

ガンダム

ガンプラの要領で設計

左右対称

直線が多く線や面が多い

疑似要素は最大活用

変数に色を入れる

各カラーの変数

position: absolute;

content: '';

ポイント

親要素のdivはrotate()しない

直感で動かしにくくなる

borderは基本topかleftしか使わない

便利なプロパティ

transform: skewY(10deg)

要素を傾斜変形する時に使う

好きな半円系が作れる

transform-origin: top left

原点の指定

まとめ

CSS技術力が上がった

SVGアニメーションで使いたい

絵を書く要領で書けるのでよい

.

公式ドキュメントの翻訳、メンテナ

現代のUIフレームワーク

つらさ

ちょっとだけ変更がしにくい

アプリ固有のスタイルと衝突

バージョンアップへの追随

きっかけ

create-nuxt-app

UIフレームワークの選択ステップ

もっともメジャー

v2 => v3のマイグレ地獄

レスポンシブ・モバイルファースト

jQuery依存（4.3）

v5からjQuery依存脱却

sass変数でカスタマイズ

一部でimportして利用できる

CSSのみ提供

意図しない挙動を起こしにくい

一部のみのスタイルも利用可能

UI Kitではない

デフォルトのテーマを持たない

VueのUIコンポーネントではメジャー

スタイルがコンポーネントに閉じられているわけではない

グローバルなクラス設定

デスクトップUIに特化しているのでレスポンシブではない

そのほか

できるだけ小さいCSS

10.5KB

まとめ

SassやLessの変数でカスタマイズしやすく

スタイルの衝突をさけやすくなった

バージョンアップへの追随は難点

セマンティックバージョニングなのが救い

@omiend

anconsulting, inc,

rryが後輩

ScalaMatsuriのコアスタッフ

よくわからん

クラス

動作させるオブジェクトを用意する

共通することを考える

クラスという単位で実装する

抽象化〜継承〜具象化

共通するもの親オブジェクト

共通の処理

動作対象を子オブジェクトと捉える

物によってちがう動作を抽象化

継承（extend）して具象化

何かを受け取っても共通の動作する行為自体は問題なく処理する

親クラスを用意

abstarct class

再利用しづらいかも

できてもカオス化しそう

concrete classで継承・具象

デモ

Dark side of the Web

macOSのアップデートでDark modeのCSSが設定できるように

code:light_and_dark.css

@media (prefers-color-scheme: light) {

background-color: white;

color: black;

}

@media (prefers-color-scheme: dark) {

background-color: black;

color: white;

}

テーマカラーをまとめておくと吉

code:css

@media (prefers-color-scheme: light) {

--theme-base: white;

--theme-font: black;

--theme-accent: red;

}

@media (prefers-color-scheme: dark) {

--theme-base: white;

--theme-font: black;

--theme-accent: red;

}

body {

background-color: var(--them-base);

font: var(--them-font);

strong: var(--them-accent);

}

画像はどうする？

絵文字が色反転しちゃう

ダークモード用に設定してあげる

34:45〜 ブログでの画像・シンタックスハイライト問題の言及

ワークショップ「Try! CSS 3D」

サイコロをつくる

表と裏を足すと7になる

1. Hello 3D world！

矢印の方向が＋

z軸は手前になるほど+になる

rotate3d

引数は0, 1, -1

2. Property Value

3Dに重要プロパティ

transform

translate

移動

rotate

回転

scale

大きさ

大きくすると荒れるのであまり大きくしない

skew

傾き

perspective

数値を大きくすれば平面化

数値を小さくすれば湾曲化

500~1000pxが現実ライン？

大きくするとブラウザの挙動がおかしくなる

transform-style

flat

preserve-3d

親要素に指定

3. Transform tips

transform: rotateY(90deg) translateZ(100px);

transform: translateZ(100px) rotateY(90deg);

実は違う指定になる

順番が大事

order list

1, 2, 3, 4 ...

非常に重要

transform: translateX(10px), translateX(20px);

Add

合計30pxになる

transform: 1 + 2 + 3 ...

rotateは鬼門

フォークしたものをグリグリ触ってみよう

4. Making of DICE

サイコロ

６枚の壁がある

divで作っていく

code:dice.html

<div class="dice">

<div class="dice_wall">1</div>

<div class="dice_wall">2</div>

<div class="dice_wall">3</div>

<div class="dice_wall">4</div>

<div class="dice_wall">5</div>

<div class="dice_wall">6</div>

</div>

https://gyazo.com/a6012819ae8de3dc531307f16fa32d51