ページの作り方が知りたいです
下記のURLの様にページ遷移しないでボタンを押して進めていくやり方が知りたいです
https://yasashiku.info/kokorokirei-3/
A 回答 (1件)
- 最新から表示
- 回答順に表示

No.1
- 回答日時:
こんにちは
方法はいろいろあると思いますが・・・
ご提示のページの場合は、画像スライダーでフェードイン/アウトするようなものと同じような仕組みです。
デベロッパーツールで表示時のDOMを見ればわかると思いますが、
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
・・・
のような欄を作っておいて、順にdisplay: block/none で制御して表示/非表示を切り替えています。
順序が決まっているのなら、この方法で十分ですね。
(そのページでは、読み込み後にjavascriptで上記のような構成に成形しているようですが、最初からHTMLに直接記述しておいても同じことです。)
表示の切替えはスクリプトでもCSSでも可能と思いますが、選択結果を保持しておくのならスクリプト利用という事になるでしょう。
(上記では、ご提示のページに倣ってdiv要素としましたが、内容に応じてliやsectionでもかまいません。)
他の方法としては、「都度サーバーと通信して、次に表示する内容を取得して表示する」という方法も考えられます。
こちらであれば、状況に応じて順序を変えたり内容を変えたりもできますが、スクリプト使用が必須ですし、サーバー側での対応も必要になるのでハードルは高くなるでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画面遷移を行わずに同一ページでHTML表示を切り替えたい 3 2023/10/07 20:52
- HTML・CSS htmlで画面遷移させたい 1 2022/10/28 18:19
- ホームページ作成・プログラミング パスワードつきホームページ トップページ以下はどうなる 6 2022/08/16 12:04
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- フリーソフト WEBページなどでも、Excelのアクセスキーのような動作を実現する方法について。 3 2024/07/26 18:20
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- Java ショートカットキーについて 3 2024/01/03 08:15
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- Chrome(クローム) スマホのChromeはなぜ、進むボタンが無いのですか? 3 2023/02/07 23:36
- Chrome(クローム) マウスの右ボタンを押しながら左クリックで「戻る」などの設定する方法 1 2024/05/13 22:55
このQ&Aを見た人はこんなQ&Aも見ています
-


内定式が終わったのですが内定者が5名で社長の挨拶でスピーチを聞いたのですがずっと紙見て何回も噛んで内
就職
-


ホームページ リダイレクト設定場所について
ホームページ作成・プログラミング
-


動画編集をするときのusb使用に関して
画像編集・動画編集・音楽編集
-
-
4

クリック時に生成したものを削除することは可能でしょうか?
ホームページ作成・プログラミング
-
5

なぜ、飛行機の中で煙草を吸ってはいけないと決まっているんですか?
生活習慣・嗜好品
-
6

PCが常にBIOS画面が立ち上がってしまう
UNIX・Linux
-
7

Windows xp古いパソコン
その他(OS)
-
8

SSDの容量が少なすぎる
Windows 10
-
9

検索1位なのに依頼がない
SEO
-
10

c++の勉強方法を教えてくださいプログラミングをやった事がなく1から勉強を始めようと思います1日1時
C言語・C++・C#
-
11

vixアプリを使用してアルバムを作成したいのですが・・
ホームページ作成・プログラミング
-
12

会社でパソコンを4、5台買うのですが Microsoftアカウントとメールアドレス(Outlookな
グループウェア
-
13

一番安くて簡単な動画編集の方法
画像編集・動画編集・音楽編集
-
14

windows 10からwindows 7にバージョンダウンしたのですがインターネットに接続しません
Windows 10
-
15

悪質なクレーマーを出禁にする方法。 どうすれば良いでしょうか? 某ガソリンスタンドの副店長です。 先
会社・職場
-
16

最新のUSBケーブルで、高速データ転送ができません
Mac OS
-
17

動画を切り抜いてネットに上げる方法
画像編集・動画編集・音楽編集
-
18

WindowsはオープンソースではないのでマイクロソフトがWindowsにもしウイルスを仕込んでもバ
その他(コンピューター・テクノロジー)
-
19

ホームぺージ作り
ホームページ作成・プログラミング
-
20

PCのデスクトップ上に自分だけのランキングを作成したい
フリーソフト
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページを作ろうと思いま...
-
教えて!goo でいただいた回答を...
-
ホームページビルダー22でリン...
-
友達にドッキリをしたくて、ホ...
-
マウスオーバーすると色が変わ...
-
ホームページを作ろうかと
-
XREA使用で作成したHTMLファイ...
-
ホームページ作成に伴い、元デ...
-
ホームページビルダーを複数の...
-
ワードプレスで、画像の横に文...
-
【ホームページ作製】HPのWebペ...
-
無料のホームページを作成でき...
-
古いウェブ作成ソフト使ってる...
-
hpの画像の公開
-
会社のホームページをご自身で...
-
クリック時に生成したものを削...
-
ホームページ
-
ホームぺージ作り
-
ウエブサイトについて、詳しい...
-
クロムOSでhtmlを作成したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
教えて!goo でいただいた回答を...
-
ホームページの画面文字を濃く...
-
【ホームページ作製】HPのWebペ...
-
無料のホームページを作成でき...
-
FFFTPでサーバに新規フォルダが...
-
ホームページビルダーを複数の...
-
友達にドッキリをしたくて、ホ...
-
ホームページビルダー22でリン...
-
XREA使用で作成したHTMLファイ...
-
ホームページを作りたいのです...
-
ビルドとリビルドの違いを教え...
-
メールフォームで送信すると「...
-
ホームページビルダー19文字化け
-
Adobe FLASH に代わるソフトは...
-
新規サイトをGoogle検索に出る...
-
メールフォーム設置の文字化け...
-
CSSと無料掲示板を組み込んだサ...
-
ホームページビルダー11で作...
-
クロムOSでhtmlを作成したい
-
大学のサークルOB会のホーム...
おすすめ情報



















