AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。
CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。
コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。
「これどうやる?」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集
ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。
ユーザーの視線を奪うアニメーションやレイアウトなど、どれもCSSのみでスタリングされたとは思えないものばかりです。
では、いくつかの投稿を見てみましょう。
Apple編 – スクロールでセクションが重なるCSSエフェクト
ページをスクロールすると、コンテンツが重なり合うシンプルだけど効果的なSwipe Overテクニック。ポイントは、position: sticky;
を利用することで、CSSオンリーで表現できます。
Make super cool swipe-over sections like Apple in pure CSS!
Try it in code: https://t.co/OUvhtQK5IP
Try it in @builderio: https://t.co/5RMA37TdIr pic.twitter.com/lOiUdFeHx1— Steve (Builder.io) (@Steve8708) June 25, 2022
- 参考サイト – Apple iPhone 13 Pro
- デモコード – https://jsfiddle.net/bsc2w8fo/
Tesla編 – 美しいほどなめらかなフルページのスワイプエフェクト
See the Pen
Tesla Scrolling by Steve Sewell (@steve8708)
on CodePen.
ページをスワイプすると、ぴたりとコンテンツが切り替わるこのエフェクトも、CSSのみで再現されています。ポイントはscroll-snap-type
プロパティ、ほんの3行のコードを追加するだけで実現できるテクニック。
How does Tesla make that beautifully smooth full page swipe effect on their homepage?
/* tl;dr */
.container {
scroll-snap-type: y mandatory;
}
.section {
scroll-snap-align: start;
scroll-snap-stop: always;
}More detail 👇 pic.twitter.com/sPjWijuMas
— Steve (Builder.io) (@Steve8708) June 3, 2022
- 参考サイト – Tesla ホームページ
- デモコード – https://codepen.io/steve8708/pen/GRQGYwr
Apple編 – ハンバーガーメニューの美しいアニメーション
CSSのみでなめらかに動作するハンバーガーメニュー、これをJSなしで再現できてしまいます。ポイントはinput type="checkbox"
を利用した、使いやすさにも工夫を凝らしたテクニック。
How Apple makes their beautiful hamburger menu in *pure CSS* (no JS!)
<!– tl;dr –>
<input type="checkbox" … />
<style>
.checkbox:checked + .menu {
/* animate */
}
</style>More detail 👇 pic.twitter.com/0XldiLPuND
— Steve (Builder.io) (@Steve8708) June 2, 2022
- 参考サイト – Apple ホームページ
- デモコード – https://jsfiddle.net/ba6szc7d/3/
Airbnb編 – なめらかな引き出し型スワイプ
表示された地図に重ねるようにコンテンツが引き出しのように表示される動きが特長。position: fixed;
で地図をあらかじめ固定し、コンテンツをposition: relative;
で重ねるというCSSの基本で再現できるテクニック。
How Airbnb makes that cool swipe up drawer on their mobile site in CSS
Pretty clever trick!
Code example: https://t.co/XLawzyURaV
No-code example: https://t.co/xGx1kPS0zx pic.twitter.com/pX8ic4g711— Steve (Builder.io) (@Steve8708) June 27, 2022
- 参考サイト – Airbnb ホームページ
- デモコード – https://jsfiddle.net/pj1vnsum/
Apple編 – コンテンツにズームするページ遷移エフェクト
ふたたびAppleから。スクロールするとコンテンツがズームアウトし、より広い範囲まで表示してから次のコンテンツへの進むエフェクト。このテクニックは、すこしだけJSの力を借りる必要あり。
How Apple makes those awesome zooming page transitions as you scroll
Code example: https://t.co/DrOlZ8QLoS
Low-code example: https://t.co/tpZglprSZV pic.twitter.com/nBy0XIleVS— Steve (Builder.io) (@Steve8708) June 28, 2022
- 参考サイト – Apple iPhone 13 Pro
- デモコード – jsfiddle.net/pz5av4fr/
Apple & Nike編 – タッチ操作可能ななめらかなカルーセルエフェクト
商品一覧ページで利用されている、スマホでのタッチ操作にも対応したカルーセルエフェクトも、CSSのみで再現できます。ポイントは、scroll-snap-type
プロパティです。
How do Nike and Apple make such smooth and touch friendly carousels with pure CSS?
/* tl;dr */
.carousel {
scroll-snap-type: x mandatory;
}
.carousel .item {
scroll-snap-align: start;
}More detail 👇 pic.twitter.com/eBX7vAJMeA
— Steve (Builder.io) (@Steve8708) May 30, 2022
- 参考サイト – Nike ホームページ
- デモコード – https://jsfiddle.net/L1cs6gt5/1/
Apple編 – すりガラスエフェクト
背景が透けて見える「すりガラス」風のナビゲーションメニューのつくり方。ポイントは、backdrop-filter: blur(20px)
を使うこと。saturate(180%)
を加えると、背景がより鮮やかに見える技が光るテクニック。ただし、Firefoxではまだ非対応。
How does Apple make that awesome frosted glass effect on their site header in CSS?
tl;dr backdrop-filter: blur(20px) saturate(180%)
Better explanation 👇 pic.twitter.com/vbmMaanbIA
— Steve (Builder.io) (@Steve8708) May 30, 2022
■ 知っておくと便利なCSS小技テクニックはこちらから
■ CSSの関連記事へ