Webサイトにカルーセルを実装しました！

# Webサイトにカルーセルを実装しました！想像以上に難しかった制作記録

本日は、制作中のWebサイトに「カルーセル」を実装しました。

カルーセルとは、複数の画像やカードを横方向へスライドさせて表示する仕組みのことです。

店舗や施設などの写真をすべて一度に並べると、ページが長くなったり、情報量が多く見えたりします。

カルーセルを使えば、限られたスペースの中で複数の写真を見せられるため、店舗紹介や制作実績などにも活用できます。

今回は店舗内の写真を見やすく紹介するために取り入れましたが、完成するまでの調整が想像以上に難しかったです。

## Swiperを使ってカルーセルを実装

今回のカルーセルには「Swiper」というライブラリを使用しました。

Swiperは、Webサイトにスライド機能を追加できるライブラリです。

HTMLでスライドの構造を作り、CSSで見た目を整え、JavaScriptで動き方を設定します。

大まかな仕組みは、次のようになっています。

* カルーセル全体を囲む要素

* スライドをまとめる要素

* 1枚ずつのスライド

* 現在位置を表すページネーション

* カルーセルの動きを設定するJavaScript

ただ写真を横に並べるだけではなく、Swiperで決められたクラスを正しく指定する必要があります。

HTML・CSS・JavaScriptのどれか一つでも設定が合っていないと、横並びにならなかったり、スライドしなかったりするため、確認する部分が多くありました。

## 写真の大きさをそろえる

カルーセルに使用する写真は、それぞれ縦横の比率が異なります。

そのまま表示すると、カードごとに高さが変わり、全体のレイアウトが崩れてしまいます。

そこで、画像を囲む部分に`aspect-ratio`を指定し、すべての写真が同じ比率で表示されるようにしました。

```css

.shop-space-image {

  position: relative;

  overflow: hidden;

  aspect-ratio: 16 / 10;

}

.shop-space-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

```

`aspect-ratio: 16 / 10;`で画像の表示領域の比率を統一し、`object-fit: cover;`で領域いっぱいに写真を表示しています。

写真の一部はトリミングされますが、カードの大きさがそろい、カルーセル全体がすっきりと見えるようになりました。

## カードの見た目も調整

写真だけではなく、カルーセル内のカードにも角丸や影を設定しました。

```css

.shop-space-card {

  overflow: hidden;

  height: 100%;

  border-radius: 24px;

  background: #fff;

  border: 2px solid rgba(53, 107, 68, 0.12);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);

}

```

角を丸くし、薄い枠線と影を付けることで、写真が一つのカードとしてまとまって見えるようになりました。

影を濃くしすぎると重たい印象になるため、サイト全体になじむように控えめにしています。

## ページネーションのデザイン

カルーセルの下には、現在表示しているスライドの位置が分かる「ページネーション」を設置しました。

通常の丸い点だけでは少し分かりにくかったため、選択中の点だけ横長になるデザインにしました。

```css

.shop-pagination .swiper-pagination-bullet {

  width: 11px;

  height: 11px;

  opacity: 1;

  background: #d5d5d5;

}

.shop-pagination .swiper-pagination-bullet-active {

  width: 32px;

  border-radius: 20px;

  background: #356b44;

}

```

選択されていない部分はグレーの丸、現在表示している部分はサイトのテーマカラーを使った横長の形にしています。

小さな部分ですが、現在位置が分かりやすくなり、カルーセルらしい動きも伝わりやすくなりました。

## 今回難しかったこと

今回の作業では、特に次の部分が難しく感じました。

* Swiper用のHTML構造を正しく作ること

* CSSとSwiperの設定を組み合わせること

* カードの幅や写真の高さをそろえること

* 複数枚のカードが自然に見えるように調整すること

* ページネーションを希望の位置と形にすること

* パソコンとスマートフォンの両方で見やすくすること

見た目だけを整えてもカルーセルは動かず、動くようになってもカードの大きさや余白が合わないことがあります。

一つ修正すると別の部分がずれることもあり、何度も表示を確認しながら少しずつ調整しました。

特にSwiper独自のクラスと、自分で付けたクラスの両方が関係するため、「どのCSSがどの部分に適用されているのか」を確認することが大切だと感じました。

## カルーセルが動いたときの達成感

今回はかなり苦戦しましたが、最終的にはカードが横に並び、きちんとスライドするカルーセルを実装できました。

ページネーションも動作し、選択中のスライドが分かる形に調整できています。

何度も試しながら完成させたため、実際にカルーセルとして動いたときは、とても達成感がありました。

まだ写真の差し替えや細かなデザイン調整は残っていますが、カルーセルの基本的な仕組みは完成しました。

## まとめ

今回の制作を通して、カルーセルは単に画像を横へ動かすだけの機能ではないことが分かりました。

HTMLで正しい構造を作り、CSSで写真やカードの見た目を整え、JavaScriptで動きを設定する必要があります。

今回学んだポイントは、次のとおりです。

* Swiperには決められたHTML構造がある

* 写真の比率は`aspect-ratio`でそろえられる

* `object-fit: cover;`で画像を枠いっぱいに表示できる

* ページネーションもCSSでデザインできる

* 実際の画面で確認しながら細かく調整することが大切

かなり難しい作業でしたが、その分、新しく理解できたことも多くありました。

次回はカルーセル内の写真を差し替え、パソコンとスマートフォンでの見え方を確認しながら、さらに完成度を高めていきたいと思います。