2023年のHTMLとCSS - Speaker Deck

2023年のHTMLとCSS

by yachin29

Slide 1

Slide 1 text

矢島企画バージョン 1.0 2023年のHTMLとCSS 実務でも使えるイマドキの便利なHTML＆CSSのTipsまとめ 1

Slide 2

Slide 2 text

バージョン 1.0 今日の内容 2 スライドで紹介 1. backdrop-ﬁlterでグラスモーフィズムを表現 2. scroll-behaviorならスムーススクロールを秒で実装実際に作ってみる 3. background-clipでAppleっぽい見出しを作る 4. さらにアニメーションで動かしてみる

Slide 3

Slide 3 text

コンセプト今までJavaScriptやjQueryで行っていた作業がシンプルなCSSだけで実装が可能にディレクターやデザイナーなどノンプログラマーが、簡単に実装出来る便利なTipsを紹介。実装する際に気を付けるポイントも 3

Slide 4

Slide 4 text

きっかけ ● 2022年にInternet Explorerのサポートが完全終了し、IE対応する必要が無くなったので、積極的にCSSの新しい機能が使えるようになった。 ● その代わり、最近はiOSのSafariが独自路線過ぎて「Safariだけ動かない」や「Safariだけ表示がおかしい」がよくあるので、今回はその辺も併せて解説。 4

Slide 5

Slide 5 text

01 backdrop-ﬁlter グラスモーフィズムが簡単に表現グラスモーフィズムとは、透明度・ぼかしを組み合わせ、要素をすりガラスのように見せられる表現手法です。ぼやけた透明度のある背景が特徴で、透明感や光沢感を演出でき、立体感を出す事ができます。 5

Slide 6

Slide 6 text

6 2020年、Appleが新しいOS Big Surにこのグラスモーフィズム・スタイルを採用したことで、人気に火がついた。グラスモーフィズム

Slide 7

Slide 7 text

7 https://www.pyuru.co.jp/

Slide 8

Slide 8 text

Slide 9

Slide 9 text

9 今は「backdrop-ﬁlter」を使ってCSSでグラスモーフィズムを作成

Slide 10

Slide 10 text

10 ※Safariはmac・iOS共にベンダープレフィックスが必要 

Slide 11

Slide 11 text

DEMO 11 https://codepen.io/yachin29/pen/jOepqM

Slide 12

Slide 12 text

02 scroll-behavior scroll-behaviorなら秒でスムーススクロールを実装 12

Slide 13

Slide 13 text

13 従来、スムーススクロールは jQueryの勉強で作る代表的なアニメーションでした。正規表現を入れると「三項演算子」などが出てきて、意外と手間がかかります。スムーススクロール

Slide 14

Slide 14 text

14 scroll-behaviorなら秒でスムーススクロールを実装   

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

16 最適解

Slide 17

Slide 17 text

17 主要ブラウザは全て対応済み 

Slide 18

Slide 18 text

DEMO 18 https://codepen.io/yachin29/pen/QWZzdXB

Slide 19

Slide 19 text

19 ちなみにデモで使用している「background-attachment」も簡単にパララックスが表現できてとても便利ですが、iOSは対応していません… https://caniuse.com/background-attachment AppleのDeveloper Forumsで「background-attachment」については以下のコメントで締められています。 “Apple decided ﬁxed background is not the vibe. That's all. Apple is god remember it” background-attachment

Slide 20

Slide 20 text

03 background-clip テキストにグラデーションを掛けたい  20

Slide 21

Slide 21 text

21 https://www.apple.com/jp/iphone-14-pro/

Slide 22

Slide 22 text

22 https://isid-ai.jp/

Slide 23

Slide 23 text

23 ちょっと前までテキストにグラデーションは画像一択だった  

Slide 24

Slide 24 text

24 今はCSSで簡単にグラデーションが表現可能

Slide 25

Slide 25 text

25 ※Chromeなどwebkit系のブラウザはベンダープレフィックスが必要 

Slide 26

Slide 26 text

DEMO 26 https://codepen.io/yachin29/pen/QWrNWog

Slide 27

Slide 27 text

作ってみよう 27 DEMO https://codepen.io/yachin29/pen/poxqROO

Slide 28

Slide 28 text

使用するグラデーション 28 https://webgradients.com/ https://uigradients.com/ 横方向のアニメーションを選んで下さい web fonts https://fonts.google.com/

Slide 29

Slide 29 text

アンケート 29 次回以降の勉強会の内容向上の為、アンケートにご協力下さい。

Slide 30

Slide 30 text

ありがとうございました。 30