この記事は「今年お世話になったCSS Advent Calendar」4日目の記事です。

3日目 : 今年お世話になったCSS Advent Calendar 2016 - Adventar
明日は登録者が今のところいないので登録しましょう。

CSSのGradientまわりは良い機能ですよね。クソみたいな画像リソースが減る最高の機能だと思います。

さて、突然ですがこちらを御覧ください。

こちらは、最近ではよく見るようになった、ブラウザ上で動くスライド資料になります。しかしこちらのスライドは普通ではありません。

通常のブラウザ上のスライドは、JavaScriptでキー入力をハンドリングして次のページを表示していますよね。しかしこちらのスライドではページ遷移にJavaScriptを使っていません。 JavaScriptがオフでも使えるブラウザ上スライド資料なのです。

実際の資料が下記リンク。まずはWebページをクリックして、キーボードの[tabキー]を押すと多分動きます。(変な設定とかプラグインが入ったブラウザだとダメかも??僕のChromeでしか動作検証していない)

http://denari.link/css_slide/
(数ヶ月前に行われた社内勉強会向けの資料のため、内容が一部変なものもあります。)

ちなみにこういう風に、スライドの端に(スクロールバーではない)白い枠線がついているスライドの場合は[Enterキー]を打鍵することで別タブにてリンクを開けるハズです。

ソースコードはこちら(docsがbuild後のファイル、srcがbuild前のファイルです。)

(お気づきの方もいるかもしれませんがソースコードを掲載している部分はJSが当たっています。そこはもう勘弁してください…笑)

動作原理

普通のブラウザ上で、[tab]キーを押すと、こういうふうな挙動でページ内のリンク(aタグ)を辿っていけますよね。

これを応用しています。

上記画面上で青くフォーカスされているaタグには :focus 擬似クラスが適用されます。

感想

いや、本当にメリットがない。

時間をムダにするだけなので、普通にJS使えるブラウザ使ってください。くれぐれも真似しないように。

僕はもうちょっとだけ時間をムダにして、CSSで動くスライドを作るためのライブラリ的なものを作成しようかと思います。