CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSとJavaScriptで作る名言スライドショー！前へ・次へボタン付きの実装方法を解説

CSSとJavaScriptを組み合わせると、名言や引用文を順番に切り替えて表示できるスライドショーを手軽に作成できます。本記事では、「前へ」「次へ」ボタンとドット型ナビゲーションを備えた名言スライドショーの具体的な実装例を、コード付きでわかりやすく解説します。

実装例：完全なサンプルコード

以下のコードをそのままHTMLファイルとして保存すれば、ブラウザですぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    h1 {
        text-align: center;
    }
    * {
        box-sizing: border-box;
    }
    .Slide {
        display: none;
    }
    img {
        vertical-align: middle;
        width: 100%;
        height: 400px;
    }
    .slideContainer {
        max-width: 600px;
        margin: auto;
        position: relative;
    }
    .prevBtn, .nextBtn {
        position: absolute;
        top: 50%;
        width: auto;
        padding: 10px;
        background-color: rgb(255, 255, 75);
        color: rgb(50, 0, 116);
        font-weight: bolder;
        font-size: 18px;
    }
    .nextBtn {
        right: -40px;
    }
    .prevBtn {
        left: -40px;
    }
    .Caption {
        color: #500070;
        font-weight: bold;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 25px;
        padding: 8px 12px;
        position: absolute;
        width: 100%;
        text-align: center;
    }
    .Navdot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        margin-top: 30px;
        background-color: rgb(54, 5, 117);
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }
    .selected, .Navdot:hover {
        background-color: #d9ff00;
    }
    @media only screen and (max-width: 450px) {
        .prevBtn, .nextBtn, .Caption {
            font-size: 16px;
        }
    }
</style>
</head>
<body>
<h1>Quote slideShow</h1>
<hr />
<div class="slideContainer">
    <div class="Slide">
        <h1>"The way to get started is to quit talking and begin doing."</h1>
        <div class="Caption">- Walt Disney</div>
    </div>
    <div class="Slide">
        <h1>"If life were predictable it would cease to be life, and be without flavor."</h1>
        <div class="Caption">- Eleanor Roosevelt</div>
    </div>
    <div class="Slide">
        <h1>"Life is what happens when you're busy making other plans."</h1>
        <div class="Caption">- John Lennon</div>
    </div>
    <a class="prevBtn">❮</a>
    <a class="nextBtn">❯</a>
</div>
<br />
<div style="text-align:center">
    <span class="Navdot" onclick="currentSlide(1)"></span>
    <span class="Navdot" onclick="currentSlide(2)"></span>
    <span class="Navdot" onclick="currentSlide(3)"></span>
</div>
<script>
    document.querySelector(".prevBtn").addEventListener("click", () => {
        changeSlides(-1);
    });
    document.querySelector(".nextBtn").addEventListener("click", () => {
        changeSlides(1);
    });
    var slideIndex = 1;
    showSlides(slideIndex);
    function changeSlides(n) {
        showSlides((slideIndex += n));
    }
    function currentSlide(n) {
        showSlides((slideIndex = n));
    }
    function showSlides(n) {
        var slides = document.getElementsByClassName("Slide");
        var dots = document.getElementsByClassName("Navdot");
        if (n > slides.length) {
            slideIndex = 1;
        }
        if (n < 1) {
            slideIndex = slides.length;
        }
        Array.from(slides).forEach(item => (item.style.display = "none"));
        Array.from(dots).forEach(
            item => (item.className = item.className.replace(" selected", ""))
        );
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " selected";
    }
</script>
</body>
</html>

コードのポイント解説

1. HTMLの構造

スライドショー全体を囲む.slideContainerの中に、.Slideクラスを付けた各スライドを配置します。各スライドには名言本文と、.Captionクラスで発言者の名前を含めています。また、.prevBtnと.nextBtnが前後移動用のボタン、下部の.Navdotがクリックすると任意のスライドへ直接ジャンプできるドットナビゲーションです。

2. CSSによるスタイリング

.Slideは初期状態でdisplay: none;にしておき、表示・非表示の切り替えはすべてJavaScript側で制御します。前後ボタンはposition: absolute;でコンテナの左右に配置し、ドットはborder-radius: 50%で円形にしています。さらにメディアクエリを活用し、画面幅450px以下のスマートフォンではフォントサイズを小さく調整することで、レスポンシブ対応も実現しています。

3. JavaScriptによる切り替え処理

中心となるのはshowSlides()関数です。引数nがスライド総数を超えたら先頭に戻り、1未満になったら最終スライドへ移動するループ処理を行います。その後、全スライドを一旦非表示にして、指定されたインデックスのスライドだけを表示。同時に対応するドットにselectedクラスを付与することで、現在表示中のスライド位置を視覚的に示せる仕組みです。

出力結果

上記のコードを実行すると、ウォルト・ディズニー、エレノア・ルーズベルト、ジョン・レノンの名言が切り替わるスライドショーが表示されます。

CSSとJavaScriptで作る名言スライドショー！前へ・次へボタン付きの実装方法を解説

  1. CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】

    Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード

  2. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル