プログラミング

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

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

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

web development

Web Development for Beginners を読む:レッスン1

目次1. はじめに2. Web Development for Beginners の進め方3. レッスン1「Introduction to Programming Languages and Too …

Web Programming

アクセス元のグローバルIPアドレスが表示されるだけのWebページを作る (Content-Type を変えた2種類)(PHP利用)

目次1. はじめに2. 手順(HTMLバージョン)(1) ウェブサーバー上にディレクトリを用意します(2) index.php ファイルを作成します(3) この Webページにアクセスします3. 手順 …

Python

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

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

Python

定期的にツイートするbotをPythonで作る方法

Twitterでツイートを行う botプログラムを Python(プログラミング言語)で作ります。 このプログラムは、CentOS(Linuxの一種です)上で定期実行します。 スポンサードリンク 目次 …