📑
ダッシュボード系ページ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 {
      padding: 10px;
      background-color: #fff;
      border-right: 1px solid #dee2e6;
    }

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

    /* ===== ダッシュボード上部の検索・フィルター ===== */
    .dashboard-topbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
      align-items: center;
    }

    .dashboard-topbar .form-control {
      min-width: 180px;
    }

    /* ===== カードレイアウト ===== */
    .dashboard-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .dashboard-card {
      background-color: #ffffff;
      border: 1px solid #dee2e6;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      width: calc(50% - 10px); /* 2列表示にする例 */
      padding: 20px;
    }

    .dashboard-card h4 {
      margin-bottom: 15px;
      font-size: 1.2rem;
    }

    .dashboard-card p {
      margin: 0 0 10px 0;
    }

    /* ===== フッター ===== */
    .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;
    }

    /* ===== トースト通知（今回は使用例のみ） ===== */
    .toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1050;
    }

    /* ===== レスポンシブ対応 ===== */
    @media (max-width: 768px) {
      .left-pane {
        display: none; /* 必要に応じてナビを隠す等 */
      }

      .dashboard-card {
        width: 100%;
      }
    }
  </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>
          <div class="mb-3">
            <label class="form-label">日付範囲</label>
            <input
              type="date"
              class="form-control mb-2"
              placeholder="開始日"
            />
            <input
              type="date"
              class="form-control"
              placeholder="終了日"
            />
          </div>
          <div class="mb-3">
            <label class="form-label">カテゴリ</label>
            <select class="form-select">
              <option value="">すべて</option>
              <option value="cat1">カテゴリ1</option>
              <option value="cat2">カテゴリ2</option>
              <option value="cat3">カテゴリ3</option>
            </select>
          </div>
          <button class="btn btn-primary w-100">検索</button>
        </nav>

        <!-- メインペイン: ダッシュボードコンテンツ -->
        <main class="col-md-10 content">
          <!-- トップバー: 検索やフィルタリング -->
          <div class="dashboard-topbar">
            <div class="input-group">
              <input
                type="text"
                class="form-control"
                placeholder="キーワードを入力"
              />
              <button class="btn btn-outline-secondary" type="button">
                検索
              </button>
            </div>
            <div>
              <select class="form-select">
                <option value="">すべてのステータス</option>
                <option value="status1">ステータス1</option>
                <option value="status2">ステータス2</option>
                <option value="status3">ステータス3</option>
              </select>
            </div>
            <button class="btn btn-secondary">フィルター適用</button>
          </div>

          <!-- ダッシュボードカード群（グラフ、リスト、統計などのサンプル） -->
          <div class="dashboard-cards">
            <div class="dashboard-card">
              <h4>売上状況</h4>
              <p>今月の売上: ¥1,200,000</p>
              <p>先月比: +5%</p>
              <!-- グラフのイメージやチャートJSなどの埋め込み可 -->
              <div
                style="
                  width: 100%;
                  height: 150px;
                  background-color: #f0f0f0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: #999;
                "
              >
                [グラフ表示領域]
              </div>
            </div>

            <div class="dashboard-card">
              <h4>ユーザー登録数</h4>
              <p>総登録者数: 10,200人</p>
              <p>本日の新規登録: 45人</p>
              <div
                style="
                  width: 100%;
                  height: 150px;
                  background-color: #f0f0f0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: #999;
                "
              >
                [グラフ表示領域]
              </div>
            </div>

            <div class="dashboard-card">
              <h4>在庫数</h4>
              <p>現在庫アイテム: 480点</p>
              <p>警告レベル（在庫切れ間近）: 12点</p>
              <div
                style="
                  width: 100%;
                  height: 150px;
                  background-color: #f0f0f0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: #999;
                "
              >
                [グラフ表示領域]
              </div>
            </div>

            <div class="dashboard-card">
              <h4>サポートチケット</h4>
              <p>オープン中: 8件</p>
              <p>本日解決: 2件</p>
              <div
                style="
                  width: 100%;
                  height: 150px;
                  background-color: #f0f0f0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: #999;
                "
              >
                [グラフ表示領域]
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>

    <!-- ===== サイト全体のフッター ===== -->
    <footer class="footer">
      <p class="mb-2">&copy; 2025 サイト名. All rights reserved.</p>
    </footer>
  </div>

  <!-- トースト通知（必要であれば利用） -->
  <div class="toast-container">
    <div
      id="successToast"
      class="toast"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      data-bs-delay="3000"
    >
      <div class="toast-header">
        <strong class="me-auto text-success">成功</strong>
        <small>今</small>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="toast"
          aria-label="閉じる"
        ></button>
      </div>
      <div class="toast-body">操作が完了しました。</div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
  ></script>
  <script>
    // トースト表示サンプル
    function showSuccessToast() {
      const toastElement = document.getElementById("successToast");
      const toast = new bootstrap.Toast(toastElement);
      toast.show();
    }
  </script>
</body>

</html>
Discussion
