Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2023年のHTMLとCSS
Search
yachin29
May 28, 2023
Programming
0
540
2023年のHTMLとCSS
勉強会の資料
yachin29
May 28, 2023
Tweet
Share
More Decks by yachin29
See All by yachin29
WordPressをGitで管理する
yachin29
0
470
Other Decks in Programming
See All in Programming
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
180
Goのエラースタックトレースの歴史と今後
sonatard
9
1.5k
What We Can Learn From OSS
inouehi
0
420
Elm 0.19.0 Changes
bkuhlmann
0
490
Polars入門
daikikatsuragawa
1
100
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
GitHub Copilotのススメ
marcy731
1
200
Git Lint
bkuhlmann
4
750
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Anthropic Cookbook のおすすめレシピ
schroneko
7
980
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
330
雑に思考を整理する技術と効能
konifar
60
29k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Six Lessons from altMBA
skipperchong
21
3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Scaling GitHub
holman
457
140k
Become a Pro
speakerdeck
PRO
11
4.5k
Code Review Best Practice
trishagee
55
15k
Web development in the modern age
philhawksworth
202
10k
Clear Off the Table
cherdarchuk
84
310k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
The Invisible Customer
myddelton
114
12k
Transcript
矢島企画 バージョン 1.0 2023年のHTMLとCSS 実務でも使えるイマドキの便利なHTML&CSSのTipsまとめ 1
バージョン 1.0 今日の内容 2 スライドで紹介 1. backdrop-filterでグラスモーフィズムを表現 2. scroll-behaviorならスムーススクロールを秒で実装 実際に作ってみる
3. background-clipでAppleっぽい見出しを作る 4. さらにアニメーションで動かしてみる
コンセプト 今までJavaScriptやjQueryで行っていた作業が シンプルなCSSだけで実装が可能に ディレクターやデザイナーなどノンプログラマーが、 簡単に実装出来る便利なTipsを紹介。実装する際に気を付けるポイントも 3
きっかけ • 2022年にInternet Explorerのサポートが完全終了し、IE対応す る必要が無くなったので、積極的にCSSの新しい機能が使える ようになった。 • その代わり、最近はiOSのSafariが独自路線過ぎて「Safariだけ 動かない」や「Safariだけ表示がおかしい」がよくあるので、 今回はその辺も併せて解説。
4
01 backdrop-filter グラスモーフィズムが簡単に表現 グラスモーフィズムとは、透明度・ぼかしを組み合わせ、要素をすりガラスの ように見せられる表現手法です。ぼやけた透明度のある背景が特徴で、透明感 や光沢感を演出でき、立体感を出す事ができます。 5
6 2020年、Appleが新しいOS Big Surに このグラスモーフィズム・スタイルを採 用したことで、人気に火がついた。 グラスモーフィズム
7 https://www.pyuru.co.jp/
8
9 今は「backdrop-filter」を使ってCSSでグラスモーフィズムを作成
10 ※Safariはmac・iOS共にベンダープレフィックスが必要
DEMO 11 https://codepen.io/yachin29/pen/jOepqM
02 scroll-behavior scroll-behaviorなら秒でスムーススクロールを実装 12
13 従来、スムーススクロールは jQueryの勉強で作る代表的なアニ メーションでした。正規表現を入 れると「三項演算子」などが出て きて、意外と手間がかかります。 スムーススクロール
14 scroll-behaviorなら秒でスムーススクロールを実装
15 非常に便利なscroll-behaviorですが、このままではページ内検索 等の動きにも影響が出てしまいます。 なので、「:focus-within」を使ってページ内リンクのみにス ムーススクロールを対応させたい。 さらに、いつもの「Safariだけ動かない」問題が出てくるので、 2種類のアニメーションを用意する必要がある。 「:focus-within」を使ってユーザビリティを高める ページ内検索もスムーススクロール https://codepen.io/yachin29/full/VwEqPNK
16 最適解
17 主要ブラウザは全て対応済み
DEMO 18 https://codepen.io/yachin29/pen/QWZzdXB
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
03 background-clip テキストにグラデーションを掛けたい 20
21 https://www.apple.com/jp/iphone-14-pro/
22 https://isid-ai.jp/
23 ちょっと前までテキストにグラデーションは画像一択だった
24 今はCSSで簡単にグラデーションが表現可能
25 ※Chromeなどwebkit系のブラウザはベンダープレフィックスが必要
DEMO 26 https://codepen.io/yachin29/pen/QWrNWog
作ってみよう 27 DEMO https://codepen.io/yachin29/pen/poxqROO
使用するグラデーション 28 https://webgradients.com/ https://uigradients.com/ 横方向のアニメーションを選んで下さい web fonts https://fonts.google.com/
アンケート 29 次回以降の勉強会の内容向上の為、ア ンケートにご協力下さい。
ありがとうございました。 30