プログラミング

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

IntersectionObserver API を使ったテストページを作成しました

IntersectionObserver API を使ったテストページを作成しました。 IntersectionObserver API は、ウェブページ上のある要素が見える範囲 (viewport) …

Web Workers API を使ったサンプル

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

Web Programming

ソフトウェアにおける日付・時刻フォーマット

目次ソフトウェアにおける日付・時刻フォーマット参考情報ISO 8601RFC 5322RFC 7231Common Log Format ソフトウェアにおける日付・時刻フォーマット ソフトウェア(特に …

no image

Pug(旧Jade)テンプレートファイル内で、npmでインストールしたモジュールを使う方法

Pug(旧Jade)というJavaScriptのテンプレートエンジンがありますが、このテンプレートファイル内では JavaScriptが使えるので、複雑なHTMLを生成することができます。 但しデフォ …

Homestead + Xdebug + PhpStorm でリモートデバッグ環境をつくる

目次1. はじめに1. Homestead とは?2. Xdebug とは?3. PhpStorm とは?2. 今回の環境3. Homestead 側の設定4. Windows側の設定1. PHPの導 …