2023年のHTMLとCSS

勉強会の資料

Transcript

1. 矢島企画 バージョン 1.0 2023年のHTMLとCSS 実務でも使えるイマドキの便利なHTML＆CSSのTipsまとめ 1
2. バージョン 1.0 今日の内容 2 スライドで紹介 1. backdrop-filterでグラスモーフィズムを表現 2. scroll-behaviorならスムーススクロールを秒で実装 実際に作ってみる 3. background-clipでAppleっぽい見出しを作る 4. さらにアニメーションで動かしてみる
3. コンセプト 今までJavaScriptやjQueryで行っていた作業が シンプルなCSSだけで実装が可能に ディレクターやデザイナーなどノンプログラマーが、 簡単に実装出来る便利なTipsを紹介。実装する際に気を付けるポイントも 3
4. きっかけ • 2022年にInternet Explorerのサポートが完全終了し、IE対応す る必要が無くなったので、積極的にCSSの新しい機能が使える ようになった。 • その代わり、最近はiOSのSafariが独自路線過ぎて「Safariだけ 動かない」や「Safariだけ表示がおかしい」がよくあるので、 今回はその辺も併せて解説。 4
5. 01 backdrop-filter グラスモーフィズムが簡単に表現 グラスモーフィズムとは、透明度・ぼかしを組み合わせ、要素をすりガラスの ように見せられる表現手法です。ぼやけた透明度のある背景が特徴で、透明感 や光沢感を演出でき、立体感を出す事ができます。 5
6. 6 2020年、Appleが新しいOS Big Surに このグラスモーフィズム・スタイルを採 用したことで、人気に火がついた。 グラスモーフィズム
7. 7 https://www.pyuru.co.jp/
9. 9 今は「backdrop-filter」を使ってCSSでグラスモーフィズムを作成
10. 10 ※Safariはmac・iOS共にベンダープレフィックスが必要

11. DEMO 11 https://codepen.io/yachin29/pen/jOepqM
12. 02 scroll-behavior scroll-behaviorなら秒でスムーススクロールを実装 12
13. 13 従来、スムーススクロールは jQueryの勉強で作る代表的なアニ メーションでした。正規表現を入 れると「三項演算子」などが出て きて、意外と手間がかかります。 スムーススクロール
14. 14 scroll-behaviorなら秒でスムーススクロールを実装
 

15. 15 非常に便利なscroll-behaviorですが、このままではページ内検索 等の動きにも影響が出てしまいます。 なので、「:focus-within」を使ってページ内リンクのみにス ムーススクロールを対応させたい。 さらに、いつもの「Safariだけ動かない」問題が出てくるので、 2種類のアニメーションを用意する必要がある。 「:focus-within」を使ってユーザビリティを高める ページ内検索もスムーススクロール https://codepen.io/yachin29/full/VwEqPNK
16. 16 最適解
17. 17 主要ブラウザは全て対応済み

18. DEMO 18 https://codepen.io/yachin29/pen/QWZzdXB
19. 19 ちなみにデモで使用している「background-attachment」も簡単にパララックス が表現できてとても便利ですが、iOSは対応していません… https://caniuse.com/background-attachment AppleのDeveloper Forumsで「background-attachment」については以下のコメ ントで締められています。 “Apple decided fixed background is not the vibe. That's all. Apple is god remember it” background-attachment
20. 03 background-clip テキストにグラデーションを掛けたい
 20
21. 21 https://www.apple.com/jp/iphone-14-pro/
22. 22 https://isid-ai.jp/
23. 23 ちょっと前までテキストにグラデーションは画像一択だった 

24. 24 今はCSSで簡単にグラデーションが表現可能
25. 25 ※Chromeなどwebkit系のブラウザはベンダープレフィックスが必要

26. DEMO 26 https://codepen.io/yachin29/pen/QWrNWog
27. 作ってみよう 27 DEMO https://codepen.io/yachin29/pen/poxqROO
28. 使用するグラデーション 28 https://webgradients.com/ https://uigradients.com/ 横方向のアニメーションを選んで下さい web fonts https://fonts.google.com/
29. アンケート 29 次回以降の勉強会の内容向上の為、ア ンケートにご協力下さい。
30. ありがとうございました。 30