プログラミング

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

メールアドレスが公開されることはありません。

関連記事

Python

Python でファイルを読み込み何か加工した結果を出力するコードの雛形

Python でファイルを読み込んで、何か加工した結果を出力するコードの雛形を紹介します。

フレームレートを指定して Canvas に描画するサンプルページを作りました

フレームレートを指定して Canvas に描画するサンプルページを作りました。 目次1. スクリーンショット2. デモ3. 説明4. ソースコード 1. スクリーンショット スクリーンショット 2. …

Web Programming

素のJavaScript と Sass で Webページを作成するための雛形

素のJavaScript と Sass で Webページを作成するための雛形を紹介します(あくまで一例です)。

React Redux

React + Redux の最小限の雛形コード

この記事に載せている JavaScriptのコードは、React + Redux を使っています。 但し、まだ何も意味のある処理を書いていないので、このままだと 属性 id=”root” を持った要素 …

Web Programming

サーバーからブラウザを通じてデスクトップ通知する方法(Push API を利用)

Push API を使ってサーバーからブラウザにメッセージを送る方法について説明しています。