HTMLのファイルについて

簡単かもしれませんが失礼致します。

例 https://smilehomes-1.com/

こちらのサイトのようにHTMLが一つのファイルでできています。

なぜ次のページ用のHTMLファイルを作らなくても別のページに飛ぶのですか？？

階層ごとにhtmlファイルを作る時と、こちらのサイトのように一つのHTMｌファイルで作るときはどうわけているのですか？？？

m.ts10806

2021/07/07 03:38

「欲しい」とは？用途はなんでしょう。

m.ts10806

2021/07/07 03:39

やろうとしてることが、技術的には可能でも法律や規約上NGなことをやろうとしてるように見えなくもないです。そういった意味では簡単とかそういう問題ではない

Lhankor_Mhy

2021/07/07 03:42

その質問が表示された状態で Ctrl+S を押す、みたいな話でしょうか？

kimo

2021/07/07 04:13

もうしわけございません。。似たようなことで例として貼り付けました！かんちがいをさせてしまいすみません。。

m.ts10806

2021/07/07 04:17 編集

質問は編集できますので、誰が読んでも勘違いが起きないような内容に調整してください。というか、勘違いというと自身ではなく人のせいになってますし、そもそもどうしたいのか伝わる内容になってませんよ。どうなったら解決なのですか？

K_3578

2021/07/07 04:22

最初のそのなんだ、診断するみたいなボタンが設置されているページがあるのではなくて、最初からその選択肢が表示されている画面にしたいって事なんすかね

m.ts10806

2021/07/07 04:24

編集されたけど全く変わってないです。用途は？「ページだけにしたい」とはどういう状態？そもそもプログラミングに関係あるかどうかすら判断できません。

Lhankor_Mhy

2021/07/07 04:55

その質問が表示された状態で Ctrl+S を押して保存する、みたいな話でしょうか？

m.ts10806

2021/07/07 06:19

質問内容と解決に選ばれた回答とのつながりが全く見えないのですけど、どういうことですか？

Lhankor_Mhy

2021/07/07 06:19

質問の編集拝読。「SPA web」とか「Pjax」とかでググるといいかもしれません。ただ、ご提示のページの場合は、単純に質問部分を隠しておいて、ボタンを押したときに表示しているだけかと思います。

m.ts10806

2021/07/07 06:20

ああ、そうか。

m.ts10806

2021/07/07 06:26

ただ、質問内容が大きく変わってしまってるので、変える前についた回答に対する配慮は必須かと。超失礼です。

行動規範の内容に同意します

回答3件

例えばjQueryMobileの標準機能、data-role="page"みたいなことですよね。

単に見せ方だけの問題にも思います。

「ページ」の概念はサービスによりけりなので、そのページをどのように見せているかだけ。
スライドショーみたいな形にすれば何個も画面は必要ないですし、遷移の順番を半ば強制したい場合には有用ですね。

投稿2021/07/07 06:26

m.ts10806

総合スコア80875

ベストアンサー

こういうことでしょうか？

html+css+Javascript

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            height: 100vh;
            background-color: blue;
            margin: 0;
        }

        div {
            width: 100%;
            height: 100%;
            background-color: orange;
            position: absolute;
            top: 0;
        }

        .hide {
            display: none;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <button>オレンジのページ</button>
    <div class="hide target">
        <button>ブルーのページ</button>
    </div>
    <script>
        const button = document.getElementsByTagName("button");
        const target = document.getElementsByClassName("target")[0];

        button[0].addEventListener("click", () => {
            target.classList.remove("hide");
        });

        button[1].addEventListener("click", () => {
            target.classList.add("hide");
        });

    </script>
</body>

</html>