Javascriptを使わないでCSSスライドギャラリー


プログラムが書けない人でも大丈夫。CSSのみで作ればいいんです。これで黒い画面が怖くてたまらないあなたのホームページにもスライドギャラリーを設置することができます!
というわけで3パターンご紹介しますので、デザインなど好きにアレンジして使ってみてください。

まずひとつめ。

チェックボックス + z-indexプロパティを使用したスライドギャラリー

See the Pen css slide gallery by natsumi (CodePen.

checkboxのchecked属性を利用。
checkedになっているinputのidを見て、labelのz-indexを変更しています。

そしてふたつめ。

a要素 + pointer-eventsプロパティを使用したスライドギャラリー

See the Pen CSSのみでslide by natsumi (@mayo31) on CodePen.

a要素のhrefにターゲットのid指定。targetのidを見て表示しています。URLの#で履歴が残るので、ブラウザの戻るボタンでいちいちスライドしてしまいます(´・ω・`)
フォトギャラリーより、ページ物のコンテンツを遷移なしで見せる表現に向いているかもしれません。

というわけでこんなものも用意しました。

CSSのみで各ページをスライドさせるランディングページデモ

See the Pen CSSのみでSlide ランディングページサンプル by natsumi (@mayo31) on CodePen.

デザインを工夫すれば1ページで複数のコンテンツを表示するようなLPも作れちゃいますね( *´艸`)