プログラミング

JavaScript でスライドを作ってみました

投稿日:2017年8月2日 更新日:

JavaScript でスライドを作ってみました。

window.history オブジェクトの使い方も参考になるかと思います。

1. スクリーンショット

スクリーンショット

2. デモページ

以下のURLで実際のページを見ることができます。

3. 内容

  • 1つのHTML内に、全てのページの内容を記述します。
  • 1つの記事を、1つの<section>タグにまとめます。
    • <section>タグに、id属性を指定します。値は “page” + ページ番号とします。
    • そうすれば、ページ遷移や現在のページ数表示などは勝手にやってくれます。
  • URL末尾のハッシュでページを指定します。(#1 なら1ページ目、#2 なら2ページ目となります)
  • ウェブブラウザの「戻る」「進む」に対応するために、window.historyオブジェクトを使っています。
  • 縦横比が気になる場合は、画面を拡大して下さい。

4. ソースコード

5. 参考情報

6. メモ

  • 縦横比をどうするかが難しいです。
  • 今回 React は使っていませんが、この手のページは React が合っているように思いました。

📂-プログラミング
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web Programming

Service Worker の状態変化を検証するためのウェブページを作りました

Service Worker の状態変化を検証するためのウェブページを作りました。

Web Workers API を使ったサンプル

Web Workers API を使ったサンプルページです。 目次1. デモページ2. 画面イメージ3. ソースコード4. 参考 1. デモページ デモページ 🔗 Web Worker …

CSS Flexible Box Layout Module のサンプルページを作りました

CSS Flexible Box Layout Module のサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンシ …

Python

Pythonのバージョンを切り替える pyenv の使い方

Pythonのバージョンを切り替える pyenv の使い方について説明します。

Web Programming

以前作っていた静的サイトの開発に関するメモ

以前、静的なツールでウェブサイトを作っていたのですが、その開発に関するメモです。完全にメモであることをご了承下さい。 目次方針使用しているツール新たなページを作成する時の大まかな流れ1. 新たなページ …