[CSS] ページ切り替えできるスライドをCSSだけで作る

公開日:2018/10/24 更新日:2018/10/25

やりたいこと

ラジオボタンを活用すると、javascriptを使わずに、ページ切り替え可能なスライドが作成できます
ページの追加が大変なので、あまりページの多いコンテンツには不向きですが、数ページの手順解説などには十分使えると思います

サンプルコード

html

<article class="slide">
    <input type="radio" name="pager" id="p01" class="pager" checked>
    <section class="page">
        <p>1ページ</p>
        <nav>
            <label for="p00">前</label>
            <label for="p02">次</label>
        </nav>
    </section>
    <input type="radio" name="pager" id="p02" class="pager">
    <section class="page">
        <p>2ページ</p>
        <nav>
            <label for="p01">前</label>
            <label for="p03">次</label>
        </nav>
    </section>
    <input type="radio" name="pager" id="p03" class="pager">
    <section class="page">
        <p>3ページ</p>
        <nav>
            <label for="p02">前</label>
            <label for="p04">次</label>
        </nav>
    </section>
</article>

CSS

.pager,
.page {
    display: none;
}

.pager:checked + .page {
    display: block;
}

仕組み、解説、補足など

ラジオボタンが有効なとき、その要素には「:checked」というセレクタが有効になっています
このセレクタと隣接する要素の「display」を「none」から「block」に変えることで、ページの表示非表示を切り替えています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。