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
670
2023年のHTMLとCSS
勉強会の資料
yachin29
May 28, 2023
Tweet
Share
More Decks by yachin29
See All by yachin29
WordPressをGitで管理する
yachin29
0
840
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
640
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
530
CursorはMCPを使った方が良いぞ
taigakono
1
200
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
210
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
450
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
620
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
Java on Azure で LangGraph!
kohei3110
0
170
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
260
技術同人誌をMCP Serverにしてみた
74th
1
450
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
It's Worth the Effort
3n
185
28k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Rails Girls Zürich Keynote
gr2m
94
14k
A Tale of Four Properties
chriscoyier
160
23k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
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