ピュア 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 あたりをうまく使えば、キーボード操作だけでページ遷移できるかな。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/16

USOperaION/ε∂.∂з\ - [CSS][javascript]:target 疑似クラスでごにょごにょの解 (2006年11月10日 12:48)

CSS3 の target 疑似クラスで脚注を動的に表示する,ピュア CSS なプレゼン用スライドショー@Lucky bag::blogでの、 IE 用... 続きを読む

Comments

kaminogoya said:

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

e-luck said:

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

suk said:

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

e-luck said:

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