CSSだけで作る！逆方向も途切れない2段ロゴスライダー（初心者でも再現可能）

Webサイトで企業ロゴやメディア掲載ロゴを表示したいとき、
「ロゴが途中で途切れる」「2段目は逆方向に流したい」「スマホやSafariで潰れる」などの悩みに直面することがあります。

今回の記事では、CSSだけで完結する2段ロゴスライダー の作り方を解説します。
実際に私が制作中につまづいた点も踏まえ、「なぜこうするか」を丁寧に説明します。

1. 制作のポイントとつまづきポイント

ポイント

• 2段目は逆方向に流す
• 途切れずループする
• ロゴ縦横比を維持して潰れないようにする
• Safariやスマホ対応

実際にハマったこと

1. 2段目だけロゴが途切れる
   • 原因：アニメーションの translateX が逆方向の設定で、1セット分の幅しかなかった
   • 対策：ロゴリストを 2セット並べてループ させ、アニメーション範囲を50%に設定
2. ロゴの高さが揃わない / 潰れる
   • 原因：画像の縦横比が異なるため、height と width の指定だけでは崩れる
   • 対策：object-fit: contain; display: block; を指定し、縦揃えと潰れ防止
3. Safariで潰れる
   • 原因：flexboxの縮小やoverflowの扱い
   • 対策：min-width: max-content; flex-shrink: 0; を使い、flexアイテムが勝手に縮まないように設定

原因：flexboxの縮小やoverflowの扱い

<div class="media">
  <h4 class="media_title">
    Example <span class="badge">Sample Logos</span>
  </h4>
  <div class="media_wrap">
    <!-- 1段目 左方向 -->
    <div class="media_list_wrap">
      <div class="media_slider">
        <ul class="media_list">
          <li><img src="images/logo1.png" alt="Logo 1"></li>
          <li><img src="images/logo2.png" alt="Logo 2"></li>
          <li><img src="images/logo3.png" alt="Logo 3"></li>
          <li><img src="images/logo4.png" alt="Logo 4"></li>
          <li><img src="images/logo5.png" alt="Logo 5"></li>
          <!-- ループ用にもう1セット -->
          <li><img src="images/logo1.png" alt="Logo 1"></li>
          <li><img src="images/logo2.png" alt="Logo 2"></li>
          <li><img src="images/logo3.png" alt="Logo 3"></li>
          <li><img src="images/logo4.png" alt="Logo 4"></li>
          <li><img src="images/logo5.png" alt="Logo 5"></li>
        </ul>
      </div>
    </div>

    <!-- 2段目 右方向 -->
    <div class="media_list_wrap reverse">
      <div class="media_slider">
        <ul class="media_list">
          <li><img src="images/logo6.png" alt="Logo 6"></li>
          <li><img src="images/logo7.png" alt="Logo 7"></li>
          <li><img src="images/logo8.png" alt="Logo 8"></li>
          <li><img src="images/logo9.png" alt="Logo 9"></li>
          <li><img src="images/logo10.png" alt="Logo 10"></li>
          <!-- ループ用にもう1セット -->
          <li><img src="images/logo6.png" alt="Logo 6"></li>
          <li><img src="images/logo7.png" alt="Logo 7"></li>
          <li><img src="images/logo8.png" alt="Logo 8"></li>
          <li><img src="images/logo9.png" alt="Logo 9"></li>
          <li><img src="images/logo10.png" alt="Logo 10"></li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS例（汎用版）

.media {
  background-color: #fff;
  padding: 1rem 0;
  text-align: center;
}

.media_title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #333;
}

.media_title .badge {
  background: #007BFF;
  color: #fff;
  border-radius: 50px;
  padding: 0.2rem 0.8rem;
  margin-left: 0.4rem;
  font-size: 1.4rem;
}

.media_wrap {
  overflow: hidden;
}

.media_list_wrap {
  display: flex;
  white-space: nowrap;
  margin: 0.6rem 0;
  position: relative;
}

.media_list_wrap.reverse .media_slider .media_list {
  animation-name: scroll-right;
}

.media_slider {
  display: flex;
}

.media_list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: max-content;
  animation: scroll-left 15s linear infinite;
}

.media_list_wrap.reverse .media_list {
  animation: scroll-right 15s linear infinite;
}

.media_list li {
  flex: 0 0 auto;
  margin: 0 0.5rem;
}

.media_list li img {
  height: 50px;
  width: auto;
  object-fit: contain;
  display: block;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media (max-width: 768px) {
  .media_list li img { height: 35px; }
  .media_list, .media_list_wrap.reverse .media_list {
    animation-duration: 25s;
  }
  .media_title { font-size: 1.4rem; }
  .media_title .badge {
    font-size: 1.2rem;
    padding: 0.2rem 0.6rem;
  }
}

. まとめ

• 2段目逆方向でも途切れないように ロゴ2セットでループ
• ロゴの縦横比は object-fit:contain で維持
• Safariやスマホでも潰れない
• タイトルはテキストで装飾しSEOフレンドリー
• 誰でも使える汎用例として再現可能

💡 ポイント

• アニメーション距離はロゴリストの2セット分で調整
• flex-shrinkを0にして潰れ防止
• 逆方向スクロールは translateX(-50%) → 0 で自然に