MENU
  1. ホーム
  2. CSS
  3. 【HTML/CSS】コピペ！おしゃれなスライダー（カルーセル）デザイン12選

【HTML/CSS】コピペ！おしゃれなスライダー（カルーセル）デザイン12選

CSS
いつまで無駄なデザインに時間を費やしますか？ 自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、カスタマイズ可能なおしゃれなスライダー（カルーセル）デザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

目次
もう無駄なレイアウトに凝るのやめたら？ 最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

ベーシック・王道スライドショー（自動・手動）

最も検索されやすい基本的な型です。

記事の序盤で紹介する「まずはコピペで動くレスポンシブな基本形」として最適です。

ここでは、以下のベーシック・王道スライドショー（自動・手動）のデザイン例を記載しています。

ベーシック・王道スライドショー（自動・手動）
  • 自動フェード・スライドショー（自動）
  • ラジオボタン式・手動スライド（手動・ボタン付き）
  • スワイプ対応・スクロールスナップ（バー付き）

実際のデザインプレビューとHTML＆CSSコードを記載しています。

自動フェード・スライドショー（自動）

JavaScriptを一切使わず、CSSの@keyframes（アニメーション）とopacity（透明度）の制御だけで画像がフワッと切り替わりながら無限にループする王道のスライドショーです。

スライド1
スライド2
スライド3
HTMLコード表示
<div class="cs-fade-slider-container">
    
    <div class="cs-fade-slide-item">
        <img src="https://placehold.jp/24/2589d0/ffffff/800x450.png?text=Slide+01" alt="スライド1">
    </div>

    <div class="cs-fade-slide-item">
        <img src="https://placehold.jp/24/48bb78/ffffff/800x450.png?text=Slide+02" alt="スライド2">
    </div>

    <div class="cs-fade-slide-item">
        <img src="https://placehold.jp/24/ed8936/ffffff/800x450.png?text=Slide+03" alt="スライド3">
    </div>

</div>
CSSコード表示
/* =========================================
   1. スライダー全体のコンテナ（レスポンシブ対応）
========================================= */
.cs-fade-slider-container {
    position: relative;
    width: 100%;
    /* ▼ 画像の比率を16:9に固定して自動伸縮させる ▼ */
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin-bottom: 2em;
    background-color: #000000; /* 切り替え時の背景のチラつき防止 */
}

/* =========================================
   2. 各スライドの共通設定（重ね合わせ）
========================================= */
.cs-fade-slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 最初はすべて非表示 */
    
    /* ▼ 12秒かけて無限にアニメーションを繰り返す ▼ */
    animation: cs-fade-anime 12s infinite;
}

.cs-fade-slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠線に合わせて画像を綺麗にトリミング */
    display: block;
}

/* =========================================
   3. アニメーションのディレイ（時間差）設定
========================================= */
/* 全体12秒 ÷ 3枚 ＝ 1枚あたり4秒ずつズラす */
.cs-fade-slide-item:nth-child(1) {
    animation-delay: 0s;
}
.cs-fade-slide-item:nth-child(2) {
    animation-delay: 4s;
}
.cs-fade-slide-item:nth-child(3) {
    animation-delay: 8s;
}

/* =========================================
   4. フェードアニメーションの定義（3枚用）
========================================= */
@keyframes cs-fade-anime {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }
    8% {
        opacity: 1; /* フワッと表示される（約1秒） */
        animation-timing-function: ease-out;
    }
    33% {
        opacity: 1; /* 表示を維持（約3秒） */
    }
    41% {
        opacity: 0; /* フワッと消える（約1秒） */
    }
    100% {
        opacity: 0;
    }
}

ラジオボタン式・手動スライド（手動・ボタン付き）

JavaScriptを使わずに「次へ / 前へ」の矢印ボタンや下部のドット（インジケーター）をクリックして手動で画像を切り替える、CSSハックの代表格とも言えるテクニックです。

仕組みとしては、非表示にした<input type="radio">の:checked（チェック状態）と間接セレクタ（~）を組み合わせることで、CSSのみで状態管理とアニメーションを実現しています。

スライド1
スライド2
スライド3
HTMLコード表示
<div class="cs-manual-slider">
    <input type="radio" name="cs-slide-radio" id="cs-slide-1" checked="">
    <input type="radio" name="cs-slide-radio" id="cs-slide-2">
    <input type="radio" name="cs-slide-radio" id="cs-slide-3">

    <div class="cs-slider-viewport">
        <div class="cs-slider-track">
            <div class="cs-slide-item">
                <img src="https://placehold.jp/24/2589d0/ffffff/800x450.png?text=Slide+01" alt="スライド1">
            </div>
            <div class="cs-slide-item">
                <img src="https://placehold.jp/24/48bb78/ffffff/800x450.png?text=Slide+02" alt="スライド2">
            </div>
            <div class="cs-slide-item">
                <img src="https://placehold.jp/24/ed8936/ffffff/800x450.png?text=Slide+03" alt="スライド3">
            </div>
        </div>
    </div>

    <div class="cs-arrow-nav">
        <label for="cs-slide-3" class="cs-arrow cs-arrow-prev cs-nav-1">❮</label>
        <label for="cs-slide-2" class="cs-arrow cs-arrow-next cs-nav-1">❯</label>

        <label for="cs-slide-1" class="cs-arrow cs-arrow-prev cs-nav-2">❮</label>
        <label for="cs-slide-3" class="cs-arrow cs-arrow-next cs-nav-2">❯</label>

        <label for="cs-slide-2" class="cs-arrow cs-arrow-prev cs-nav-3">❮</label>
        <label for="cs-slide-1" class="cs-arrow cs-arrow-next cs-nav-3">❯</label>
    </div>

    <div class="cs-dot-nav">
        <label for="cs-slide-1" class="cs-dot"></label>
        <label for="cs-slide-2" class="cs-dot"></label>
        <label for="cs-slide-3" class="cs-dot"></label>
    </div>
</div>
CSSコード表示
/* =========================================
   1. スライダー全体のコンテナ
========================================= */
.cs-manual-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ラジオボタンは画面から隠す */
.cs-manual-slider input[type="radio"] {
    display: none;
}

/* =========================================
   2. スライド本体（横並びと移動の設定）
========================================= */
.cs-slider-viewport {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.cs-slider-track {
    display: flex;
    width: 300%; /* スライド3枚分（100% × 3） */
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-slide-item {
    width: 33.3333%; /* 300%のうちの3分の1 */
    height: 100%;
}

.cs-slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   3. ラジオボタンの状態に応じたスライドの移動
========================================= */
#cs-slide-1:checked ~ .cs-slider-viewport .cs-slider-track {
    transform: translateX(0%);
}
#cs-slide-2:checked ~ .cs-slider-viewport .cs-slider-track {
    transform: translateX(-33.3333%);
}
#cs-slide-3:checked ~ .cs-slider-viewport .cs-slider-track {
    transform: translateX(-66.6666%);
}

/* =========================================
   4. 左右の矢印ナビゲーション
========================================= */
.cs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.7);
    color: #1a202c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s, opacity 0.3s;
    /* デフォルトはすべて非表示 */
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.cs-arrow:hover {
    background-color: rgba(255, 255, 255, 1);
}

.cs-arrow-prev { left: 16px; }
.cs-arrow-next { right: 16px; }

/* ラジオボタンの状態に応じて、対応する矢印だけを表示する */
#cs-slide-1:checked ~ .cs-arrow-nav .cs-nav-1,
#cs-slide-2:checked ~ .cs-arrow-nav .cs-nav-2,
#cs-slide-3:checked ~ .cs-arrow-nav .cs-nav-3 {
    opacity: 1;
    pointer-events: auto; /* クリックを有効化 */
}

/* =========================================
   5. 下部のドットナビゲーション
========================================= */
.cs-dot-nav {
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    z-index: 10;
}

.cs-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.cs-dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

/* ラジオボタンの状態に応じて、対応するドットの色を変える */
#cs-slide-1:checked ~ .cs-dot-nav .cs-dot:nth-child(1),
#cs-slide-2:checked ~ .cs-dot-nav .cs-dot:nth-child(2),
#cs-slide-3:checked ~ .cs-dot-nav .cs-dot:nth-child(3) {
    background-color: #ffffff;
    transform: scale(1.2); /* アクティブなドットを少し大きくする */
}

スワイプ対応・スクロールスナップ（バー付き）

スマホ時代において最も直感的でユーザーに好まれる「スワイプ操作」に特化したスライダーです。

CSSのscroll-snapプロパティを使用することで、JavaScriptを一切使わずに「指を離した時に画像が中央にピタッと吸着する」ネイティブアプリのような心地よい挙動を実現します。

スライド1
直感的なスワイプ操作
スライド2
ピタッと止まるスクロールスナップ
スライド3
CSSのみで実装するプログレスバー
スライド4
スマホ表示に最適なUI設計
HTMLコード表示
<div class="cs-swipe-slider-wrapper">
    <div class="cs-swipe-track">
        
        <div class="cs-swipe-item">
            <div class="cs-swipe-thumb">
                <img src="https://placehold.jp/24/2589d0/ffffff/800x450.png?text=Swipe+01" alt="スライド1">
            </div>
            <div class="cs-swipe-caption">直感的なスワイプ操作</div>
        </div>

        <div class="cs-swipe-item">
            <div class="cs-swipe-thumb">
                <img src="https://placehold.jp/24/48bb78/ffffff/800x450.png?text=Swipe+02" alt="スライド2">
            </div>
            <div class="cs-swipe-caption">ピタッと止まるスクロールスナップ</div>
        </div>

        <div class="cs-swipe-item">
            <div class="cs-swipe-thumb">
                <img src="https://placehold.jp/24/ed8936/ffffff/800x450.png?text=Swipe+03" alt="スライド3">
            </div>
            <div class="cs-swipe-caption">CSSのみで実装するプログレスバー</div>
        </div>

        <div class="cs-swipe-item">
            <div class="cs-swipe-thumb">
                <img src="https://placehold.jp/24/9f7aea/ffffff/800x450.png?text=Swipe+04" alt="スライド4">
            </div>
            <div class="cs-swipe-caption">スマホ表示に最適なUI設計</div>
        </div>

    </div>
</div>
CSSコード表示
/* =========================================
   1. スライダー全体のラッパー
========================================= */
.cs-swipe-slider-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

/* =========================================
   2. スクロールトラック（横並びとスナップ設定）
========================================= */
.cs-swipe-track {
    display: flex;
    gap: 16px;
    /* 横スクロールを許可 */
    overflow-x: auto;
    
    /* ▼ スクロールスナップの魔法 ▼ */
    scroll-snap-type: x mandatory;
    
    /* スワイプ時の「戻る」誤動作（ブラウザバック）を防止 */
    overscroll-behavior-x: contain;
    
    /* 下部のバー（スクロールバー）を表示するための余白 */
    padding-bottom: 20px;
}

/* =========================================
   3. 各スライドの設定
========================================= */
.cs-swipe-item {
    /* ▼ 次のスライドをチラ見せしてスワイプを促す（85%幅） ▼ */
    flex: 0 0 85%;
    
    /* 常にスライドを中央に吸着させる */
    scroll-snap-align: center;
    
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

/* PCなど大画面ではチラ見せ幅を調整 */
@media screen and (min-width: 640px) {
    .cs-swipe-item {
        flex: 0 0 70%;
    }
}

.cs-swipe-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.cs-swipe-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-swipe-caption {
    padding: 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a202c;
    text-align: center;
}

/* =========================================
   4. スクロールバーを「進行度バー」としてデザイン
========================================= */
/* バー全体の太さ */
.cs-swipe-track::-webkit-scrollbar {
    height: 6px;
}

/* バーの背景色（トラック） */
.cs-swipe-track::-webkit-scrollbar-track {
    background-color: #e2e8f0;
    border-radius: 10px;
    margin: 0 20px; /* バーの左右に少し余白を持たせる */
}

/* 動くバーの部分（サム） */
.cs-swipe-track::-webkit-scrollbar-thumb {
    background-color: #2589d0;
    border-radius: 10px;
    transition: background-color 0.3s;
}

/* バーにホバーした時の色 */
.cs-swipe-track::-webkit-scrollbar-thumb:hover {
    background-color: #1a6da7;
}

カルーセル＆無限ループ（自動）

LP（ランディングページ）の企業ロゴ一覧やアイキャッチ画像の無限ループなどで需要がある「途切れない」スライダーです。

ここでは、以下のカルーセル＆無限ループ（自動）のデザイン例を記載しています。

カルーセル＆無限ループ（自動）
  • プレーンな無限ループスライダー（1枚ずつ流れる）
  • 複数枚カルーセル・無限ループ（カード型）

実際のデザインプレビューとHTML＆CSSコードを記載しています。

プレーンな無限ループスライダー（1枚ずつ流れる）

企業サイトの導入事例（ロゴ一覧）やメディアサイトのアイキャッチ画像一覧などで爆発的に需要のある「途切れることなく一定の速度で横に流れ続ける」ティッカー型のスライダーです。

画像1
画像2
画像3
画像4
画像1
画像2
画像3
画像4
HTMLコード表示
<div class="cs-loop-slider-wrapper">
    <div class="cs-loop-slider-track">
        
        <div class="cs-loop-slide"><img src="https://placehold.jp/24/2589d0/ffffff/400x300.png?text=IMG+01" alt="画像1"></div>
        <div class="cs-loop-slide"><img src="https://placehold.jp/24/48bb78/ffffff/400x300.png?text=IMG+02" alt="画像2"></div>
        <div class="cs-loop-slide"><img src="https://placehold.jp/24/ed8936/ffffff/400x300.png?text=IMG+03" alt="画像3"></div>
        <div class="cs-loop-slide"><img src="https://placehold.jp/24/9f7aea/ffffff/400x300.png?text=IMG+04" alt="画像4"></div>

        <div class="cs-loop-slide"><img src="https://placehold.jp/24/2589d0/ffffff/400x300.png?text=IMG+01" alt="画像1"></div>
        <div class="cs-loop-slide"><img src="https://placehold.jp/24/48bb78/ffffff/400x300.png?text=IMG+02" alt="画像2"></div>
        <div class="cs-loop-slide"><img src="https://placehold.jp/24/ed8936/ffffff/400x300.png?text=IMG+03" alt="画像3"></div>
        <div class="cs-loop-slide"><img src="https://placehold.jp/24/9f7aea/ffffff/400x300.png?text=IMG+04" alt="画像4"></div>
        
    </div>
</div>
CSSコード表示
/* =========================================
   1. スライダー全体のラッパー
========================================= */
.cs-loop-slider-wrapper {
    width: 100%;
    overflow: hidden; /* はみ出した部分を隠す */
    background-color: #f8fafc;
    padding: 32px 0;
    margin-bottom: 2em;
}

/* =========================================
   2. 動くトラック本体（Flexboxとアニメーション）
========================================= */
.cs-loop-slider-track {
    display: flex;
    gap: 24px; /* スライド間の隙間 */
    width: max-content; /* 中身の幅に合わせて伸縮させる */
    
    /* ▼ 20秒かけて一定の速度（linear）で無限に動かす ▼ */
    animation: cs-loop-scroll 20s linear infinite;
}

/* ▼ 読者への配慮（ホバー時に一時停止する機能） ▼ */
.cs-loop-slider-track:hover {
    animation-play-state: paused;
}

/* =========================================
   3. 各スライドのサイズ設定
========================================= */
.cs-loop-slide {
    width: 240px; /* カードの幅を固定 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    background-color: #ffffff;
}

.cs-loop-slide img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* =========================================
   4. シームレスループのための移動計算
========================================= */
@keyframes cs-loop-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* ▼ ここが完全なループを作る計算式 ▼
           トラック全体の半分（-50%）に加えて、
           gap（24px）の半分（12px）を引くことでズレをなくす
        */
        transform: translateX(calc(-50% - 12px));
    }
}

複数枚カルーセル・無限ループ（カード型）

シンプルな画像ティッカーを応用し、ブログ記事やおすすめ商品などをリッチな「カードレイアウト」で無限に流し続ける実用的なパターンです。

LPの中段などで「お客様の声」や「提供サービス一覧」を横に流す際にもよく使われます。

サムネイル1
HTML/CSS
最新のCSS Grid活用法

メディアクエリを減らしてレスポンシブデザインを構築する画期的なテクニックをご紹介します。
サムネイル2
JavaScript
非同期処理の完全理解

つまずきやすいPromiseとasync/awaitの概念を、図解を用いてわかりやすく解説します。
サムネイル3
Design
UI/UX改善の5つの原則

ユーザーの離脱率を下げ、コンバージョンを劇的に向上させるための具体的なデザイン手法。
サムネイル4
SEO
検索順位を上げる基本設定

マークアップの最適化からCore Web Vitalsの改善まで、いますぐ取り組めるSEO施策。
サムネイル1
HTML/CSS
最新のCSS Grid活用法

メディアクエリを減らしてレスポンシブデザインを構築する画期的なテクニックをご紹介します。
サムネイル2
JavaScript
非同期処理の完全理解

つまずきやすいPromiseとasync/awaitの概念を、図解を用いてわかりやすく解説します。
サムネイル3
Design
UI/UX改善の5つの原則

ユーザーの離脱率を下げ、コンバージョンを劇的に向上させるための具体的なデザイン手法。
サムネイル4
SEO
検索順位を上げる基本設定

マークアップの最適化からCore Web Vitalsの改善まで、いますぐ取り組めるSEO施策。
HTMLコード表示
<div class="cs-card-loop-wrapper">
    <div class="cs-card-loop-track">
        
        <a href="#" class="cs-card-loop-item">
            <div class="cs-card-loop-thumb">
                <img src="https://placehold.jp/24/2589d0/ffffff/600x400.png?text=Article+01" alt="サムネイル1">
            </div>
            <div class="cs-card-loop-body">
                <span class="cs-card-loop-label">HTML/CSS</span>
                <div class="cs-card-loop-title">最新のCSS Grid活用法</div>
                <p class="cs-card-loop-text">メディアクエリを減らしてレスポンシブデザインを構築する画期的なテクニックをご紹介します。</p>
            </div>
        </a>

        <a href="#" class="cs-card-loop-item">
            <div class="cs-card-loop-thumb">
                <img src="https://placehold.jp/24/48bb78/ffffff/600x400.png?text=Article+02" alt="サムネイル2">
            </div>
            <div class="cs-card-loop-body">
                <span class="cs-card-loop-label cs-bg-green">JavaScript</span>
                <div class="cs-card-loop-title">非同期処理の完全理解</div>
                <p class="cs-card-loop-text">つまずきやすいPromiseとasync/awaitの概念を、図解を用いてわかりやすく解説します。</p>
            </div>
        </a>

        <a href="#" class="cs-card-loop-item">
            <div class="cs-card-loop-thumb">
                <img src="https://placehold.jp/24/ed8936/ffffff/600x400.png?text=Article+03" alt="サムネイル3">
            </div>
            <div class="cs-card-loop-body">
                <span class="cs-card-loop-label cs-bg-orange">Design</span>
                <div class="cs-card-loop-title">UI/UX改善の5つの原則</div>
                <p class="cs-card-loop-text">ユーザーの離脱率を下げ、コンバージョンを劇的に向上させるための具体的なデザイン手法。</p>
            </div>
        </a>

        <a href="#" class="cs-card-loop-item">
            <div class="cs-card-loop-thumb">
                <img src="https://placehold.jp/24/9f7aea/ffffff/600x400.png?text=Article+04" alt="サムネイル4">
            </div>
            <div class="cs-card-loop-body">
                <span class="cs-card-loop-label cs-bg-purple">SEO</span>
                <div class="cs-card-loop-title">検索順位を上げる基本設定</div>
                <p class="cs-card-loop-text">マークアップの最適化からCore Web Vitalsの改善まで、いますぐ取り組めるSEO施策。</p>
            </div>
        </a>

        <a href="#" class="cs-card-loop-item">
            <div class="cs-card-loop-thumb">
                <img src="https://placehold.jp/24/2589d0/ffffff/600x400.png?text=Article+01" alt="サムネイル1">
            </div>
            <div class="cs-card-loop-body">
                <span class="cs-card-loop-label">HTML/CSS</span>
                <div class="cs-card-loop-title">最新のCSS Grid活用法</div>
                <p class="cs-card-loop-text">メディアクエリを減らしてレスポンシブデザインを構築する画期的なテクニックをご紹介します。</p>
            </div>
        </a>

        <a href="#" class="cs-card-loop-item">
            <div class="cs-card-loop-thumb">
                <img src="https://placehold.jp/24/48bb78/ffffff/600x400.png?text=Article+02" alt="サムネイル2">
            </div>
            <div class="cs-card-loop-body">
                <span class="cs-card-loop-label cs-bg-green">JavaScript</span>
                <div class="cs-card-loop-title">非同期処理の完全理解</div>
                <p class="cs-card-loop-text">つまずきやすいPromiseとasync/awaitの概念を、図解を用いてわかりやすく解説します。</p>
            </div>
        </a>

        <a href="#" class="cs-card-loop-item">
            <div class="cs-card-loop-thumb">
                <img src="https://placehold.jp/24/ed8936/ffffff/600x400.png?text=Article+03" alt="サムネイル3">
            </div>
            <div class="cs-card-loop-body">
                <span class="cs-card-loop-label cs-bg-orange">Design</span>
                <div class="cs-card-loop-title">UI/UX改善の5つの原則</div>
                <p class="cs-card-loop-text">ユーザーの離脱率を下げ、コンバージョンを劇的に向上させるための具体的なデザイン手法。</p>
            </div>
        </a>

        <a href="#" class="cs-card-loop-item">
            <div class="cs-card-loop-thumb">
                <img src="https://placehold.jp/24/9f7aea/ffffff/600x400.png?text=Article+04" alt="サムネイル4">
            </div>
            <div class="cs-card-loop-body">
                <span class="cs-card-loop-label cs-bg-purple">SEO</span>
                <div class="cs-card-loop-title">検索順位を上げる基本設定</div>
                <p class="cs-card-loop-text">マークアップの最適化からCore Web Vitalsの改善まで、いますぐ取り組めるSEO施策。</p>
            </div>
        </a>
        
    </div>
</div>
CSSコード表示
/* =========================================
   1. カルーセル全体のラッパー
========================================= */
.cs-card-loop-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 24px 0; /* ホバー時の浮き上がりや影が切れないように上下に余白を確保 */
    margin-bottom: 2em;
    background-color: #f1f5f9;
}

/* =========================================
   2. 動くトラック本体（Flexboxとアニメーション）
========================================= */
.cs-card-loop-track {
    display: flex;
    gap: 32px; /* カード間の隙間 */
    width: max-content;
    
    /* 情報量が多いので、画像のみの時より少し遅め（35秒）に設定 */
    animation: cs-card-scroll 35s linear infinite;
}

/* ユーザーがカードを読んだりクリックしやすいよう、ホバーで停止 */
.cs-card-loop-track:hover {
    animation-play-state: paused;
}

/* =========================================
   3. カード本体のデザイン
========================================= */
.cs-card-loop-item {
    width: 300px; /* カード幅を固定（スマホ表示でも見やすいサイズ） */
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    text-decoration: none !important; /* リンクの下線を消す */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* マウスを乗せた時の浮き上がりエフェクト */
.cs-card-loop-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* =========================================
   4. カード内のパーツ装飾
========================================= */
.cs-card-loop-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.cs-card-loop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.cs-card-loop-item:hover .cs-card-loop-thumb img {
    transform: scale(1.05); /* ホバーで画像を少しズーム */
}

.cs-card-loop-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cs-card-loop-label {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    background-color: #2589d0;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}
/* ラベルのカラーバリエーション */
.cs-bg-green  { background-color: #48bb78; }
.cs-bg-orange { background-color: #ed8936; }
.cs-bg-purple { background-color: #9f7aea; }

.cs-card-loop-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.4;
    margin-bottom: 12px;
}

.cs-card-loop-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* =========================================
   5. シームレスループのための移動計算
========================================= */
@keyframes cs-card-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* トラック全体の半分(-50%) から gapの半分(32pxの半分の16px) を引く */
        transform: translateX(calc(-50% - 16px));
    }
}

UIリッチ・高機能スライダー（CSSのみ）

「本当にCSSだけでできるの？」と驚かれるような、高機能なナビゲーションを備えたスライダーです。

ここでは、以下のUIリッチ・高機能スライダー（CSSのみ）のデザイン例を記載しています。

UIリッチ・高機能スライダー（CSSのみ）
  • サムネイル付きスライダー（手動）
  • プログレスバー付き・自動スライドショー
  • フルセット・ナビゲーションスライダー（ボタン＆ドット）

実際のデザインプレビューとHTML＆CSSコードを記載しています。

サムネイル付きスライダー（手動）

ECサイトの商品画像ギャラリーやポートフォリオの作品紹介などでよく使われる「メイン画像＋下に小さなサムネイル群」というリッチなUIです。

メイン1
メイン2
メイン3
メイン4
HTMLコード表示
<div class="cs-thumb-wrapper">
    
    <input type="radio" name="cs-thumb-radio" id="cs-thumb-slide1" checked="">
    <input type="radio" name="cs-thumb-radio" id="cs-thumb-slide2">
    <input type="radio" name="cs-thumb-radio" id="cs-thumb-slide3">
    <input type="radio" name="cs-thumb-radio" id="cs-thumb-slide4">

    <div class="cs-thumb-main">
        <div class="cs-thumb-item cs-thumb-item-1">
            <img src="https://placehold.jp/24/2589d0/ffffff/800x450.png?text=Main+01" alt="メイン1">
        </div>
        <div class="cs-thumb-item cs-thumb-item-2">
            <img src="https://placehold.jp/24/48bb78/ffffff/800x450.png?text=Main+02" alt="メイン2">
        </div>
        <div class="cs-thumb-item cs-thumb-item-3">
            <img src="https://placehold.jp/24/ed8936/ffffff/800x450.png?text=Main+03" alt="メイン3">
        </div>
        <div class="cs-thumb-item cs-thumb-item-4">
            <img src="https://placehold.jp/24/9f7aea/ffffff/800x450.png?text=Main+04" alt="メイン4">
        </div>
    </div>

    <div class="cs-thumb-nav">
        <label for="cs-thumb-slide1" class="cs-thumb-label cs-thumb-label-1">
            <img src="https://placehold.jp/24/2589d0/ffffff/200x112.png?text=Thumb+01" alt="サムネイル1">
        </label>
        <label for="cs-thumb-slide2" class="cs-thumb-label cs-thumb-label-2">
            <img src="https://placehold.jp/24/48bb78/ffffff/200x112.png?text=Thumb+02" alt="サムネイル2">
        </label>
        <label for="cs-thumb-slide3" class="cs-thumb-label cs-thumb-label-3">
            <img src="https://placehold.jp/24/ed8936/ffffff/200x112.png?text=Thumb+03" alt="サムネイル3">
        </label>
        <label for="cs-thumb-slide4" class="cs-thumb-label cs-thumb-label-4">
            <img src="https://placehold.jp/24/9f7aea/ffffff/200x112.png?text=Thumb+04" alt="サムネイル4">
        </label>
    </div>

</div>
CSSコード表示
/* =========================================
   1. スライダー全体のラッパー
========================================= */
.cs-thumb-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

/* ラジオボタンは画面から隠す */
.cs-thumb-wrapper input[type="radio"] {
    display: none;
}

/* =========================================
   2. メイン画像エリア（クロスフェード設定）
========================================= */
.cs-thumb-main {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px; /* サムネイルとの余白 */
    background-color: #f8fafc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.cs-thumb-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* デフォルトは透明で非表示にしておく */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}

.cs-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   3. サムネイルのリスト設定（Grid配置）
========================================= */
.cs-thumb-nav {
    display: grid;
    /* サムネイルの数（4枚）に合わせて均等分割 */
    grid-template-columns: repeat(4, 1fr);
    gap: 12px; /* サムネイル間の隙間 */
}

.cs-thumb-label {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    /* 非選択時は少し暗くする */
    opacity: 0.4;
    transition: opacity 0.3s ease, outline 0.3s ease;
    /* 選択時の青い枠線をあらかじめ見えない形で設定 */
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.cs-thumb-label:hover {
    opacity: 0.8;
}

.cs-thumb-label img {
    width: 100%;
    aspect-ratio: 16 / 9; /* メインと同じ比率に */
    object-fit: cover;
    display: block;
}

/* =========================================
   4. ラジオボタンON時の状態変化
========================================= */
/* ▼ 選択されたラジオボタンに対応するメイン画像をフェードイン ▼ */
#cs-thumb-slide1:checked ~ .cs-thumb-main .cs-thumb-item-1,
#cs-thumb-slide2:checked ~ .cs-thumb-main .cs-thumb-item-2,
#cs-thumb-slide3:checked ~ .cs-thumb-main .cs-thumb-item-3,
#cs-thumb-slide4:checked ~ .cs-thumb-main .cs-thumb-item-4 {
    opacity: 1;
    visibility: visible;
    z-index: 2; /* 手前に持ってくる */
}

/* ▼ 選択されたラジオボタンに対応するサムネイルを明るくし、枠線をつける ▼ */
#cs-thumb-slide1:checked ~ .cs-thumb-nav .cs-thumb-label-1,
#cs-thumb-slide2:checked ~ .cs-thumb-nav .cs-thumb-label-2,
#cs-thumb-slide3:checked ~ .cs-thumb-nav .cs-thumb-label-3,
#cs-thumb-slide4:checked ~ .cs-thumb-nav .cs-thumb-label-4 {
    opacity: 1;
    outline: 3px solid #2589d0; /* アクセントカラーの枠線 */
}

プログレスバー付き・自動スライドショー

Instagramのストーリーズのように、画面上部にある「線（プログレスバー）」が時間の経過とともに伸びていき、満タンになると次の画像へフワッと切り替わる人気のUIです。

スライド1
プログレスバー連動UI
スライド2
Instagramライクな視覚効果
スライド3
すべてCSSアニメーションで制御
HTMLコード表示
<div class="cs-prog-wrapper">
    
    <div class="cs-prog-bars">
        <div class="cs-prog-bar-track">
            <div class="cs-prog-fill cs-prog-fill-1"></div>
        </div>
        <div class="cs-prog-bar-track">
            <div class="cs-prog-fill cs-prog-fill-2"></div>
        </div>
        <div class="cs-prog-bar-track">
            <div class="cs-prog-fill cs-prog-fill-3"></div>
        </div>
    </div>

    <div class="cs-prog-slides">
        <div class="cs-prog-slide cs-prog-slide-1">
            <img src="https://placehold.jp/24/2589d0/ffffff/800x450.png?text=Story+01" alt="スライド1">
            <div class="cs-prog-caption">プログレスバー連動UI</div>
        </div>
        <div class="cs-prog-slide cs-prog-slide-2">
            <img src="https://placehold.jp/24/48bb78/ffffff/800x450.png?text=Story+02" alt="スライド2">
            <div class="cs-prog-caption">Instagramライクな視覚効果</div>
        </div>
        <div class="cs-prog-slide cs-prog-slide-3">
            <img src="https://placehold.jp/24/ed8936/ffffff/800x450.png?text=Story+03" alt="スライド3">
            <div class="cs-prog-caption">すべてCSSアニメーションで制御</div>
        </div>
    </div>

</div>
CSSコード表示
/* =========================================
   1. スライダー全体のラッパー
========================================= */
.cs-prog-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    aspect-ratio: 16 / 9;
    background-color: #1a202c;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* =========================================
   2. プログレスバーのコンテナとトラック
========================================= */
.cs-prog-bars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    gap: 8px; /* バーとバーの隙間 */
    padding: 16px;
    z-index: 10; /* 画像より手前に表示 */
    box-sizing: border-box;
}

.cs-prog-bar-track {
    flex: 1; /* 3本のバーを均等な長さに割り当て */
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3); /* 未到達のバーの色 */
    border-radius: 2px;
    overflow: hidden;
}

/* =========================================
   3. バーが伸びるアニメーション（15秒ループ）
========================================= */
.cs-prog-fill {
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* 伸びるバーの色 */
    /* 左端を起点にして横方向(X軸)にスケールさせる */
    transform-origin: left;
    transform: scaleX(0); 
    /* 全体で15秒（1枚5秒）かけて一定の速度（linear）で無限ループ */
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.cs-prog-fill-1 { animation-name: progAnim1; }
.cs-prog-fill-2 { animation-name: progAnim2; }
.cs-prog-fill-3 { animation-name: progAnim3; }

/* ▼ 1本目のバー：0〜5秒で伸び、15秒まで維持 ▼ */
@keyframes progAnim1 {
    0% { transform: scaleX(0); }
    33.33%, 100% { transform: scaleX(1); }
}

/* ▼ 2本目のバー：5〜10秒で伸び、15秒まで維持 ▼ */
@keyframes progAnim2 {
    0%, 33.33% { transform: scaleX(0); }
    66.66%, 100% { transform: scaleX(1); }
}

/* ▼ 3本目のバー：10〜15秒で伸びる ▼ */
@keyframes progAnim3 {
    0%, 66.66% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

/* =========================================
   4. スライド画像とテキスト（クロスフェード）
========================================= */
.cs-prog-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.cs-prog-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.cs-prog-slide-1 { animation-name: progSlide1; }
.cs-prog-slide-2 { animation-name: progSlide2; }
.cs-prog-slide-3 { animation-name: progSlide3; }

.cs-prog-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* テキスト（キャプション）の装飾 */
.cs-prog-caption {
    position: absolute;
    bottom: 24px;
    left: 24px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* ▼ スライドのフェードイン・アウト設定（バーと連動） ▼ */
@keyframes progSlide1 {
    0%, 31.33% { opacity: 1; }
    35.33%, 96.66% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes progSlide2 {
    0%, 30% { opacity: 0; }
    33.33%, 64.66% { opacity: 1; }
    68.66%, 100% { opacity: 0; }
}

@keyframes progSlide3 {
    0%, 63.33% { opacity: 0; }
    66.66%, 98% { opacity: 1; }
    100% { opacity: 0; }
}

フルセット・ナビゲーションスライダー（ボタン＆ドット）

「次へ / 前へ」の矢印ボタンと現在の位置を示す下部のドットインジケーターの両方を備えた、実務でよく求められるUIです。

スライド1
スライド2
スライド3
HTMLコード表示
<div class="cs-full-wrapper">
    
    <input type="radio" name="cs-full-radio" id="cs-full-1" checked="">
    <input type="radio" name="cs-full-radio" id="cs-full-2">
    <input type="radio" name="cs-full-radio" id="cs-full-3">

    <div class="cs-full-viewport">
        <div class="cs-full-track">
            <div class="cs-full-item">
                <img src="https://placehold.jp/24/2589d0/ffffff/800x450.png?text=Slide+01" alt="スライド1">
            </div>
            <div class="cs-full-item">
                <img src="https://placehold.jp/24/48bb78/ffffff/800x450.png?text=Slide+02" alt="スライド2">
            </div>
            <div class="cs-full-item">
                <img src="https://placehold.jp/24/ed8936/ffffff/800x450.png?text=Slide+03" alt="スライド3">
            </div>
        </div>
    </div>

    <div class="cs-full-arrows">
        <label for="cs-full-3" class="cs-full-arrow cs-full-prev cs-full-nav-1">❮</label>
        <label for="cs-full-2" class="cs-full-arrow cs-full-next cs-full-nav-1">❯</label>

        <label for="cs-full-1" class="cs-full-arrow cs-full-prev cs-full-nav-2">❮</label>
        <label for="cs-full-3" class="cs-full-arrow cs-full-next cs-full-nav-2">❯</label>

        <label for="cs-full-2" class="cs-full-arrow cs-full-prev cs-full-nav-3">❮</label>
        <label for="cs-full-1" class="cs-full-arrow cs-full-next cs-full-nav-3">❯</label>
    </div>

    <div class="cs-full-dots">
        <label for="cs-full-1" class="cs-full-dot cs-full-dot-1"></label>
        <label for="cs-full-2" class="cs-full-dot cs-full-dot-2"></label>
        <label for="cs-full-3" class="cs-full-dot cs-full-dot-3"></label>
    </div>

</div>
CSSコード表示
/* =========================================
   1. スライダー全体のラッパーとラジオボタン
========================================= */
.cs-full-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.cs-full-wrapper input[type="radio"] {
    display: none; /* ラジオボタン本体は隠す */
}

/* =========================================
   2. スライド本体（横並びトラック）
========================================= */
.cs-full-viewport {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #f1f5f9;
}

.cs-full-track {
    display: flex;
    width: 300%; /* 3枚分 */
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-full-item {
    width: 33.3333%;
    height: 100%;
}

.cs-full-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   3. ラジオボタンの状態に応じたスライドの移動
========================================= */
#cs-full-1:checked ~ .cs-full-viewport .cs-full-track { transform: translateX(0%); }
#cs-full-2:checked ~ .cs-full-viewport .cs-full-track { transform: translateX(-33.3333%); }
#cs-full-3:checked ~ .cs-full-viewport .cs-full-track { transform: translateX(-66.6666%); }

/* =========================================
   4. 左右の矢印ナビゲーション
========================================= */
.cs-full-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #1a202c;
    border-radius: 50%;
    /* デフォルトは非表示にしておく */
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    z-index: 10;
}

.cs-full-arrow:hover {
    background-color: #ffffff;
    transform: translateY(-50%) scale(1.1); /* ホバーで少し大きく */
}

.cs-full-prev { left: 16px; }
.cs-full-next { right: 16px; }

/* ▼ 選択されているスライドに対応する矢印だけを表示する ▼ */
#cs-full-1:checked ~ .cs-full-arrows .cs-full-nav-1 { display: flex; }
#cs-full-2:checked ~ .cs-full-arrows .cs-full-nav-2 { display: flex; }
#cs-full-3:checked ~ .cs-full-arrows .cs-full-nav-3 { display: flex; }

/* =========================================
   5. 下部のドットナビゲーション
========================================= */
.cs-full-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    z-index: 10;
}

.cs-full-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.cs-full-dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

/* ▼ 選択されているスライドに対応するドットをハイライトする ▼ */
#cs-full-1:checked ~ .cs-full-dots .cs-full-dot-1,
#cs-full-2:checked ~ .cs-full-dots .cs-full-dot-2,
#cs-full-3:checked ~ .cs-full-dots .cs-full-dot-3 {
    background-color: #ffffff;
    transform: scale(1.3);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

特殊・トレンドエフェクト

他のサイトと差別化したい、ポートフォリオなどで目を惹きたい読者向けのトリッキーなデザインです。

ここでは、以下のUIリッチ・高機能スライダー（CSSのみ）のデザイン例を記載しています。

特殊・トレンドエフェクト
  • ホバー拡張型（アコーディオン・スライダー）
  • 3Dフリップ・スライドショー
  • テキスト＆画像 分割スライダー（スプリット）
  • フルスクリーン・パララックス（視差効果）スライダー

実際のデザインプレビューとHTML＆CSSコードを記載しています。

ホバー拡張型（アコーディオン・スライダー）

マウスカーソルを合わせると、その画像の領域がスッと滑らかに横に広がる、スタイリッシュで目を惹くレイアウトです。

ポートフォリオサイトの作品紹介やクリエイティブ企業のトップページなどでよく見られます。

デザイン
Web Design

ユーザーの心を動かす、直感的で美しいUIデザインを提供します。

コーディング
HTML / CSS

セマンティックでメンテナンス性の高い、モダンなコーディング設計。

システム開発
Development

TypeScriptを用いた、堅牢で拡張性の高いフロントエンド開発。

SEO対策
SEO Optimization

検索エンジンに最適化された構造化マークアップと高速化施策。

HTMLコード表示
<div class="cs-accordion-wrapper">
    
    <div class="cs-accordion-item">
        <img src="https://placehold.jp/24/2589d0/ffffff/800x600.png?text=Design" alt="デザイン">
        <div class="cs-accordion-content">
            <div class="cs-accordion-title">Web Design</div>
            <p class="cs-accordion-text">ユーザーの心を動かす、直感的で美しいUIデザインを提供します。</p>
        </div>
    </div>

    <div class="cs-accordion-item">
        <img src="https://placehold.jp/24/48bb78/ffffff/800x600.png?text=Coding" alt="コーディング">
        <div class="cs-accordion-content">
            <div class="cs-accordion-title">HTML / CSS</div>
            <p class="cs-accordion-text">セマンティックでメンテナンス性の高い、モダンなコーディング設計。</p>
        </div>
    </div>

    <div class="cs-accordion-item">
        <img src="https://placehold.jp/24/ed8936/ffffff/800x600.png?text=System" alt="システム開発">
        <div class="cs-accordion-content">
            <div class="cs-accordion-title">Development</div>
            <p class="cs-accordion-text">TypeScriptを用いた、堅牢で拡張性の高いフロントエンド開発。</p>
        </div>
    </div>

    <div class="cs-accordion-item">
        <img src="https://placehold.jp/24/9f7aea/ffffff/800x600.png?text=SEO" alt="SEO対策">
        <div class="cs-accordion-content">
            <div class="cs-accordion-title">SEO Optimization</div>
            <p class="cs-accordion-text">検索エンジンに最適化された構造化マークアップと高速化施策。</p>
        </div>
    </div>

</div>
CSSコード表示
/* =========================================
   1. アコーディオン全体を囲むコンテナ
========================================= */
.cs-accordion-wrapper {
    display: flex;
    width: 100%;
    max-width: 900px;
    height: 400px; /* 全体の高さを固定 */
    margin: 0 auto 2em;
    gap: 12px; /* パネル同士の隙間 */
}

/* =========================================
   2. 各パネル（伸縮するアイテム）の設定
========================================= */
.cs-accordion-item {
    position: relative;
    /* ▼ ここが魔法：基本の幅は均等（1）に設定 ▼ */
    flex: 1;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    /* flexプロパティの変化を滑らかにアニメーションさせる */
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ▼ ホバー時：幅を4倍（4）に拡張する ▼ */
.cs-accordion-item:hover {
    flex: 4;
}

/* =========================================
   3. 背景画像の設定
========================================= */
.cs-accordion-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 中央を基準にトリミング */
    object-position: center;
    transition: transform 0.6s ease;
}

/* ホバー時に画像を少しズームさせてダイナミックに */
.cs-accordion-item:hover img {
    transform: scale(1.05);
}

/* =========================================
   4. テキスト情報（ホバー時にフワッと表示）
========================================= */
.cs-accordion-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 32px 24px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: #ffffff;
    
    /* 初期状態は非表示（透明＋少し下に配置） */
    opacity: 0;
    transform: translateY(20px);
    /* パネルが開いた後、少し遅れてテキストが出るようにディレイ（0.2s）を設定 */
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

.cs-accordion-item:hover .cs-accordion-content {
    opacity: 1;
    transform: translateY(0);
}

.cs-accordion-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 8px;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.cs-accordion-text {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    /* はみ出したテキストは「...」で省略する */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* =========================================
   5. レスポンシブ対応（スマホ時は縦積みに変更）
========================================= */
@media screen and (max-width: 768px) {
    .cs-accordion-wrapper {
        /* スマホでは縦並びに変更 */
        flex-direction: column;
        height: 600px; 
    }
}

3Dフリップ・スライドショー

平面的なスライドではなく、画像が貼り付けられた「立体的な箱（キューブ）」が空間を回転しているように見せる、CSS 3Dエフェクトの集大成とも言えるレイアウトです。

前面
CSS 3D Transform
右面
Rotate Y 90deg
背面
Translate Z
左面
Pure CSS Animation
HTMLコード表示
<div class="cs-cube-wrapper">
    <div class="cs-cube-container">
        
        <div class="cs-cube">
            
            <div class="cs-cube-face cs-cube-front">
                <img src="https://placehold.jp/24/2589d0/ffffff/600x600.png?text=Front" alt="前面">
                <div class="cs-cube-caption">CSS 3D Transform</div>
            </div>
            
            <div class="cs-cube-face cs-cube-right">
                <img src="https://placehold.jp/24/48bb78/ffffff/600x600.png?text=Right" alt="右面">
                <div class="cs-cube-caption">Rotate Y 90deg</div>
            </div>
            
            <div class="cs-cube-face cs-cube-back">
                <img src="https://placehold.jp/24/ed8936/ffffff/600x600.png?text=Back" alt="背面">
                <div class="cs-cube-caption">Translate Z</div>
            </div>
            
            <div class="cs-cube-face cs-cube-left">
                <img src="https://placehold.jp/24/9f7aea/ffffff/600x600.png?text=Left" alt="左面">
                <div class="cs-cube-caption">Pure CSS Animation</div>
            </div>
            
        </div>
        
    </div>
</div>
CSSコード表示
/* =========================================
   1. 3D空間の定義（カメラの距離）
========================================= */
.cs-cube-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0;
    margin-bottom: 2em;
    /* ▼ 奥行きの強さを指定（数値が小さいほどパースが強く歪む） ▼ */
    perspective: 1000px; 
}

/* =========================================
   2. キューブのサイズと回転設定
========================================= */
.cs-cube-container {
    /* レスポンシブで崩れないよう、300pxの正方形で固定 */
    width: 300px;
    height: 300px;
}

.cs-cube {
    width: 100%;
    height: 100%;
    position: relative;
    
    /* ▼ 子要素の3D配置を維持する魔法のコード ▼ */
    transform-style: preserve-3d;
    
    /* 12秒かけて無限に回転させる */
    animation: cs-cube-spin 12s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

/* =========================================
   3. 各面（画像）の共通設定
========================================= */
.cs-cube-face {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.1) inset;
    background-color: #f1f5f9;
}

.cs-cube-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.9; /* 少し透けさせることで立体感を強調 */
}

/* 画像の上に重なるテキスト */
.cs-cube-caption {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* =========================================
   4. 各面の3D配置（Z軸とY軸の調整）
========================================= */
/* ※ 300pxの正方形なので、中心から各面までの距離は「半分の150px」になります。
   この 150px を translateZ で手前（または奥）に押し出します。
*/
.cs-cube-front {
    transform: rotateY(0deg) translateZ(150px);
}
.cs-cube-right {
    transform: rotateY(90deg) translateZ(150px);
}
.cs-cube-back {
    transform: rotateY(180deg) translateZ(150px);
}
.cs-cube-left {
    transform: rotateY(-90deg) translateZ(150px);
}

/* =========================================
   5. 回転アニメーションの定義
========================================= */
/* 90度ずつ回転させ、各面で少し停止するようにパーセンテージを調整 */
@keyframes cs-cube-spin {
    0%, 15% { transform: rotateY(0deg); }
    25%, 40% { transform: rotateY(-90deg); }
    50%, 65% { transform: rotateY(-180deg); }
    75%, 90% { transform: rotateY(-270deg); }
    100% { transform: rotateY(-360deg); }
}

テキスト＆画像 分割スライダー（スプリット）

画面の左半分（テキスト）と右半分（画像）が、それぞれ逆方向（上下）にスライドして切り替わる、エディトリアル（雑誌）デザインを取り入れたモダンなレイアウトです。

01 / Concept
非対称な
スライド表現

左のテキストは下から上へ、右の画像は上から下へ。逆方向に交差する動きが、ユーザーの視覚を強く刺激します。

02 / Technology
CSSのみで
完全制御

重たいJSライブラリは不要です。ラジオボタンの状態に応じて、各要素のY軸座標を計算し尽くしたスマートな設計です。

03 / Layout
マガジン風
UIデザイン

画面を大胆に2分割するスプリットレイアウトは、ブランドの世界観を伝えるランディングページに最適です。

ビジュアル1
ビジュアル2
ビジュアル3
HTMLコード表示
<div class="cs-split-slider-wrapper">
    
    <input type="radio" name="cs-split-radio" id="cs-split-1" checked="">
    <input type="radio" name="cs-split-radio" id="cs-split-2">
    <input type="radio" name="cs-split-radio" id="cs-split-3">

    <div class="cs-split-left">
        <div class="cs-split-text cs-split-text-1">
            <div class="cs-split-label">01 / Concept</div>
            <div class="cs-split-title">非対称な<br>スライド表現</div>
            <p class="cs-split-desc">左のテキストは下から上へ、右の画像は上から下へ。逆方向に交差する動きが、ユーザーの視覚を強く刺激します。</p>
        </div>
        <div class="cs-split-text cs-split-text-2">
            <div class="cs-split-label">02 / Technology</div>
            <div class="cs-split-title">CSSのみで<br>完全制御</div>
            <p class="cs-split-desc">重たいJSライブラリは不要です。ラジオボタンの状態に応じて、各要素のY軸座標を計算し尽くしたスマートな設計です。</p>
        </div>
        <div class="cs-split-text cs-split-text-3">
            <div class="cs-split-label">03 / Layout</div>
            <div class="cs-split-title">マガジン風<br>UIデザイン</div>
            <p class="cs-split-desc">画面を大胆に2分割するスプリットレイアウトは、ブランドの世界観を伝えるランディングページに最適です。</p>
        </div>
    </div>

    <div class="cs-split-right">
        <div class="cs-split-img cs-split-img-1">
            <img src="https://placehold.jp/24/2589d0/ffffff/600x800.png?text=Visual+01" alt="ビジュアル1">
        </div>
        <div class="cs-split-img cs-split-img-2">
            <img src="https://placehold.jp/24/48bb78/ffffff/600x800.png?text=Visual+02" alt="ビジュアル2">
        </div>
        <div class="cs-split-img cs-split-img-3">
            <img src="https://placehold.jp/24/ed8936/ffffff/600x800.png?text=Visual+03" alt="ビジュアル3">
        </div>
    </div>

    <div class="cs-split-nav">
        <label for="cs-split-1" class="cs-split-dot cs-split-dot-1"></label>
        <label for="cs-split-2" class="cs-split-dot cs-split-dot-2"></label>
        <label for="cs-split-3" class="cs-split-dot cs-split-dot-3"></label>
    </div>

</div>
CSSコード表示
/* =========================================
   1. スライダー全体のラッパー
========================================= */
.cs-split-slider-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 900px;
    height: 500px; /* 全体の高さを固定 */
    margin: 0 auto 2em;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    background-color: #1a202c; /* テキスト側の背景色 */
}

/* ラジオボタンは隠す */
.cs-split-slider-wrapper input[type="radio"] {
    display: none;
}

/* =========================================
   2. 左右のコンテナ設定（50:50分割）
========================================= */
.cs-split-left,
.cs-split-right {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

/* =========================================
   3. 各アイテムの共通設定（絶対配置とアニメーション）
========================================= */
.cs-split-text,
.cs-split-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* なめらかにスライドするイージング設定 */
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}

/* テキストエリアの装飾 */
.cs-split-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    box-sizing: border-box;
    color: #ffffff;
}

/* 画像エリアの装飾 */
.cs-split-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   4. 文字装飾
========================================= */
.cs-split-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #63b3ed;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}
.cs-split-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
}
.cs-split-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin: 0;
}

/* =========================================
   5. スライドの座標制御（ここが魔法のコード）
========================================= */
/* ▼ 初期配置 ▼
   テキストは「画面の下(100%)」に待機
   画像は「画面の上(-100%)」に待機
*/
.cs-split-text { transform: translateY(100%); }
.cs-split-img  { transform: translateY(-100%); }


/* ━━ 状態1: スライド1が選択された時 ━━ */
#cs-split-1:checked ~ .cs-split-left .cs-split-text-1 { transform: translateY(0); }
#cs-split-1:checked ~ .cs-split-left .cs-split-text-2 { transform: translateY(100%); }
#cs-split-1:checked ~ .cs-split-left .cs-split-text-3 { transform: translateY(100%); }

#cs-split-1:checked ~ .cs-split-right .cs-split-img-1 { transform: translateY(0); }
#cs-split-1:checked ~ .cs-split-right .cs-split-img-2 { transform: translateY(-100%); }
#cs-split-1:checked ~ .cs-split-right .cs-split-img-3 { transform: translateY(-100%); }


/* ━━ 状態2: スライド2が選択された時 ━━ */
#cs-split-2:checked ~ .cs-split-left .cs-split-text-1 { transform: translateY(-100%); } /* 上に逃げる */
#cs-split-2:checked ~ .cs-split-left .cs-split-text-2 { transform: translateY(0); }
#cs-split-2:checked ~ .cs-split-left .cs-split-text-3 { transform: translateY(100%); }

#cs-split-2:checked ~ .cs-split-right .cs-split-img-1 { transform: translateY(100%); } /* 下に逃げる */
#cs-split-2:checked ~ .cs-split-right .cs-split-img-2 { transform: translateY(0); }
#cs-split-2:checked ~ .cs-split-right .cs-split-img-3 { transform: translateY(-100%); }


/* ━━ 状態3: スライド3が選択された時 ━━ */
#cs-split-3:checked ~ .cs-split-left .cs-split-text-1 { transform: translateY(-100%); }
#cs-split-3:checked ~ .cs-split-left .cs-split-text-2 { transform: translateY(-100%); }
#cs-split-3:checked ~ .cs-split-left .cs-split-text-3 { transform: translateY(0); }

#cs-split-3:checked ~ .cs-split-right .cs-split-img-1 { transform: translateY(100%); }
#cs-split-3:checked ~ .cs-split-right .cs-split-img-2 { transform: translateY(100%); }
#cs-split-3:checked ~ .cs-split-right .cs-split-img-3 { transform: translateY(0); }


/* =========================================
   6. センターナビゲーション（ドット）
========================================= */
.cs-split-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 10;
    background-color: rgba(0,0,0,0.2);
    padding: 16px 8px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.cs-split-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s;
}

/* 選択されたドットのハイライト */
#cs-split-1:checked ~ .cs-split-nav .cs-split-dot-1,
#cs-split-2:checked ~ .cs-split-nav .cs-split-dot-2,
#cs-split-3:checked ~ .cs-split-nav .cs-split-dot-3 {
    background-color: #ffffff;
    transform: scale(1.5);
}

/* =========================================
   7. レスポンシブ対応（スマホ表示時は縦割りに変更）
========================================= */
@media screen and (max-width: 640px) {
    .cs-split-slider-wrapper {
        flex-direction: column-reverse; /* 画像を上、テキストを下にする */
        height: 600px;
    }
    .cs-split-left,
    .cs-split-right {
        width: 100%;
        height: 50%;
    }
    .cs-split-text {
        padding: 32px 24px;
    }
    .cs-split-title {
        font-size: 1.5rem;
    }
    /* ドットナビを右端の中央に移動 */
    .cs-split-nav {
        left: auto;
        right: 16px;
    }
}

フルスクリーン・パララックス（視差効果）スライダー

背景画像と手前のテキストで「移動する距離」と「アニメーションの速度（時間）」をあえてズラすことで、空間に奥行きが生まれ、リッチでダイナミックな視差効果（パララックス）を生み出します。

背景1
Parallax Effect

背景とテキストの移動速度をズラすことで、
CSSのみで美しい奥行き（視差）を表現します。

背景2
Pure CSS Magic

JavaScriptの複雑なスクロール計算は不要。
軽量かつパフォーマンスに優れた設計です。

背景3
Immersive UX

フルスクリーンのダイナミックな動きで、
訪問者をブランドの世界観へ没入させます。

HTMLコード表示
<div class="cs-para-wrapper">
    
    <input type="radio" name="cs-para-radio" id="cs-para-1" checked="">
    <input type="radio" name="cs-para-radio" id="cs-para-2">
    <input type="radio" name="cs-para-radio" id="cs-para-3">

    <div class="cs-para-slides">
        
        <div class="cs-para-slide cs-para-slide-1">
            <div class="cs-para-bg">
                <img src="https://placehold.jp/24/2589d0/ffffff/1200x800.png?text=Parallax+BG+01" alt="背景1">
            </div>
            <div class="cs-para-content">
                <div class="cs-para-title">Parallax Effect</div>
                <p class="cs-para-text">背景とテキストの移動速度をズラすことで、<br>CSSのみで美しい奥行き（視差）を表現します。</p>
            </div>
        </div>

        <div class="cs-para-slide cs-para-slide-2">
            <div class="cs-para-bg">
                <img src="https://placehold.jp/24/48bb78/ffffff/1200x800.png?text=Parallax+BG+02" alt="背景2">
            </div>
            <div class="cs-para-content">
                <div class="cs-para-title">Pure CSS Magic</div>
                <p class="cs-para-text">JavaScriptの複雑なスクロール計算は不要。<br>軽量かつパフォーマンスに優れた設計です。</p>
            </div>
        </div>

        <div class="cs-para-slide cs-para-slide-3">
            <div class="cs-para-bg">
                <img src="https://placehold.jp/24/ed8936/ffffff/1200x800.png?text=Parallax+BG+03" alt="背景3">
            </div>
            <div class="cs-para-content">
                <div class="cs-para-title">Immersive UX</div>
                <p class="cs-para-text">フルスクリーンのダイナミックな動きで、<br>訪問者をブランドの世界観へ没入させます。</p>
            </div>
        </div>

    </div>

    <div class="cs-para-nav">
        <label for="cs-para-1" class="cs-para-dot cs-para-dot-1"></label>
        <label for="cs-para-2" class="cs-para-dot cs-para-dot-2"></label>
        <label for="cs-para-3" class="cs-para-dot cs-para-dot-3"></label>
    </div>

</div>
CSSコード表示
/* =========================================
   1. スライダー全体のラッパー
========================================= */
.cs-para-wrapper {
    position: relative;
    width: 100%;
    /* ブログ記事内で見やすいように高さを指定（実務のLPなら 100vh を指定） */
    height: 600px; 
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    margin-bottom: 2em;
    background-color: #000000;
}

.cs-para-wrapper input[type="radio"] {
    display: none;
}

/* =========================================
   2. スライドの基本設定（フェード）
========================================= */
.cs-para-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.cs-para-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 初期状態は非表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s;
}

/* =========================================
   3. 背景レイヤー（遅く、少しだけ動く）
========================================= */
.cs-para-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 待機状態：少し拡大し、右にズラしておく */
    transform: scale(1.1) translateX(5%);
    /* 背景は 1.2秒 かけてゆっくり動かす */
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.cs-para-bg::after {
    /* テキストを読みやすくするためのダークオーバーレイ */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.cs-para-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   4. テキストレイヤー（速く、大きく動く）
========================================= */
.cs-para-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    color: #ffffff;
    padding: 24px;
    
    /* 待機状態：右に大きくズラしておく */
    transform: translateX(10%);
    /* テキストは 0.8秒 でスッと定位置に動かす */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.cs-para-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
    text-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.cs-para-text {
    font-size: 1.1rem;
    line-height: 1.8;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    margin: 0;
}

/* =========================================
   5. アクティブ時のパララックス発動
========================================= */
#cs-para-1:checked ~ .cs-para-slides .cs-para-slide-1,
#cs-para-2:checked ~ .cs-para-slides .cs-para-slide-2,
#cs-para-3:checked ~ .cs-para-slides .cs-para-slide-3 {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* 背景はスケールとX軸を元に戻す（1.2秒） */
#cs-para-1:checked ~ .cs-para-slides .cs-para-slide-1 .cs-para-bg,
#cs-para-2:checked ~ .cs-para-slides .cs-para-slide-2 .cs-para-bg,
#cs-para-3:checked ~ .cs-para-slides .cs-para-slide-3 .cs-para-bg {
    transform: scale(1) translateX(0);
}

/* テキストはX軸を元に戻す（0.8秒） */
#cs-para-1:checked ~ .cs-para-slides .cs-para-slide-1 .cs-para-content,
#cs-para-2:checked ~ .cs-para-slides .cs-para-slide-2 .cs-para-content,
#cs-para-3:checked ~ .cs-para-slides .cs-para-slide-3 .cs-para-content {
    transform: translateX(0);
}

/* =========================================
   6. ナビゲーションドット
========================================= */
.cs-para-nav {
    position: absolute;
    bottom: 32px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
    z-index: 10;
}

.cs-para-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

#cs-para-1:checked ~ .cs-para-nav .cs-para-dot-1,
#cs-para-2:checked ~ .cs-para-nav .cs-para-dot-2,
#cs-para-3:checked ~ .cs-para-nav .cs-para-dot-3 {
    background-color: #ffffff;
    transform: scale(1.3);
}

/* =========================================
   7. レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-para-wrapper {
        height: 500px;
    }
    .cs-para-title {
        font-size: 1.8rem;
    }
    .cs-para-text {
        font-size: 0.95rem;
    }
}

まとめ

ここでは全体のまとめを記載しておきます。

本記事のまとめ
  • 自動フェード・スライドショー
    @keyframesとopacityを使用した自動ループ。
    aspect-ratioでレスポンシブ対応。
  • ラジオボタン式・手動スライド
    非表示の<input type="radio">と:checked擬似クラスを利用し、矢印やドットで切り替え。
  • スワイプ対応・スクロールスナップ
    scroll-snapによるネイティブなスワイプ操作。
    スクロールバーのデザインをカスタマイズ。
  • プレーンな無限ループスライダー
    要素を2セット配置し、translateXとcalc()で計算した距離を移動させ続けるティッカー型。
  • 複数枚カルーセル・無限ループ（カード型）
    記事や商品などの情報をまとめたカードを無限に横流しする実用レイアウト。
  • サムネイル付きスライダー
    下部に並べたサムネイルをクリックしてメイン画像を切り替える、ラジオボタンハックの応用。
  • プログレスバー付き・自動スライドショー
    transform: scaleXで伸びるバーのアニメーションと画像の切り替えを同期。
  • フルセット・ナビゲーション
    矢印ボタンとドットインジケーターの両方を配置し、CSSのみで状態を完全連動。
  • ホバー拡張型（アコーディオン）
    flexプロパティの比率変化（flex: 1からflex: 4）を利用し、ホバーした領域を広げるUI。
  • 3Dフリップ・スライドショー
    preserve-3dとtranslateZ等を活用し、立体的なキューブが回転する視覚効果。
  • 分割スライダー（スプリット）
    画面を左右に分割し、テキストと画像がY軸の逆方向（上下）にスライド交差するレイアウト。
  • フルスクリーン・パララックス
    背景画像とテキストに対して、移動距離とアニメーション速度（秒数）のズレを意図的に作り出し、奥行きを表現。

よくある質問（FAQ）

CSSだけでスライダーを作るメリットとデメリットは何ですか？

最大のメリットは「表示速度（パフォーマンス）」、デメリットは「複雑な条件分岐ができないこと」です。

具体的なメリットとしては、jQueryやSwiper.jsなどの重いJavaScriptライブラリを読み込む必要がないため、ページの表示速度が向上します。

Core Web Vitals（GoogleのSEO指標）の改善にも直結し、動作も非常に滑らかです。

一方で、デメリットは「自動再生させつつ、ユーザーがボタンを押した時だけ手動操作に切り替え、タイマーをリセットする」といった、ユーザーの行動に応じた複雑なロジックを組むことができません。

多機能さを求める場合はJSが必要になります。

スライド画像のサイズや縦横比がバラバラなのですが、きれいに揃える方法はありますか？

CSSのobject-fit: cover;を使用するのが最も簡単で確実な解決策です。

画像を囲む親要素に固定の比率を持たせた上で、画像（<img>）に対して以下のように指定します。

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

これを指定するだけで、画像が歪んだり潰れたりすることなく、親要素の枠に合わせて中央基準で自動的に美しくトリミングされます。

スマホ表示（レスポンシブ）で画像が崩れないようにするにはどうすればいいですか？

現代のCSSでは aspect-ratio（アスペクト比）プロパティを使うのが主流です。

かつてはpadding-topをパーセンテージで指定するハックが使われていましたが、現在は親要素にaspect-ratio: 16/9;やaspect-ratio: 4/3;と記述し、幅を width: 100%; にするだけで、画面幅が縮んでも指定した縦横比を保ったまま自動で綺麗にリサイズされます。

CSSスライダーで、スワイプ操作（指で弾く動き）に対応させることはできますか？

はい、scroll-snapプロパティを使うことでネイティブなスワイプ操作を実装できます。

スライドを横並び（overflow-x: auto;）にした上で、親要素にscroll-snap-type: x mandatory;、各スライドにscroll-snap-align: center;を指定します。

これだけで、スマホアプリのように指を離した瞬間に画像が中央へピタッと吸着する、心地よいスライダーがCSSのみで完成します。

CSSだけで「自動再生」と「ボタンによる手動切り替え」を両立できますか？

結論から言うと、CSSだけでの完全な両立は困難です。

CSSの@keyframesを使えば「自動再生」は可能ですし、非表示のラジオボタン（<input type="radio">）を使えば「手動切り替え」も可能です。

しかし、「普段は自動で動いているが、ボタンを押したら手動に切り替わる」という複合的な動作は、CSSだけでは制御しきれません。

両立させたい場合は、Swiper.jsなどのJavaScriptライブラリの導入を推奨します。

あなたの「コーディング力」が最強の武器になる 自作コード × SWELL で理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次