ページの作り方が知りたいです
下記の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で質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
10代と話して驚いたこと
先日10代の知り合いと話した際、フロッピーディスクの実物を見たことがない、と言われて驚きました。今後もこういうことが増えてくるのかと思うと不思議な気持ちです。
-
「平成」を感じるもの
「昭和レトロ」に続いて「平成レトロ」なる言葉が流行しています。 皆さんはどのようなモノ・コトに「平成」を感じますか?
-
【お題】引っかけ問題(締め切り10月27日(日)23時)
【大喜利】 「日本で一番高い山は富士山……ですが!」から始まった、それは当てられるわけ無いだろ!と思ったクイズの問題
-
【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
【お題】 ・買ったばかりの自転車を分解してひと言
-
好きな「お肉」は?
牛肉、豚肉、鶏肉、ラム肉、クマやシカの狩猟肉……。 いろ〜んな肉が食べられるようになりましたよね。 あなたがこれまで食べて「これはうまい!」とか「なんじゃこりゃ!」と好きになったお肉を教えてください。
-
ホームページ作成
ホームページ作成・プログラミング
-
内定式が終わったのですが内定者が5名で社長の挨拶でスピーチを聞いたのですがずっと紙見て何回も噛んで内
就職
-
クロムOSでhtmlを作成したい
ホームページ作成・プログラミング
-
-
4
動画編集をするときのusb使用に関して
画像編集・動画編集・音楽編集
-
5
キーフレーム
画像編集・動画編集・音楽編集
-
6
デジタルカレンダーでTo Do 事項や振り込みの完了を管理、過去行なったことを管理するには
グループウェア
-
7
ITの見積もりってなんであんなに高いんですか? 原価がかからないのに
その他(ソフトウェア)
-
8
Windows 10のサポート期限切れとともにパソコンの 大量廃棄が予想されているのでしょうか それ
Windows 10
-
9
白い被写体に対して白い背景の画像の背景を切り抜きたいです。 例えばですが、写真のような白い被写体に対
画像編集・動画編集・音楽編集
-
10
CGの映像業界に転職したいので作品を作るのですが、 レンダリングはMayaかUE5か、Blender
画像編集・動画編集・音楽編集
-
11
webデザインの勉強で、HTML/CSSから勉強するかPhotoshop/Illustratorかは
HTML・CSS
-
12
Androidを使ってることの意味やGmail を無料で使えるのかご教授ください。 情報はアメリカの
Android
-
13
このような画像をつくるにはどうしたら良いか?
画像編集・動画編集・音楽編集
-
14
なぜ、飛行機の中で煙草を吸ってはいけないと決まっているんですか?
生活習慣・嗜好品
-
15
乗っ取るってできるの?
その他(セキュリティ)
-
16
PCが常にBIOS画面が立ち上がってしまう
UNIX・Linux
-
17
HTMLについて教えてください。 WEBサイトの運営を行っているのですが、前任者が飛んでしまい引継ぎ
HTML・CSS
-
18
SSDの容量が少なすぎる
Windows 10
-
19
ホームページ リダイレクト設定場所について
ホームページ作成・プログラミング
-
20
検索1位なのに依頼がない
SEO
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【大喜利】【投稿~11/12】 急に朝起こしてきた母親に言われた一言とは?
- ・好きな和訳タイトルを教えてください
- ・うちのカレーにはこれが入ってる!って食材ありますか?
- ・好きな「お肉」は?
- ・あなたは何にトキメキますか?
- ・おすすめのモーニング・朝食メニューを教えて!
- ・「覚え間違い」を教えてください!
- ・とっておきの手土産を教えて
- ・「平成」を感じるもの
- ・秘密基地、どこに作った?
- ・【お題】NEW演歌
- ・カンパ〜イ!←最初の1杯目、なに頼む?
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・チョコミントアイス
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・あなたの習慣について教えてください!!
- ・ハマっている「お菓子」を教えて!
- ・高校三年生の合唱祭で何を歌いましたか?
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか?
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
既存画像(gif または png)の背...
-
ホームページビルダー15で作っ...
-
ホームページビルダーを複数の...
-
ビルドとリビルドの違いを教え...
-
FFFTPでサーバに新規フォルダが...
-
ホームページの画面文字を濃く...
-
友達にドッキリをしたくて、ホ...
-
ホームページビルダー21を教え...
-
大学のサークルOB会のホーム...
-
ホームページ リダイレクト設定...
-
vixアプリを使用してアルバムを...
-
ページの作り方が知りたいです ...
-
@niftyホームページ ffftp ファ...
-
無料で作成、更新できるホーム...
-
エクセルの数式について教えて...
-
エクセルの表を作ってるんですが
-
クロムOSでhtmlを作成したい
-
無料で使えるホームページを教...
-
ホームページを作ろうかと
-
メールフォーム設置の文字化け...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
既存画像(gif または png)の背...
-
ホームページ リダイレクト設定...
-
vixアプリを使用してアルバムを...
-
ページの作り方が知りたいです ...
-
ホームページの画面文字を濃く...
-
無料で作成、更新できるホーム...
-
@niftyホームページ ffftp ファ...
-
ホームページビルダーを複数の...
-
ホームページビルダー22でリン...
-
FFFTPでサーバに新規フォルダが...
-
ビルドとリビルドの違いを教え...
-
XREA使用で作成したHTMLファイ...
-
エクセルの数式について教えて...
-
大学のサークルOB会のホーム...
-
友達にドッキリをしたくて、ホ...
-
ホームページビルダー19文字化け
-
ホームページビルダー15で作っ...
-
Adobe FLASH に代わるソフトは...
-
ホームページを作りたいのです...
-
エクセルの表を作ってるんですが
おすすめ情報