ちょっとした地震でもビルから逃げ出すosuga-hです。
HTML5到来以降、さらにJavascriptが注目されているように思いますが、個人的にはCSS3の方がより便利にバージョンアップを遂げているのではないかと思います。
そこでCSS3の紹介もかねて、Javascriptを使わずにCSS3でどこまで出来るのかやってみました。
これはなに？
ブラウザ上(webkit系のみ)で動くスライド資料です
実装にあたって、Javascriptが一切使われていないことが特徴です。
デモ
とりあえずデモをご覧ください。
操作方法はTABを適当に押してもらえればなんとかなると思います。
デモの機能・特徴
- TABでスライドを切り替えたり、サムネイルモードに入ったり出来る
- サムネモードでは赤いバーをクリックするとそこからスライドショーを再開できる
- Javascriptが一切使われていない
ここからは仕組みと具体的な実装方法を説明したいと思います。
スライドの切り替え
CSS3ではセレクタが大きく拡張されました。
W3C Selectors Level 3
この中の直接隣接修飾子”+”とユーザアクション疑似クラス”:focus”を駆使してスライドの切り替えを実装しました。
(両者ともCSS2で定義されたものですが・・・。)
セレクタの一覧及びどのバージョンで定義されたのかはこちらを御覧ください。
W3C Selectors Level3 > 2.Selectors
まずは簡単にこれらのセレクタの説明をします。
直接隣接修飾子
直接隣接修飾子(Adjacent sibling combinator)は見た方が早いのでまずはサンプルをご覧ください。
<div id="sample1" class="sample" >
<style>
/* 見た目設定 */
.sample { padding:0 10px 10px 15px; }
#sample1 > div { width:80px; height:80px; border:2px solid #FAF ; padding:10px; margin-right:10px;}
/* 直接隣接修飾子サンプル */
#sample1 div.element1 + div.element2{ background-color:#FCF;}
/* 要素3は要素1の隣ではないので↓このセレクタにヒットしない */
#sample1 div.element1 + div.element3{ background-color:#CFF;}
</style>
<div class="element1">要素1</div>
<div class="element2">要素2</div>
<div class="element3">要素3</div>
</div>
HTML上で要素1と要素2は隣同士の関係にありますが、要素1と要素3は兄弟関係ではありますが隣接はしていません。
この状態で、要素2と要素3に直接隣接修飾子を使って背景色を定義しているのが上のサンプルです。
隣同士の関係にない要素1と要素3を直接隣接修飾子を使っても背景色が適用されていないことがわかります。
CSS3ではコレに加えて間接隣接修飾子という兄弟関係であればヒットするようなセレクタが追加されました。
関連：間接隣接修飾子(General sibling combinator)
ユーザアクション擬似クラス
ユーザ定義のクラスと違い、擬似クラスは予め定義されたクラスになります。aタグの:hoverや:visitedなどがよく使われているような気がします。
ユーザアクション擬似クラス(The user action pseudo-classes)は擬似クラスの中でもユーザの行動に基づいて定義されている擬似クラスで、:active,:hoverそして:focusの3つがあります。
今回はこの中の:focusを使っていて、UIにフォーカスが当たっているときのスタイルを定義することが出来ます。
<div id="sample2" class="sample" >
<style>
/* フォーカスが当たると背景色設定 */
#sample2 > .element2:focus { background-color:#FAF; }
</style>
<input class="element1" value="スタイル無し"></input>
<input class="element2" value="フォーカスで背景設定"></input>
</div>
関連：W3C Selectors Level3 > 6.6. Pseudo-classes
切り替えの仕組みと実装
前述した直接隣接結合子と:focusを使って、スライド切り替えを実装します。
切り替えのサンプルです。テキストフィールドにフォーカスを当てると直後の要素だけが表示されるのが解ると思います。
実際の実装では、position:absolute;を設定するなどして、スライドとしての見た目を整えています。
<div id="sample3" class="sample" >
<style>
/* スライドの基本設定 */
#sample3 > .slide { width:100px; height:100px; border:1px solid #FCF; }
/* フォーカスが当たっているダミー要素の直後のスライドは表示 */
#sample3 .dummy:focus + .slide { opacity:1; }
/* 普段のスライドは非表示 */
#sample3 .slide { opacity:0; }
</style>
<input class="dummy"></input>
<div class="slide">Slide1</div>
<input class="dummy"></input>
<div class="slide">Slide2</div>
<input class="dummy"></input>
<div class="slide">Slide3</div>
</div>
切り替え効果
CSS3で、アニメーションを定義するためのプロパティ、animationとtransitionが追加されました。
スライドの切り替え効果はどちらを使っても実装できますが、複雑なものはanimationで、シンプルなものはtransitionと使い分けるのが良さそうです。
今回はopacity（透明度）にtransitionを設定することで実現しています。
先程のサンプルに切り替え効果を追加したサンプルです。
positionの調整もしました。
<div id="sample4" class="sample" >
<style>
/* スライドの基本設定 */
#sample4 { width:120px; height:120px; }
#sample4 > .slide { position:absolute; }
#sample4 > .dummy { width:10px; height:10px; }
#sample4 > .slide { width:100px; height:100px; border:1px solid #FCF; }
/* 同じ */
#sample4 .dummy:focus + .slide { opacity:1; }
#sample4 .slide { opacity:0; }
/* */
/* 切り替え効果の設定 */
#sample4 .slide {
-webkit-transition: opacity 500ms linear;
-moz-transition: opacity 500ms linear;
-o-transition: opacity 500ms linear;
transition: opacity 500ms linear;
}
</style>
<input class="dummy"></input>
<div class="slide">Slide1</div>
<input class="dummy"></input>
<div class="slide"> Slide2</div>
<input class="dummy"></input>
<div class="slide"> Slide3</div>
</div>
関連：W3C CSS Transitions Module Level 3
関連：W3C CSS Animations Module Level 3
一覧表示
プレゼンツールはスライド切り替えさえ出来ればいいという物ではありません。
質疑応答や、あとから見返す場合に備えて一覧で表示出来る必要があります。
上記のスライド切り替えをさらに応用することでこの一覧表示も可能になります。
<div id="sample5" class="sample" >
<style>
/* 同じ */
#sample5 { width:240px; height:240px; overflow:scroll;}
#sample5 .container > .slide { position:absolute; background-color:#FCF}
#sample5 .container > .dummy { width:10px; height:10px; float:left; }
#sample5 .container > .slide { width:100px; height:100px; border:1px solid #FAF; }
#sample5 .container .dummy:focus + .slide { opacity:1; }
#sample5 .container .slide { opacity:0; }
#sample5 .container .slide {
-webkit-transition: opacity 500ms linear;
-moz-transition: opacity 500ms linear;
-o-transition: opacity 500ms linear;
transition: opacity 500ms linear;
}
/* 一覧表示 */
#sample5 .thumbnail:focus + .container .slide { position:relative; opacity:1 ;}
#sample5 .thumbnail:focus + .container .dummy { float:none; }
</style>
<input class="thumbnail" value="ここにフォーカスで一覧表示"></input>
<div class="container">
<input class="dummy"></input>
<div class="slide">Slide1</div>
<input class="dummy"></input>
<div class="slide"> Slide2</div>
<input class="dummy"></input>
<div class="slide"> Slide3</div>
</div>
</div>
まとめ
CSSの機能を活用すれば、スライド資料ぐらいは作れます。もちろん各種ブラウザの対応状況をみればCSS3を積極的に使いづらいかもしれませんが、 先日（2011年3月22日）にリリースされたFirefox4にCSS3のtransition機能が一部実装されたりと、ブラウザ側の対応も進んできていますし、例えばiPhoneやAndroid向けのサイトやプロトタイピングでは使いやすいと思います。
HTML5が注目され始めてしばらく経ちますが今一度CSS3に注目してみるのもいいのではないでしょうか。