🌊
読み物系ページHTMLテンプレ

2025/01/08に公開
HTML
tech
のつづき
ポイント
サイト用ヘッダ、フッタがあること
ページ用ヘッダがあること
レスポンシブ対応であること
CDN利用であること
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>読み物系サンプル</title>
  <!-- Google Fonts -->
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
    rel="stylesheet"
  />
  <!-- Bootstrap CSS -->
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
  <style>
    /* ベースフォントと背景 */
    body {
      font-family: "Roboto", sans-serif;
      background-color: #f5f7f9;
      margin: 0;
      padding: 0;
    }

    /* Flexboxでフッタ固定 */
    .page-wrapper {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .content-wrapper {
      flex: 1;
      display: flex;
    }

    /* ===== 全体ヘッダー ===== */
    .site-header {
      background: linear-gradient(135deg, #2c3e50, #3a6073);
      color: #fff;
      padding: 15px 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .site-header h1 {
      font-size: 1.5rem;
      margin: 0;
    }
    .site-header nav a {
      color: #fff;
      text-decoration: none;
      margin-right: 15px;
      transition: opacity 0.2s ease;
    }
    .site-header nav a:hover {
      opacity: 0.8;
    }

    /* ===== ページ固有のヘッダー ===== */
    .page-header {
      background-color: #e9ecef;
      padding: 15px 20px;
      margin-bottom: 0;
    }
    .page-header h2 {
      margin: 0 0 8px 0;
      font-size: 2rem;
    }
    .page-header p {
      margin: 0;
      color: #6c757d;
    }

    /* ===== ペインエリア ===== */
    .left-pane,
    .right-pane {
      padding: 10px;
      background-color: #fff;
      height: auto;
    }
    .left-pane {
      border-right: 1px solid #dee2e6;
    }
    .right-pane {
      border-left: 1px solid #dee2e6;
    }

    /* ===== メインコンテンツ ===== */
    .content {
      padding: 10px;
      background-color: #fff;
      margin: 0;
      flex: 1; /* 余ったスペースを占有 */
    }
    .content h1 {
      margin-top: 0;
      margin-bottom: 1rem;
    }
    .content section {
      margin-top: 1.5rem;
    }

    /* ===== フッター ===== */
    .footer {
      background-color: #2c3e50;
      color: #fff;
      text-align: center;
      padding: 15px 0;
    }
    .footer a {
      color: #fff;
      text-decoration: none;
      margin: 0 5px;
      transition: opacity 0.2s ease;
    }
    .footer a:hover {
      opacity: 0.8;
    }

    /* リンクの色など */
    a {
      color: #007bff;
      transition: color 0.2s ease;
    }
    a:hover {
      color: #0056b3;
      text-decoration: none;
    }


    /* レスポンシブ対応 */
    @media (max-width: 991px) { /* md: 992px未満で関連コンテンツを非表示 */
      .right-pane {
        display: none;
      }
      .content-wrapper {
        gap: 0; /* 隙間をなくす */
      }
      .left-pane {
        flex: 0 0 20%;
      }
      .content {
        flex: 1;
      }
    }

    @media (max-width: 768px) { /* sm: 768px未満で目次も非表示 */
      .left-pane {
        display: none;
      }
      .content-wrapper {
        gap: 0; /* 隙間をなくす */
      }
      .content {
        flex: 1;
      }
    }
  </style>
</head>
<body>
  <div class="page-wrapper">
    <!-- ===== サイト全体のヘッダー ===== -->
    <header class="site-header">
      <div class="container-fluid d-flex justify-content-between align-items-center">
        <h1 class="mb-0">サイトロゴ</h1>
        <nav>
          <a href="#">ホーム</a>
          <a href="#">ブログ</a>
          <a href="#">お問い合わせ</a>
        </nav>
      </div>
    </header>

    <!-- ===== ページ固有のヘッダー ===== -->
    <header class="page-header">
      <div class="container-fluid">
        <h2>読み物系ページ</h2>
        <p class="text-muted">
          記事やマニュアルを快適に閲覧できるよう設計されています。
        </p>
      </div>
    </header>

    <div class="content-wrapper container-fluid">
      <div class="row flex-grow-1">
        <!-- 左ペイン: ナビゲーション -->
        <nav class="col-md-2 left-pane">
          <h5 class="mb-3">コンテンツ/h5>
          <ul class="list-unstyled">
            <li><a href="#section1">セクション 1</a></li>
            <li><a href="#section2">セクション 2</a></li>
            <li><a href="#section3">セクション 3</a></li>
          </ul>
        </nav>

        <!-- 中央ペイン: メインコンテンツ -->
        <main class="col-md-8 content">
          <article>
            <h1>読み物系ページの例</h1>
            <p>
              これは読み物系ページのサンプルです。中央に主要なコンテンツが表示されます。
              必要に応じてスクロールしながら、セクションを読み進めてください。
            </p>
            <section id="section1">
              <h2>セクション 1</h2>
              <p>ここにはセクション 1 の内容が表示されます。</p>
            </section>
            <section id="section2">
              <h2>セクション 2</h2>
              <p>ここにはセクション 2 の内容が表示されます。</p>
            </section>
          </article>
        </main>

        <!-- 右ペイン: 関連コンテンツ -->
        <aside class="col-md-2 right-pane">
          <h5 class="mb-3">関連コンテンツ</h5>
          <ul class="list-unstyled">
            <li><a href="#">関連記事 1</a></li>
            <li><a href="#">関連記事 2</a></li>
          </ul>
        </aside>
      </div>
    </div>

    <!-- ===== サイト全体のフッター ===== -->
    <footer class="footer">
      <p class="mb-2">&copy; 2025 サイト名. All rights reserved.</p>
      <p>
        <a href="#">プライバシーポリシー</a> | 
        <a href="#">利用規約</a>
      </p>
    </footer>
  </div>

  <!-- Bootstrap JS -->
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
  ></script>
</body>
</html>
Discussion
