月別アーカイブ 2006年11月

前後の月

ピュア 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) |はてなブックマーク