モダンCSS教習所

Transcript

1. モダンCSS教習所 あげ
2. 安心のMDNの提供でお送りします
3. color-mix()
4. color-mix() color-mix() 関数記法は 2 つの <color> 値を採り、指定された色空間の指定された量で 混合した結果を返します。
5. color-mix() はこんな時に便利 カラー増やしたくないけど、既存のカラーを元にグラデーション作りたい background: linear-gradient( 45deg, color-mix(in srgb, var(--bg), black 36%), var(--bg, #cef) );
6. 1 問1. 以下のコードで出力される色に使い色はどれか color-mix(in srgb, #f0f 50%, #0f0) 2 3
7. 1 正解󰢏 問1. 以下のコードで出力される色に使い色はどれか color-mix(in srgb, #f0f 50%, #0f0) 2 color-mix(in srgb, #f0f 50%, #000) 3 color-mix(in srgb, #fff 50%, #0f0)
8. light-dark()
9. light-dark() （中略）ユーザーがライト色またはダーク色のテーマをリクエストしたか検出することによって、 2 つの色の選択 肢のいずれかを返します。（中略）これは実験的な機能です。
10. light-dark() はこんな時に便利 CSS変数に入れてワンライナーで対応 --bg: #cef; @media (prefers-color-scheme: dark) { --bg: #114; } /* これでOK */ --bg: light-dark(#cef, #114);
11. 問2. light-dark() は ios17.5 から利用できる 利用できる 利用できない
12. 問2. light-dark() は ios17.5 から利用できる 利用できる 利用できない
13. transform ショートハンド
14. transform ショートハンド (≠ 正式名) 今まで、transform: scale(0.5) rotate(45deg); と書いていたものが、transform部分を省略できるようになった
15. 問3. 以下のコードに近い図形を選びなさい .class { /* サイズと色は割愛 */ rotate: 45deg; skew: 45deg; } 2 3 1
16. 1 問3. 以下のコードに近い図形を選びなさい .class { /* サイズと色は割愛 */ rotate: 45deg; skew: 45deg; } 2 ※skew: はできない 3 正解󰢏
17. 三角関数
18. 三角関数 sin(), cos(), tan(), acos(), asin(), atan(), atan2() などの三角関数が使える
19. 三角関数 はこんな時に便利 • 複雑なアニメーションをしたい時 • 0 ▶ 1 ▶ 0 ▶ -1 ▶ 0…　みたいな繰り返すアニメーションしたい時(sin, cos) • 8の字描きたい時 ……など色々
20. 問4. 以下のコードに近いアニメーションを選びなさい
21. と言いたいところですが、 ただの数学問題になるので割愛
22. 最後に
23. 今日あつかったモダンCSSを 全部使ってみました
24. https://codepen.io/agehara/pen/eYowyeW
26. ありがとうございました！