今回の Tips は、JavaScript を一切利用せず、CSS のみを駆使して表現するイメージスライダーを作ってみます。 スライドは、サムネイル付きのナビゲーションボタンをクリックすることで切り替わるようにしてみます。 まずは、完成イメージのサンプルをご覧ください。 CSS のみで表現するスライダーデモ See the Pen Pure CSS thumbnail slider by digistate (@digistate) on CodePen. 過去記事でも何度か紹介していますが、スライドの切り替え方法は、アンカー(a)タグの href 値に ハッシュリンク(#)を指定し、そのリンクをクリックすることで対象要素に付けられる :target 疑似セレクタを利用します。 HTML の構成 スライダーの HTML は、メインのスライダー用とサムネイルナビゲーション用の2つの対になるリ
![CSS のみでサムネイルナビ付きスライダーを表現してみる](https://cdn-ak-scissors.b.st-hatena.com/image/square/b40b86582a46b2b8948420f70404b3bc0300016b/height=288;version=1;width=512/https%3A%2F%2Fdigipress.info%2F_wp%2Fwp-content%2Fuploads%2F2019%2F02%2Fpure-css-slider.jpg)