個別記事

前後の記事

ピュア CSS なプレゼン用スライドショー

この記事が属するカテゴリー
CSS

前回の「CSS3 の target 疑似クラスで脚注を動的に表示する」に引き続き、:target 疑似クラスを使ってスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。ピュア CSS とか言いつつも、前回同様、:target 疑似クラスに未対応な IE でも動くように JavaScript を使っている。純粋に CSS のみで動くのは、Firefox、Safari あたり。Opera は動かない。

<div id="section-01" class="section"> <!-- 1ページ目  -->
…
</div>
<div id="section-02" class="section"> <!-- 2ページ目  -->
…
</div>
<div id="section-03" class="section"> <!-- 3ページ目  -->
…
</div>

div.section 単位でひとつのスライドとして、それに対して :target 疑似クラスを使って、表示・非表示をコントロール。ターゲットされた div.section はブロック化され、z-index によって前面のレイヤーに配置される。

div.section {
  display: none;
}

div.sftarget, /* for IE */
div:target {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

即席で作ったんで構造的に再考する必要がありそうだけど、作り込めばそれなりに使えそうなものになるかも。tabindex や accesskey あたりをうまく使えば、キーボード操作だけでページ遷移できるかな。

2006-11-03T00:09:09+09:00 | コメント (4) | トラックバック (1) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/395

このリストは、次のエントリーを参照しています: ピュア CSS なプレゼン用スライドショー:

USOperaION／ε∂.∂з＼ さんからのトラックバック
[CSS][javascript]:target 疑似クラスでごにょごにょの解
CSS3 の target 疑似クラスで脚注を動的に表示する,ピュア CSS なプレゼン用スライドショー＠Lucky bag::blogでの、 IE 用... [続きを読む]
2006年11月10日 12:48

コメント

kaminogoya さんからのコメント

うわあ。これおもしろいですね。
前回の :target に関する記事も面白かったですが、ここまで思いつくなんてさすがですね。

2006年11月03日 09:32
e-luck さんからのコメント [TypeKey Profile Page]

ありがとうございます :-)
ギミック厨なもんで、動的な疑似クラスとか好きなんですよね。
あまり無茶をしない範囲で、面白いことが出来ればなぁと色々考えてます。

2006年11月03日 14:14
suk さんからのコメント

すすすすごいですよ！
最近すごいを連発しすぎなので僕もなにかすごい事やりたいなと思います。
FirefoxとSafariで動けば僕的にはおもっきしピュアだと考えてたりします。

2006年11月04日 12:34
e-luck さんからのコメント [TypeKey Profile Page]

でしょ？ピュアでしょ？自分でも、うぉっ！とか思いながら作ってました ;-P
まあ、素直に S5 使えばって話もありますが。
suk さんのすごい事、期待してます！

2006年11月04日 22:50

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)