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
690
2023年のHTMLとCSS
勉強会の資料
yachin29
May 28, 2023
Tweet
Share
More Decks by yachin29
See All by yachin29
WordPressをGitで管理する
yachin29
0
870
Other Decks in Programming
See All in Programming
Six and a half ridiculous things to do with Quarkus
hollycummins
0
140
開発生産性を上げるための生成AI活用術
starfish719
3
360
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.5k
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.4k
Catch Up: Go Style Guide Update
andpad
0
210
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
270
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
480
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
210
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
140
dynamic!
moro
10
7.1k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
860
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Faster Mobile Websites
deanohume
310
31k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
A better future with KSS
kneath
239
18k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Unsuck your backbone
ammeep
671
58k
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