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
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
120
The Flutter Journey of Building a Live Streaming App — With a Side of Performance Tuning
u503
1
100
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
650
CSC509 Lecture 04
javiergs
PRO
0
300
CSC305 Lecture 05
javiergs
PRO
0
210
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
950
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
170
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
200
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
150
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
Git: the NoSQL Database
bkeepers
PRO
431
66k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Being A Developer After 40
akosma
91
590k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Practical Orchestrator
shlominoach
190
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Mobile First: as difficult as doing things right
swwweet
224
10k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Statistics for Hackers
jakevdp
799
220k
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