No.019
SCROLL CSSJS

Horizontal Scroll

横スクロール — CSS+JS · AIプロンプト付き

縦スクロール操作で横方向にコンテンツが流れる効果。ポートフォリオ・ギャラリー・タイムラインに最適。

DEMO

01
02
03
04
05

↓ 縦スクロール = 横移動

CODE

HTML
<div class="demo-stage" style="padding:0"><div class="hs-wrap"><div class="hs-track"><div class="hs-card" style="background:#E91B89">01</div><div class="hs-card" style="background:#1A1A1A">02</div><div class="hs-card" style="background:#7B37A8">03</div><div class="hs-card" style="background:#5BAADE">04</div><div class="hs-card" style="background:#E91B89">05</div></div></div><p style="text-align:center;padding:1rem;color:#5A5A5A;font-size:.85rem">↓ 縦スクロール = 横移動</p></div>
CSS
.hs-wrap { overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; height:280px; }
.hs-track { display:flex; gap:1rem; padding:1rem; height:100%; width:max-content; }
.hs-card { flex:0 0 200px; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Oswald',sans-serif; font-size:3rem; border-radius:8px; scroll-snap-align:start; }
.hs-wrap::-webkit-scrollbar { height:6px; } .hs-wrap::-webkit-scrollbar-thumb { background:#E91B89; border-radius:3px; }
JS
const hsWrap = document.querySelector('.hs-wrap'); if(hsWrap){ hsWrap.addEventListener('wheel', (e) => { if(e.deltaY !== 0){ e.preventDefault(); hsWrap.scrollLeft += e.deltaY; } }, { passive: false }); }

AI PROMPT

Claude Cursor v0
PROMPT
縦スクロールを横スクロールに変換。コンテナoverflow-x:auto+scroll-snap-type:x mandatory。トラックはflex+width:max-contentで横並び、各カードflex:0 0 200px+scroll-snap-align:start。wheelイベントでdeltaYをscrollLeftに転送。カードホバーで影/ズームも追加可。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの心理学 ―わかりやすさ・使いやすさの法則 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

横スクロール（Horizontal Scroll）とは

縦スクロール操作で横方向にコンテンツが流れる効果。ポートフォリオ・ギャラリー・タイムラインに最適。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。

使いどころ

縦長LP・記事・ストーリーテリング型ページなど、読み進めに合わせた登場演出に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。