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
680
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
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
280
AIでLINEスタンプを作ってみた
eycjur
1
230
はじめてのMaterial3 Expressive
ym223
2
240
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
480
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.3k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
320
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
510
時間軸から考えるTerraformを使う理由と留意点
fufuhu
15
4.6k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.2k
Designing for humans not robots
tammielis
253
25k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Producing Creativity
orderedlist
PRO
347
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Fireside Chat
paigeccino
39
3.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Scaling GitHub
holman
463
140k
Navigating Team Friction
lara
189
15k
Context Engineering - Making Every Token Count
addyosmani
1
29
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