タグ

2019年3月4日のブックマーク (1件)

  • CSS のみでサムネイルナビ付きスライダーを表現してみる

    今回の Tips は、JavaScript を一切利用せず、CSS のみを駆使して表現するイメージスライダーを作ってみます。 スライドは、サムネイル付きのナビゲーションボタンをクリックすることで切り替わるようにしてみます。 まずは、完成イメージのサンプルをご覧ください。 CSS のみで表現するスライダーデモ See the Pen Pure CSS thumbnail slider by digistate (@digistate) on CodePen. 過去記事でも何度か紹介していますが、スライドの切り替え方法は、アンカー(a)タグの href 値に ハッシュリンク(#)を指定し、そのリンクをクリックすることで対象要素に付けられる :target 疑似セレクタを利用します。 HTML の構成 スライダーの HTML は、メインのスライダー用とサムネイルナビゲーション用の2つの対になるリ

    CSS のみでサムネイルナビ付きスライダーを表現してみる