最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ

Apple, Nike, Tesla, AirbnbなどのWebサイトやスマホアプリで使用されている、CSSの一工夫加えたスゴ技テクニックを紹介します。

美しい磨りガラスのヘッダ、コンテンツがズームするエフェクト、タッチフレンドリーなカルーセル、超クールなスワイプオーバーセクション、新感覚のスワイプアップするドロワーなど、すぐに使えるCSSのテクニックです。

CSSの一工夫加えたスゴ技テクニックのまとめ

my favorite clever CSS tricks
by @Steve8708

下記は各ポイントを意訳したものです。
※著者様の許諾のもと、翻訳・掲載しています。

Apple: ヘッダに使用されている美しい磨りガラスのエフェクト

Appleのヘッダに使用されている、美しい磨りガラスのエフェクトはCSSで実装されています。

背景色を設定し、backdrop-filter: blur(20px);でぼかし、磨りガラスの効果を与えます。Appleではさらに工夫がされており、saturate(180%)で背景の彩度も調整しています。

上記の背景色background: rgba(0,0,0,0.8);はブラックですが、明るいホワイトでもこのエフェクトは使用できます。

明るいホワイトで美しい磨りガラスのエフェクト

2022年7月現在、backdrop-filterプロパティはFirefoxを除くすべてのブラウザにサポートされています。ただし、Firefoxの次期バージョン103でサポートされる予定です。
参考: backdrop-filterのサポート状況

backdrop-filterプロパティの使い方については下記をご覧ください。

Apple: 超クールなスワイプオーバーセクション

iPhone 13MacBookなど、Appleのプロダクトページでよく使用されているセクションをスワイプオーバーさせる超クールなエフェクトもCSSのみで実装できます。

スワイプオーバーとは、高さいっぱいのセクションをカーテンを上げるように表示するエフェクトです。昔は背景をposition:fixed;にして実装されていましたが、position: sticky;を使用するとセクション単位で実装できます。
まずは、HTMLの基本構造。

.underが最初に表示され、.overがスワイプオーバーで表示されます。

.underposition: sticky;にし、top: 0;にすることでスクロールしたときに上にくっつきます。.wrapperの下部が最終的に下部に上がるまでそのセクションを一番下までスクロールし続けないため、height: 200vh;で非常に高くする必要があります。ラッパーの高さがあるため、空きスペースがたくさんできます。そして次のセクションの.overにはそのスペースを埋めるために非常に大きな負のマージンを与えます。これで、下のセクションが上にくっついているとき、その下のセクションはその上に上がります。

position: sticky;は、すべてのブラウザにサポートされています。
参考: position: sticky;のサポート状況

position: sticky;の使い方については下記をご覧ください。

Apple: スクロールするとコンテンツがズームするエフェクト

これもAppleのプロダクトページでよく使用されている、特にヒーローなどの目立たせたい画像で使用されているエフェクトです。ページを表示すると大きな画像が表示され、スクロールするとズームアウトしたり、またその逆に全体を表示し、注目されたい箇所をズームインするエフェクトです。

このエフェクトには、2つのテクニックが使用されています。
1つ目は、position: sticky;

.zoomにはposition: sticky;があるので、スクロールすると上にくっついて継続されます。くっついた要素はtranform: scale(2.2);で拡大されます。

2つ目は、スクロールリスナーとJavaScriptを少し追加し、スクロールに応じてscaleの値を変化させてズームさせています。

これで下方向にスクロールにするとズームアウト、上方向にスクロールにするとズームインされます。

Apple: ピュアCSSで実装する美しいハンバーガーメニュー

Appleで使用されているハンバーガーメニューは、ピュアCSSで実装されています。JavaScriptをオフにして試してみてください。

ポイントは、ハンバーガーメニューはチェックボックスで実装されていることです。

:checkedでチェックした状態のスタイルを設定できます。また+を使用することで、別の要素に対してスタイルを設定できます。

二本線から×にアニメーションさせるには、下記のように記述します。

※アクセシビリティの観点からこの実装が理想的であるとは言えません。JavaScriptをほんの少し加えた方がよいでしょう。

Apple, Nike: ピュアCSSでタッチフレンドリーなカルーセル

AppleやNikeのカルーセルは、ピュアCSSで実装されています。CSSに一手間加えることで、タッチフレンドリーになっています。

このカルーセルの特徴はパネルをスクロールした際に、各パネルにスナップすることです。これはデスクトップでもスマホでも機能し、ほんの少しのCSSで実装できます。

scroll-snap-type: x mandatory;xはX軸にロックし、mandatoryはユーザーがスクロールを停止するたびにブラウザがスナップポイントにスナップされます。また、scroll-padding: 0 24px;を加えると、スナップする距離を設定することもできます。

次に、scroll-snap-align: start;でスナップする場所の内部アイテムを設定します。scroll-snap-alignには、要素のどの部分がコンテナにスナップするかを設定できます。値は「start, center, end」の3つがあります。

scroll-snapプロパティの使い方については下記をご覧ください。

カルーセルの実装に必要なコードは、下記の通りです。

ボーナスとして、このカルーセルにナビゲーションをつけたい場合は、数行のJavaScriptで実装できます。

Tesla: 美しく滑らかなフルページのスワイプエフェクト

scroll-snapプロパティは前述のカルーセルだけでなく、セクションに設定しても美しく滑らかなスワイプエフェクトを実装できます。もちろん、JavaScriptは必要ありません。

まずは、基本のスクロールコンテナを実装します。コンテナを作成し、セクションはビューポートの高さいっぱいに設定します。

次に、CSSでスクロールのスナップを設定します。Y軸にロックし、mandatoryはユーザーがスクロールを停止するたびにブラウザがスナップポイントにスナップされます。

一度に1つのセクションだけを移動するために、scroll-snap-stop: always;を追加して停止します。これでデスクトップとモバイルデバイスの両方で、ネイティブでスムーズな効果を得ることができます。

Airbnb: 新感覚のスクロール、スワイプアップするドロワー

最後は、Airbnbのスマホでスワイプアップするドロワーです。CSSのかなり巧妙なテクニックが使用されています。

まずは、基本構造。

このテクニックのポイントは、potion: fixed;でマップの位置をロックすることです。そしてドロワーにposition: relative;を設定して、マップの上に持ち上げます。margin-top: 50vh;で上部の余白を大きくすることで、ページ上部とドロワーの開始位置の間にスペースが生まれます。これにより、ページを単にスクロールするのではなく、ドロワーをスクロールしているような錯覚を引き起こします。

sponsors

top of page

©2022 coliss