ミギムキ

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

やりたいこと

サンプルコード

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; }

仕組み、解説、補足など

スポンサー広告