プログラミング

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

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

関連記事

React Redux

React と Redux を使ったウェブページのサンプルその1

React と Redux を使ってウェブページのサンプルを作ってみました。以下のURLからアクセスすることがでます。 デモページ 🔗 React + Redux のサンプル002 こ …

Babel とは?

目次1. Babel とは?2. JavaScript のバージョン3. プラグイン (plugins)4. プリセット (preset)5. 基本的な使い方6. Babel のイメージ 1. Bab …

Redux

Redux の非同期処理サンプルページを作りました

Redux で非同期処理を行うサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 動作4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

Bootstrap

ボタンを押した直後に BootstrapのTooltipを数秒間表示する方法

ウェブページ上のボタンを押した直後に、Bootstrap の Tooltip を一定時間だけ表示する方法を紹介します。 スポンサードリンク 目次1. はじめに2. 参考になる情報3. プログラムの書き …

WordPress

WordPressのソースコード。HTMLにPHPを埋め込むスタイル。

WordPress本体のPHPソースコードや、テーマに含まれているPHPのソースコードを見ると、やたらと PHPの開始タグ(<?php)と終了タグ(?>)が埋め込まれています。 例えば、こ …