スライドショー
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
スライドショー
スライドショーは、同じ場所で複数の画像を切り替えて見せるUIの総称です。デモは全画面で見せるヒーロー型（横移動・フェード・ズームアウト）と、複数枚を並べて流すカルーセル型の両系統を扱い、画像の切り抜きを担うobject-fit / object-positionの解説まで含めた、当時としては踏み込んだ構成になっています。
華やかな部品ですが、実サイトでの成否は「1枚目」がすべてと言っても過言ではありません。ほとんどの訪問者は2枚目以降を見ないからです。
今回は複数の画像やコンテンツをまとめて見せるスライドショーを作りました。 ヘッダー画像で使うと第一印象をガラッと変えられます。
おさえておきたいところ
スライドショーを使う目的と使いどころはこんな感じです。
目的：複数の画像やコンテンツをまとめて見せる
使いどころ：画面の読み込み中 / クリック
横移動させて全画面で見せる
CSSだけで画像をトリミング 「object-fit」
画像の縦横比を維持したまま埋めたい時は、object-fit: cover; を使います。 画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、はみ出した部分はトリミングされます。 ※もっと詳しく知りたい場合は上の「object-fit」リンクからMDNにアクセスしてください
画像を任意の位置でトリミング「object-position」
object-fit: cover; で画像の縦横比を保持したまま画像の中央でトリミングして表示できるようになりましたが、毎回画像の中央にフォーカスしたいとは限りませんね。 中央以外の位置でトリミングしたい時は object-position プロパティーを設定しましょう。 左上を基準にして、object-position: 横の位置 縦の位置; を記述すればOK。 ※もっと詳しく知りたい場合は上の「object-position」リンクからMDNにアクセスしてください
フェードイン・アウトさせて全画面で見せる
全画面でゆっくりズームアウトさせる
動きを組み合わせて全画面で見せる
複数画像を並列に見せる
複数画像を中央に注目させて見せる
複数画像を流して見せる
2つの画像の動きを対比させて見せる
実務メモ（2026年追記）
保守・新規実装での最重要ポイントは表示速度です。ヒーロー型の1枚目はページのLCP（最大コンテンツの表示）になりやすいため、1枚目だけは遅延読み込みせず先読みし、2枚目以降をloading="lazy"にする――この非対称な最適化が効きます。自動再生には一時停止手段を用意し、prefers-reduced-motionでは止める。そして「重要な情報をカルーセルの奥に隠さない」という設計原則は、今も昔も変わりません。
- 枚数は絞る（5枚を超えるとほぼ見られない）。1枚目に最重要ビジュアルを
- 簡易なものならCSSの
scroll-snapだけでスワイプ式が作れる時代 - 切り替え矢印・ドットはタップ領域を十分に（小さすぎる失敗が多い）
- 静的に並べて選ばせる形はギャラリーを参照
次回の予定
画像やコンテンツの一覧を俯瞰して見せるギャラリーを作ってみようと思います＼＼\٩( ‘ω’ )و //／／
