CSSだけでスライドショーはつくれるよ。

Slideshow with CSS

この記事はCSS Programming Advent Calendar 2012、22日目のための記事です。

CSS Programmingとは、jsを使わないでHTMLとCSSを駆使してゲームとかスライドショーとか作る技術です

ということで、ここでは、前回の記事で作った、グローバルナビの下の大きめの画像のところ(以下:スライドショー)を、CSSだけで実装してみます。JavaScriptで実装したサンプルはこちら

以下が目次になります。

まえがき

CSSは、HTMLなどで書かれた文書の見栄えを指定したり、装飾したりするための言語で、<p><div>といったHTML要素に対して、加えたいスタイルを指定していきます。

CSSには「font-size(文字の大きさを指定する)」とか「background(背景に敷く色や画像を指定する)」といった、HTML要素のどの属性(特性)を装飾するかを指定するためのプロパティや、HTML要素に、より効率良くスタイルを適用できるようにするための疑似クラスセレクタといった仕様がたくさん取り揃えられています。

CSS Programmingでは、その中でも新しめの技術を使って動くものを作り出します(※なので新しめのブラウザでしか動きません)
まずは、スライドショーを作るのに使った、便利プロパティ、便利疑似クラス、便利セレクタと、便利HTML要素について。

CSS Programmingに使える便利なやつ

transitionプロパティ
CSSの値の変化をスムーズにします(トランジション効果)
値が数値のものであればなんだってスムーズになります。色は特別に数値じゃなくてもスムーズになります。
ブラウザの対応状況(transitions)

指定方法は下記の通り。

  1. element-name {
  2. transition: property-name 1s ease 0s;
  3. }

値は、transition-propertytransition-durationtransition-timing-functiontransition-delayの順番に指定します。詳しくはこちらを参照のこと。

下のサンプルでは、通常時とロールオーバー時にそれぞれ違う値を指定しており、その値の変化をtransitionでスムーズにさせています。
一番上はmargin-left、2行めはpadding-leftcolor、3行めはtext-indentletter-spacing、一番下はleftbackgroundbox-shadowの値をスムーズに変化させています。※該当CSSは52行めから67行め。


E ~ F(間接セレクタ)
要素名と要素名の間に「~(チルダ)」を挟みます。
E ~ F」と指定した場合、「E要素より下に書かれた兄弟関係にあるF要素」にスタイルを適用します。
ブラウザの対応状況(CSS3 selector)(CSSセレクタのレベルはこちらで確認。)
HTMLの階層構造について

兄弟関係というのは、同じ階層にある要素ってこと。同じ階層というのは、同じセクション内の同じアウトラインレベルの要素ってこと。同じセクション内の同じアウトラインレベルというのはつまり、右図の通り。
左の帯の色が同じ行(インデントが同じ行)が、同じアウトラインレベルという事になります。
上下で繋がってる行が同じセクションという事になります。
上下で繋ってしかも帯の色が同じ行が同じ階層という事になります。

下に、右図と似た構造のサンプルを作ってみました。「h3 ~ p」と「blockquote ~ p」と指定したときの、スタイルの適用具合がわかります:)※該当CSSは35行めから40行め。


:not(s)否定疑似クラス
(s)の部分には、要素の属性、もしくは属性とその値を指定できます。
「その属性を持った要素」、もしくは「その属性でその値を持った要素」以外に、スタイルを適用します。

classとかtypeとかtitleとかを、下記みたく指定できます。※該当CSSは14行めから30行め。


:checked疑似クラス
ラジオボタンチェックボックスがチェックされている時のみスタイルが適用されます。
input:checked ~ p」と指定した場合、「<input>がチェックされている時のみ、その<input>より下に書かれた兄弟関係にあるF要素」にスタイルが適用されます。

例えば下のサンプルでは、左側のチェックボックスがチェックされている時は下のテキストが赤色に、右側のチェックボックスがチェックされている時は青色に、両方ともチェックされている時は紫色になります。※該当CSSは44行めから52行め。


<label>要素
<input>id属性の値と、<label>for属性の値を同じにすることで、ふたつの要素を関連づける事ができるようになります<label>の部分をクリックしても、<input>を切り替えることができるようになる)

上のサンプルを参照のこと:)

目次に戻る

それCSSで出来るよ。

上記をふまえて、CSSでスライドショーをつくります。といってもベースはJavaScriptのものと同じです。
(※スライドショーの仕様やHTMLの構造については前回の記事を参照ください。X)

JavaScriptで実装したスライドショーは 、クリックしたら動く仕組み

まずは、動かすためのきっかけづくりから。

前回、JavaScriptで実装した時には、画像をスライドさせるきっかけは「クリックした時」でした。
例えば、矢印をクリックしたら隣の画像の位置までスライドしたり、下のチョボをクリックしたらその画像の位置までスライドしたり…。
クリックをきっかけに、その時の条件によって行う処理を変えていました。

これをCSSで実現するにはどうすればいいでしょう?

きっかけづくり

例えば下記のコード。
「リンクには下線をつける。ロールオーバーした時は下線を消す」という指定です。

  1. a { text-decoration: underline; }
  2. a:hover { text-decoration: none; }

これと同じ要領で、「最初のラジオボタンをチェックした時は○○する。二番目のラジオボタンをチェックした時は○○する」というような指定にすれば、クリックしたら表示が切り替わるという事になりますね。

きっかけを「(ラジオボタンを)チェックした時」などに置き換えれば、「クリックした時」みたいな処理も実現できそうです。

目次に戻る

チョボのところの仕組み

下のチョボをクリックした時に、画像がチョボ番目までスライドするようにします。
チョボはちょうど見た目もラジオボタンみたいな形だし、機能としてもラジオボタンとほぼ同じなので、ラジオボタンに置き換えてみます。<input type="radio">に。

  1. <ul class="nav">
  2. <li><a href="#"></a></li>
  3. <li><a href="#"></a></li>
  4. <li><a href="#"></a></li>
  5. </ul>
  6. <ul class="nav">
  7. <li><input type="radio" name="gallery" checked="checked"></li>
  8. <li><input type="radio" name="gallery"></li>
  9. <li><input type="radio" name="gallery"></li>
  10. </ul>

ひとつめのチョボは初期位置なので始めからチェックしておいて、CSSでチェックされているチョボの位置によって.slideFrameの中の<ul>の位置を変更するように指定します。

~:checked

チョボをチェックした時の画像の位置
  1. input:first-of-type:checked ~ .slideFrame ul {
  2. left: 90px;
  3. }

上記は「ひとつめのinput要素がチェックされてる時は、それ以降の兄弟関係にある.slideFrameの中のul要素の位置を、左から90pxの位置にする」という指定です。:first-of-typeとかについては後述します。

同じように、2番目の時は-450px、3番目のときは-990px、となるようにそれぞれ指定します。※該当CSSは107行めから115行め

動きませんね…X(

それもそのはず、<input>.slideFrameよりも下になっちゃってるからです。「~(間接セレクタ)」はその要素より下に書かれた兄弟関係にある要素にスタイルを適用するので、

<input>は上に添えるだけ

ちゃんと適用するには、<input>.slideFrameよりも上に、しかも.slideFrameの兄弟関係でないといけないので、<ul>から出して、<input>だけを3つ並べます。
これで「inputの下に書かれた兄弟関係にある.slideFrame」という構造になりました:)

<label>

チョボは<label>に

そしてチョボのところはというと、<input>の代わりに<label>に置き換えます。
この<label>for属性の値と、上の<input>id属性の値を同じにすれば、チョボをクリックして上の<input>を切り替えることができるようになりますもんね。属性の値はswitch1, switch2, switch3という感じにしました。

あと、チェックしたチョボ自体の表示も変わるように、CSSに下記のような指定もプラスインします。(※<input>id属性が付いたので、input:first-of-type#switch1input:nth-of-type(n)#switch2#switch3に置き換えられますね。)

チョボの仕組み
  1. #switch1:checked ~ .nav li label[for="switch1"],
  2. #switch2:checked ~ .nav li label[for="switch2"],
  3. #switch3:checked ~ .nav li label[for="switch3"] {
  4. opacity: 0;
  5. }

チェックされた<input>に関連づけられた<label>を透明にする事で、<li>の背景画像(黄チョボ)が表示されるようになってます。

上に移動した<input>は、チェックしたか/チェックしてないかを切り替えるためのスイッチ的な役割だけなので、display: none;で非表示にしても問題ないです(下のサンプルではまだ表示してます)

チョボをクリックすると、チョボ番目の画像が表示されるようになりましたね。
けどまだただ切り替わってるだけなので、これを、transitionを使って、スムーズに切り替わるようにします。

transition

.slideFrameの中の<ul>の、leftプロパティの値を変化させているので、下記のように指定します。
ちょっとゆっくりめに、1秒かけてスライドするようにしました。該当CSSは93行めから96行め。
※矢印はまだクリックしても何も起きません。

これにて、3つチョボの機能、実装完了です!

目次に戻る

目次に戻る

左右の矢印の機能

矢印はチョボと違って、クリックする度に役割が変わります。(※詳しい話は前回の記事を参照ください。X)

左右の矢印の機能

例えば、一番左の画像が表示されてる時に右矢印をクリックすると、二番目の画像のところまでスライドします。これを<input>的に言うと「<input id="switch2">checkedにする」という事。
二番めの画像が表示されてる時に右矢印をクリックすると、三番目の画像のところまでスライドします。これは「<input id="switch3">checkedにする」という事になります。

矢印をクリックする度に<label>for属性を替える事ができれば実現できそうです。

<label>ごと切り替える

とはいったものの、for属性だけを書き換える事はCSSだけじゃ出来ないので、左右にそれぞれ<label>を3つずつ用意して、クリックする度に<label>自体を切り替えるようにしてみます。
「一番左の画像が表示されてる時に右矢印をクリック」した時は、<label for="switch2">をクリックさせたいので、<label for="switch1"><label for="switch3">を非表示に。「二番目の画像が表示されてる時に右矢印をクリック」した時は、<label for="switch3">をクリックさせたいので、<label for="switch1"><label for="switch2">を非表示に…、
と、全部のパターンを書き出すと、下記のようになりました(上の<input>を非表示にしてるやつに書き足しました)

  1. #gallery input,
  2. #gallery #switch1:checked ~ .prev label[for="switch1"],
  3. #gallery #switch1:checked ~ .prev label[for="switch2"],
  4. #gallery #switch2:checked ~ .prev label[for="switch2"],
  5. #gallery #switch2:checked ~ .prev label[for="switch3"],
  6. #gallery #switch3:checked ~ .prev label[for="switch1"],
  7. #gallery #switch3:checked ~ .prev label[for="switch3"],
  8. #gallery #switch1:checked ~ .next label[for="switch1"],
  9. #gallery #switch1:checked ~ .next label[for="switch3"],
  10. #gallery #switch2:checked ~ .next label[for="switch1"],
  11. #gallery #switch2:checked ~ .next label[for="switch2"],
  12. #gallery #switch3:checked ~ .next label[for="switch2"],
  13. #gallery #switch3:checked ~ .next label[for="switch3"] {
  14. display: none;
  15. }

:not(s)

:not(s)(否定疑似クラス)」を使ったらちょっと短くなりました。

  1. #gallery input,
  2. #gallery #switch1:checked ~ .prev label:not([for="switch3"]),
  3. #gallery #switch2:checked ~ .prev label:not([for="switch1"]),
  4. #gallery #switch3:checked ~ .prev label:not([for="switch2"]),
  5. #gallery #switch1:checked ~ .next label:not([for="switch2"]),
  6. #gallery #switch2:checked ~ .next label:not([for="switch3"]),
  7. #gallery #switch3:checked ~ .next label:not([for="switch1"]) {
  8. display: none;
  9. }

上記に倣って、左右の矢印に<label>を設置します。

これにて、左右の矢印も実装完了です!

目次に戻る

イージングを調整する

CSSのtransition変化の仕方(イージング)を微調整することもできます。
最初から定義されているイージングにはeaselinearease-inease-outease-in-outの5つあります(前述のtransitionのサンプル参照)が、それ以外にも、オリジナルなイージングが作れます!

cubic-bezier()

  1. transition: left 1s ease 0s;

上記の「ease」のところを「cubic-bezier()」に置き換えて、下記のように書きます。

  1. transition: left 1s cubic-bezier(0.25, 0.1, 0.25, 1.0) 0s;
パスで線を描く時に操作するアレ

括弧の中には、数値が4つ「,(コンマ)」区切りで入ります。この数値が何を表すかと言うと、右図参照。

Illustratorとかで使うベジェ曲線(パス)のベクトル(?)を操作する時に触るアレの、座標位置になります。
括弧の中は「左下のX座標, 左下のY座標, 右上のX座標, 右上のY座標」という順番で記述します。

けどこの数値を、想像だけで指定するなんて無茶ですよね…X(。なので、下記のようなサイトがちゃんと用意されています。

作ったベジェ曲線を保存しておけて、後からそれを並べて比較できるので分かりよいです。(2012.12.22現在)
これでビジュアルで確認しながら思い通りの動きが作れますね:D

普通のイージングは嫌だけど自分で作るのはめんどくさいなって人は、下記のサイトに、jQuery easingにあるイージングがすでに用意(定義)されているので、こちらからコピペするのが簡単かもしれません。

Easing Functions Cheat Sheet

並んでるイージングの中から好きなものをクリックして、詳細ページにあるコードをコピペするだけです。
JavaScript用と、SCSS用、CSS用とありますが、今回はCSS用のものをコピペ。
※個人的に「jQuery EasingではeaseOutExpoが一番好き」なので、下のサンプルでは「easeOutExpo」をコピペしてみました。該当CSSは100、101行め。

easeOutExpoがいまいちだったので…、自分なりに調整してみました。「easeInOutExpo」に似てるかな:)

目次に戻る

別の方法。

CSS Programming Advent Calendar 2012、どの記事も目からウロコの内容ばかりでとっても勉強になります!
今回やった方法以外にもいろんな方法があるんだなーと思ったので、ちょっと試してみました!
主に左右のボタンの切り替え方についてです:)

z-indexで入れ替える

こちらは1026さんの記事で紹介されていた方法です。読んでてはっとしました:O

CSS FreeThrow – a game, noJS, only CSS and HTML(2012.12.12)

z-indexの仕組み

クリックしたい要素以外を消してしまうんじゃなく、手前に持ってくるんですね。該当CSSは84行めから91行め。

けどそうすると、<label>は常に重なって表示されている状態になるので、<label>の背景画像として表示してたレースと、その中の<i>の背景画像として表示してた赤い矢印は、<label>以外の要素で表示するようにしました。<label>自体には何も指定せず、幅と高さだけ持たせます(右図参照)
こっちの方がHTMLソースがシンプルです:D

目次に戻る

pointer-events: none;

こちらはGeckoTangさんの記事で紹介されていました。このプロパティは初見だったので、CSSの奥深さを感じました。

13日目 : CSS Programming Advent Calendar 2012 - < /gecko >(2012.12.13)

pointer-eventsプロパティ
マウスイベントを操作する事ができます。pointer-events: none;とすると、その要素のリンククリックイベント動的な疑似クラスを無効にします。
ブラウザの対応状況(pointer-events)

要素を消してしまうんじゃなく、機能しないようにするんですね。

display: none;にしていたところを、このプロパティに書き換えました。該当CSSは90行め。
こっちの方が理に適ってます:)

目次に戻る

:target

最後にもう一個。
Firefoxだと、同じ<label>連続でクリックすると暫くチェックできなくなっちゃうのが、ずっと気になってたんですよね…(※クリックする位置を変えれば連続クリックできるけど…)
解決方法が分からなかったので…、<input>じゃなくて、<a>を使って切り替える方法に変えてみます!
まずはその際の要「:target疑似クラス」について。

:target疑似クラス
id属性で指定した要素が、リンク(?)されてる時に、スタイルを適用します。
例えば、#switch2:targetと指定した時には、URLの末尾が「/sample.html#switch2」とかになってる場合に、<div id="switch2">にスタイルが適用されます。

この:target<a>を使ってスライドさせます。とは言っても基本的な仕組みは<input>のものと同じです。
まずは.slideFrameの上に並べてた<input>を、ターゲットとなるid属性の付いた要素に変えます。

  1. <input type="radio" id="switch1" name="gallery" checked="checked">
  2. <input type="radio" id="switch2" name="gallery">
  3. <input type="radio" id="switch3" name="gallery">
  4. <div id="switch1" class="switch"></div>
  5. <div id="switch2" class="switch"></div>
  6. <div id="switch3" class="switch"></div>

チョボのところと、左右のボタンの<label><a>に変えて、href属性でid属性の付いた要素へリンクさせるようにします。

  1. <label for="switch1"></label>
  2. <label for="switch2"></label>
  3. <label for="switch3"></label>
  4. <a href="#switch1"></a>
  5. <a href="#switch2"></a>
  6. <a href="#switch3"></a>

CSSもHTMLに倣って、下記のようにlabelfor:checkedだったところを→ahref:targetに書き換えます。

連続でクリックできるようになりました:)
scrollTopもそこへ移動しちゃうんじゃないかって懸念してたんですが、移動しなかったです:D!よかった。けど、ハッシュで履歴が残っちゃうので、ブラウザの戻るボタンする度にスライドします:((スライドショーでこれは面倒な事だけれど、何か別のページものとかだったら便利かもですね。)

※Chromeだとa要素の方が連続クリックできないみたいですねー…¦(。逆にFirefoxではinput要素でも連続クリック大丈夫になってました…!…なんだいっ!(2017.3現在)

できあがり!

Lopan cafeのサイトに設置したらできあがり:)

JavaScriptのにもイージングを付けたものを用意したので、見比べてみてください(イージングはeaseInOutExpoです:)

スライドショーのeasingをeaseInOutExpoにした | カフェ&ベーカリー「Lopan cafe」


以下からサンプルをダウンロードできますX)。:checkedで作ったタイプと:targetで作ったタイプが入ってます。

:checked擬似クラスを使ったタイプと、:target擬似クラスを使ったタイプのサンプル

目次に戻る

あとがき

ちょっとCSS Programmingになってるかどうか不安ですが、一応Pure CSSなので。
他の方々が作ったものと比べると俄然物足りないかと思いますが、一応Pure CSSなので…XO

今までCSS3は、使ってもborder-radiuslinear-gradientくらいだったんですが、CSS Programmingを知っていろんな凄コードを見てるうちに「~」を知って、「<label>:checkedの使い方」を知って、そこから一気に面白くなりました。状態を変化させて、それを別の要素にも反映できるようになればこっちのもんですよね!
今度はもっと突っ込んだもの作ってみたいです:D

以上、最後まで読んで頂きありがとうございました!CSS Programmingに興味を持って頂けたら幸いです。

明日(23日目)は、tech.kayac.com Advent Calendar 2012でみごとっぱいを動かしてくれたdamele0nさんです!
よろしくお願いします!

Comment & Pingback

10 Comments! for CSSだけでスライドショーはつくれるよ。

  1. アシベ

    こんにちは、ネット上で人気のカービィカフェのサイトを覗いてみるとGoods紹介の箇所でスライドショー形式で画像がスクロール可能な箇所がいくつかあったので、これとてもいいなぁと思い探していたところlopanさんのこの記事を見つけました。

    試しにDLしてみてなんで動いているのかを本記事と照らし合わせながら試しています。

    そこでCSSコード内の最後にレスポンシブ用の箇所をみかけまして(残念ながらコードは記述されてませんでしたが・・・)、
    最適化できれば利用できる場面がかなりありそうだと思いました。

    これからもがんばってください!!

    ※個人的にローディング画面のうさぎがすごくかわいくて好みです。ローディング作成の記事があるといいなぁと

    Reply

    • _watercolor

      > アシベさん
      こんにちは、コメントありがとうございます!
      ですねー、レスポンシブできたらいいですよねーX)。
      (サンプルの最後のところは、initializrの名残なのです…。)
      今度はレスポンシブの記事とローディングの記事、書いてみようと思います!
      がんばりますー!

      Reply

  2. kunikane

    うまく設置できました。ありがとうございます!!
    しかしながらスライドのイメージを4枚目以降も増やしたい為
    色々試してみましたがうまくいきません。
    ヒントをいただけませんか???

    Reply

    • _watercolor

      > kunikaneさん
      コメントありがとうございます!
      3枚スライドショーに4枚めを増設したいとのこと、以下にちょこっと解説しますねー;D。

      まずはHTMLの、ラジオボタンとチョボと矢印を、それぞれひとつずつ追加します。
      あとはCSSを修正します。修正するポイントは以下の4か所です:)。

      1. イメージが4枚横並びになるように、.slideFrameの中の<ul>の横幅を広げる。

      2. チョボが4つ横に並ぶように、.navの中の<ul>の横幅を広げる。

      3. 4つめがチェックされた時の、.slideFrameの中の<ul>の位置を追加する。

      4. <label>の切り替えに、4つめがチェックされた時の状態を追加する。

      ううむ、けっこう面倒臭いですけれど…、以下にサンプルを作ってみましたのでご参考までにどうぞ!
      詳しくはCSSファイルの中のコメントを見てみてくださいませー。

      Reply

  3. jude

    自動スライドジョーとラジオボタンの併用で自動スライドが動いたら、動いたスライドに合わせて、ラジオボタンがチェックされることができますか。さらに自動スライドがスライドしたら、対応のラジオボタンの色も変わることができますでしょうか、ご教授よろしくお願いします。

    Reply

    • _watercolor

      > judeさん
      コメントありがとうございますー!

      さっそくご質問の内容ですが、
      CSSだけで作るスライドショーで「自動」にスライドさせるには、animationプロパティを使う方法があります。
      ※詳しくは動くCSSのためのメモという記事の「6秒おきに切り替わる」の項をご参照くださいませー;D。
      けれど、これはラジオボタンを使って動かしているわけではなくて、画像を順番にスライドするように登録して、その通りに動かしているだけなんですよね…。

      ラジオボタンを使って自動でスライドさせるためには、「動的」にラジオボタンをチェックしなくちゃいけないです。そういう場合には、CSSだけじゃできなくて、JavaScriptを使わなきゃいけないです…。

      試しにJavaScriptを使って動的にラジオボタンをチェックして、自動でスライドするサンプルを作ってみましたX)!
      ご参考までにどうぞー!

      ではでは、今後ともLopan.jpをよろしくです;)!

      Reply

  4. スズキ

    cssのみで背景画像をスクロールする上記の方法を、コピペして試したのですが、うまくいきません。
    コピペしたので、何が原因かわからないので教えて下さい。
    一応、記述した画像やhtmlファイルとcssファイルを送りたいのですが、確認して頂けると幸いです。

    Reply

    • _watercolor

      > スズキさん
      い…一年近くも返事が遅れてしまって申し訳ありません!
      すごく遅いと思いますが、、こちらにサンプルをご用意しましたので、ダウンロードしてみてください…!
      よろしくお願いいたしますーX)。

      Reply

      • アオイ

        横からですが、私もコピペで試したのですがうまくいかず悩んでいたので、サンプルでもう少し勉強します。
        ありがとうございます。

        Reply

        • _watercolor

          > アオイさん
          コメントありがとうございますー!
          記事中のコードは、説明してないところをハショっちゃってて、分かりづらくてすみません…X(。
          サンプルのコードもごちゃごちゃしてて読みにくいかもですが、、。
          サンプルの「slideshow.css」について補足しときます;D!
          1行め〜75行めまではスライドショー以外の部分のスタイルなので、スライドショーとは関係なくて、
          81行め以降がスライドショーのためのスタイルになってます。
          そこから182行めくらいまでは、背景とかボタンとか装飾に関するスタイルで、
          184行め〜223行めくらいまでが、動きに関するスタイルになってます!
          どうぞよろしくですX)!

          Reply

コメントを残す