【CSS】「これどうやる?」アップルやテスラのWebレイアウト再現テクニック集

 

AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。

 

CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。

 

コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。

 

 

「これどうやる?」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集

 

ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。

 

ユーザーの視線を奪うアニメーションやレイアウトなど、どれもCSSのみでスタリングされたとは思えないものばかりです。

 

では、いくつかの投稿を見てみましょう。

 

Apple編 – スクロールでセクションが重なるCSSエフェクト

ページをスクロールすると、コンテンツが重なり合うシンプルだけど効果的なSwipe Overテクニック。ポイントは、position: sticky;を利用することで、CSSオンリーで表現できます。

 

 

 

Tesla編 – 美しいほどなめらかなフルページのスワイプエフェクト

See the Pen
Tesla Scrolling
by Steve Sewell (@steve8708)
on CodePen.

 

ページをスワイプすると、ぴたりとコンテンツが切り替わるこのエフェクトも、CSSのみで再現されています。ポイントはscroll-snap-typeプロパティ、ほんの3行のコードを追加するだけで実現できるテクニック。

 

 

 

Apple編 – ハンバーガーメニューの美しいアニメーション

CSSのみでなめらかに動作するハンバーガーメニュー、これをJSなしで再現できてしまいます。ポイントはinput type="checkbox"を利用した、使いやすさにも工夫を凝らしたテクニック。

 

 

 

Airbnb編 – なめらかな引き出し型スワイプ

表示された地図に重ねるようにコンテンツが引き出しのように表示される動きが特長。position: fixed;で地図をあらかじめ固定し、コンテンツをposition: relative;で重ねるというCSSの基本で再現できるテクニック。

 

 

 

Apple編 – コンテンツにズームするページ遷移エフェクト

ふたたびAppleから。スクロールするとコンテンツがズームアウトし、より広い範囲まで表示してから次のコンテンツへの進むエフェクト。このテクニックは、すこしだけJSの力を借りる必要あり。

 

 

 

Apple & Nike編 – タッチ操作可能ななめらかなカルーセルエフェクト

商品一覧ページで利用されている、スマホでのタッチ操作にも対応したカルーセルエフェクトも、CSSのみで再現できます。ポイントは、scroll-snap-typeプロパティです。

 

 

 

Apple編 – すりガラスエフェクト

背景が透けて見える「すりガラス」風のナビゲーションメニューのつくり方。ポイントは、backdrop-filter: blur(20px)を使うこと。saturate(180%)を加えると、背景がより鮮やかに見える技が光るテクニック。ただし、Firefoxではまだ非対応。

 

 

■ 知っておくと便利なCSS小技テクニックはこちらから

CSSの関連記事