<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>1ファイル2ページ構成</title>
  <style>
    .page {
      display: none;
    }
    .active {
      display: block;
    }
    button {
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <!-- 最初のページ -->
  <div id="page1" class="page active">
    <h1>ようこそ！</h1>
    <p>こちらのボタンをクリックすると2ページ目が表示されます。</p>
    <button onclick="showPage('page2')">2ページ目へ移動</button>
  </div>

  <!-- 2ページ目 -->
  <div id="page2" class="page">
    <h1>これは2ページ目です！</h1>
    <button onclick="showPage('page1')">最初のページに戻る</button>
  </div>

  <script>
    function showPage(pageId) {
      document.querySelectorAll('.page').forEach(page => {
        page.classList.remove('active');
      });
      document.getElementById(pageId).classList.add('active');
    }