CSS スライドショーシンプル

CSS 幻灯片簡単実装：シンプルで優雅なウェブカルーセルを作る

この文章では、純粋な CSS を使用してシンプルで優雅なウェブページのスライドショー効果を実装する方法を紹介します。JavaScript に頼ることなく、CSS の強力な機能だけで、スムーズで自然な画像回転体験を作り出すことができます。

一、HTML 構造の構築：スライドショーの基礎を築く

順序なしリスト（`<ul>`）を使用して、すべてのスライドショー画像を囲みます。各リスト項目（`<li>`）は 1 つのスライドを表し、その中には画像要素（``）が含まれます。


<ul class="slideshow">
  <li><img src="image1.jpg" alt="画像1の説明"></li>
  <li><img src="image2.jpg" alt="画像2の説明"></li>
  <li><img src="image3.jpg" alt="画像3の説明"></li>
</ul>

二、CSS スタイルデザイン：スライドショーに命を吹き込む

`overflow: hidden;` を使用して、スライドショーコンテナを固定サイズに設定し、はみ出した部分を非表示にします。リスト項目（`<ul>`）の幅と `display: inline-block;` プロパティを設定することにより、水平方向に配置します。 `animation` プロパティと関連パラメータを使用して、自動再生、ループ再生などの動的効果を実現します。


.slideshow {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.slideshow li {
  width: 600px;
  height: 400px;
  display: inline-block;
}

.slideshow li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideshow:after {
  content: '';
  display: block;
  clear: both;
}

.slideshow ul {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
  text-align: center;
}

.slideshow li {
  animation: slideshow 12s infinite;
}

@keyframes slideshow {
  0% { margin-left: 0; }
  33.33% { margin-left: -100%; }
  66.66% { margin-left: -200%; }
  100% { margin-left: 0; }
}

三、さらなる最適化：ユーザーエクスペリエンスの向上

インジケーターの追加：擬似要素または他の HTML 要素を使用してインジケーターを作成し、CSS を使用してそのスタイルとスライドショーとの連携効果を制御します。手動切り替えの実装：`:hover` 擬似クラスまたは他の CSS セレクターを使用して、マウスオーバーでスライドを切り替える機能を実現します。


.slideshow ul li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.slideshow ul li:hover,
.slideshow ul li.active {
  background-color: #333;
}

四、まとめ：

この文章を通して、純粋な CSS を使用してシンプルなスライドショーを作成するテクニックを習得しました。JavaScript に頼ることなく、基本的な画像回転効果を実現することができます。 CSS スライドショーの基本原理を習得することで、実際のプロジェクトで柔軟に活用し、よりパーソナライズされたウェブページ表示効果を作り出すことができます。

参考文献:

よくある質問

Q1: CSSだけでスライドショーを実装するメリットは？

A1: JavaScript を使用しないため、ページの読み込み速度が向上し、SEO にも有利に働きます。また、コードがシンプルになり、メンテナンス性も向上します。

Q2: スライドショーの表示速度を調整するには？

A2: `animation` プロパティの `duration` 値を変更することで、スライドショーの表示速度を調整できます。値を大きくすると表示速度が遅くなり、小さくすると速くなります。

Q3: スライドショーにフェードイン・フェードアウト効果を追加するには？

A3: `animation` プロパティで `opacity` を使用することで、フェードイン・フェードアウト効果を追加できます。キーフレームを設定し、`opacity` の値を 0 から 1、または 1 から 0 に変化させることで実現できます。

その他の参考記事:css スライドショーレスポンシブ