CSS

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


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

まずひとつめ。

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

See the Pen css slide gallery by natsumi (@mayo31) on CodePen.18228

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

そしてふたつめ。

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

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

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

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

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

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

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

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です