画面構成サンプル集 — agreen コーディングガイドライン

LIST

一覧画面の構成概要

iページヘッダー → 検索絞り込みカード → テーブルカードの3段構成が標準です。

レイアウトプレビュー

企業管理一覧

①

企業名

業種

ステータス

56 件

企業名	業種	登録日	ステータス
株式会社サンプル	IT	2024/01/10	公開中
テスト工業	製造	2024/02/05	審査中
デモ商事	商社	2024/03/20	停止

1検索絞り込みカード（card）
2テーブルカード（card）
3ページャー・件数表示

骨格コード

<div class="container-fluid">
  <div class="row g-3">

    <!-- ページヘッダー -->
    <div class="col-12">
      <div class="card">
        <div class="card-header d-flex
         justify-content-between align-items-center">
          <h5 class="mb-0">企業管理</h5>
          <a href="#" class="btn btn-falcon-primary btn-sm">
            新規登録
          </a>
        </div>
      </div>
    </div>

    <!-- ① 検索絞り込みカード -->
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <!-- 絞り込みフォーム -->
        </div>
      </div>
    </div>

    <!-- ② テーブルカード -->
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <!-- 件数・操作ボタン -->
        </div>
        <div class="card-body p-0">
          <!-- テーブル -->
        </div>
      </div>
    </div>

  </div>
</div>

LIST

絞り込みエリアの作り方

プレビュー

企業名

業種

ステータス

1row g-2 align-items-end で横並び・下揃え
2入力幅は col-12 col-lg-3 等で均等割
3ボタンは右端 col-lg-auto または ms-auto

HTML

絞り込みカード内

<div class="card-body">
  <div class="row g-2 align-items-end">

    <!-- テキスト検索 -->
    <div class="col-12 col-lg-3">
      <label class="form-label fs--1 mb-1">企業名</label>
      <input type="text"
             class="form-control form-control-sm"
             placeholder="企業名で検索">
    </div>

    <!-- セレクト -->
    <div class="col-12 col-lg-3">
      <label class="form-label fs--1 mb-1">業種</label>
      <select class="form-select form-select-sm">
        <option value="">すべて</option>
        <option>IT</option>
        <option>製造</option>
      </select>
    </div>

    <!-- ステータス -->
    <div class="col-12 col-lg-3">
      <label class="form-label fs--1 mb-1">ステータス</label>
      <select class="form-select form-select-sm">
        <option value="">すべて</option>
        <option>公開中</option>
        <option>停止</option>
      </select>
    </div>

    <!-- ボタン群 -->
    <div class="col-12 col-lg-auto ms-lg-auto">
      <div class="d-flex gap-2">
        <button class="btn btn-falcon-default btn-sm">
          リセット
        </button>
        <button class="btn btn-falcon-primary btn-sm">
          絞り込み
        </button>
      </div>
    </div>

  </div>
</div>

ポイントラベルには form-label fs--1 mb-1 を使い、入力エリアより一回り小さく表示する。
ポイント入力は form-control-sm / form-select-sm で統一。管理画面は small サイズが標準。
ポイントボタンエリアは col-lg-auto ms-lg-auto で PC 時のみ右端に押し出す。スマホは自然に折り返す。

LIST

テーブルカードの作り方

プレビュー

56 件

企業名	業種	登録日	ステータス
株式会社サンプル	IT	2024/01/10	公開中
テスト工業	製造	2024/02/05	審査中
デモ商事	商社	2024/03/20	停止

HTML

テーブルカード

<div class="card">

  <!-- ヘッダー：件数 + 操作 -->
  <div class="card-header d-flex
   justify-content-between align-items-center">
    <span class="fs--1 text-muted">56 件</span>
    <button class="btn btn-falcon-default btn-sm">
      CSV出力
    </button>
  </div>

  <!-- テーブル（p-0でカード内余白をなくす） -->
  <div class="card-body p-0">
    <table class="table table-hover mb-0 fs--1">
      <thead><tr>
        <th>企業名</th>
        <th>業種</th>
        <th>登録日</th>
        <th>ステータス</th>
        <th>操作</th>
      </tr></thead>
      <tbody>
        <tr>
          <td>株式会社サンプル</td>
          <td>IT</td>
          <td>2024/01/10</td>
          <td>
            <span class="badge rounded-pill
             bg-soft-success text-success">公開中</span>
          </td>
          <td>
            <div class="d-flex gap-1">
              <a href="#" class="btn btn-falcon-default btn-sm"
                 data-bs-toggle="tooltip" title="詳細">
                <span class="fas fa-eye"></span>
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

ポイントテーブルを含む card-body には p-0 を追加し、テーブルの端をカードの縁まで広げる。
ポイントテーブルには table table-hover mb-0 fs--1 を標準セットとして付与する。
ポイントステータスバッジは badge rounded-pill bg-soft-{color} text-{color} のセットで表現する。
ポイント行内の操作ボタンはアイコン＋ data-bs-toggle="tooltip" でラベルを省スペース化する。

LIST

一覧画面 — 全体コード

<div class="container-fluid">
  <div class="row g-3">

    <!-- ページヘッダー -->
    <div class="col-12">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">企業管理</h5>
          <a href="create/" class="btn btn-falcon-primary btn-sm">新規登録</a>
        </div>
      </div>
    </div>

    <!-- 絞り込みカード -->
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <div class="row g-2 align-items-end">
            <div class="col-12 col-lg-3">
              <label class="form-label fs--1 mb-1">企業名</label>
              <input type="text" class="form-control form-control-sm">
            </div>
            <div class="col-12 col-lg-3">
              <label class="form-label fs--1 mb-1">ステータス</label>
              <select class="form-select form-select-sm">
                <option value="">すべて</option>
              </select>
            </div>
            <div class="col-12 col-lg-auto ms-lg-auto">
              <div class="d-flex gap-2">
                <button class="btn btn-falcon-default btn-sm">リセット</button>
                <button class="btn btn-falcon-primary btn-sm">絞り込み</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- テーブルカード -->
    <div class="col-12">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <span class="fs--1 text-muted">56 件</span>
          <button class="btn btn-falcon-default btn-sm">CSV出力</button>
        </div>
        <div class="card-body p-0">
          <table class="table table-hover mb-0 fs--1">
            <thead><tr>
              <th>企業名</th><th>業種</th><th>登録日</th>
              <th>ステータス</th><th>操作</th>
            </tr></thead>
            <tbody>
              <tr>
                <td>株式会社サンプル</td>
                <td>IT</td>
                <td>2024/01/10</td>
                <td><span class="badge rounded-pill bg-soft-success text-success">公開中</span></td>
                <td>
                  <a href="detail/" class="btn btn-falcon-default btn-sm"
                     data-bs-toggle="tooltip" title="詳細">
                    <span class="fas fa-eye"></span>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
</div>

DETAIL

詳細画面の構成概要

i左8カラム（メイン情報）＋右4カラム（サブ情報）の2カラム構成が標準。カードを縦に積み重ねてセクションを分ける。

レイアウトプレビュー

企業詳細

基本情報

企業名

株式会社サンプル

業種

IT

代表者

山田太郎

設立年

2010年

連絡先

住所

東京都渋谷区

電話番号

03-XXXX-XXXX

ステータス

公開中

登録日

2024/01/10

更新日

2024/03/05

求人数

12

件

左col-12 col-lg-8 — メイン情報カードを縦に積む
右col-12 col-lg-4 — ステータス・数値サマリー等

骨格コード

<div class="container-fluid">
  <div class="row g-3">

    <!-- ページヘッダー -->
    <div class="col-12">
      <div class="card">
        <div class="card-header d-flex
         justify-content-between align-items-center">
          <h5 class="mb-0">企業詳細</h5>
          <div class="d-flex gap-2">
            <a href="edit/" class="btn btn-falcon-default btn-sm">編集</a>
            <a href="../" class="btn btn-falcon-default btn-sm">戻る</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 左：メイン情報 -->
    <div class="col-12 col-lg-8">
      <!-- カードを縦に積む -->
      <div class="card mb-3">
        <div class="card-header"><h6 class="mb-0">基本情報</h6></div>
        <div class="card-body">...</div>
      </div>
      <div class="card">
        <div class="card-header"><h6 class="mb-0">連絡先</h6></div>
        <div class="card-body">...</div>
      </div>
    </div>

    <!-- 右：サブ情報 -->
    <div class="col-12 col-lg-4">
      <div class="card mb-3">
        <div class="card-header"><h6 class="mb-0">ステータス</h6></div>
        <div class="card-body">...</div>
      </div>
    </div>

  </div>
</div>

DETAIL

メインカード内のラベル・値の表示

プレビュー

基本情報

企業名

株式会社サンプル

業種

IT・インターネット

代表者名

山田太郎

設立年

2010年

事業内容

クラウドサービスの開発・提供。SaaSプロダクトを中心に国内外へ展開。

HTML

ラベル・値ペア

<div class="card-body">

  <!-- 2カラムグリッドで情報を並べる -->
  <div class="row g-3">
    <div class="col-12 col-lg-6">
      <p class="mb-1 text-muted fs--1">企業名</p>
      <p class="mb-0 fw-semi-bold">株式会社サンプル</p>
    </div>
    <div class="col-12 col-lg-6">
      <p class="mb-1 text-muted fs--1">業種</p>
      <p class="mb-0">IT・インターネット</p>
    </div>
  </div>

  <hr class="my-3">

  <!-- 全幅テキスト項目 -->
  <p class="mb-1 text-muted fs--1">事業内容</p>
  <p class="mb-0">
    クラウドサービスの開発・提供。
  </p>

</div>

ポイントラベルは text-muted fs--1（灰色・小さめ）、値は fw-semi-bold または通常ウェイトで表示。
ポイントセクション区切りには hr class="my-3" を使いシンプルに分ける。

DETAIL

詳細画面 — 全体コード

<div class="container-fluid">
  <div class="row g-3">

    <!-- ページヘッダー -->
    <div class="col-12">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">企業詳細</h5>
          <div class="d-flex gap-2">
            <a href="edit/" class="btn btn-falcon-default btn-sm">編集</a>
            <a href="../"  class="btn btn-falcon-default btn-sm">戻る</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 左：メイン情報 (col-lg-8) -->
    <div class="col-12 col-lg-8">
      <div class="card mb-3">
        <div class="card-header"><h6 class="mb-0">基本情報</h6></div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-12 col-lg-6">
              <p class="mb-1 text-muted fs--1">企業名</p>
              <p class="mb-0 fw-semi-bold">株式会社サンプル</p>
            </div>
            <div class="col-12 col-lg-6">
              <p class="mb-1 text-muted fs--1">業種</p>
              <p class="mb-0">IT・インターネット</p>
            </div>
          </div>
          <hr class="my-3">
          <p class="mb-1 text-muted fs--1">事業内容</p>
          <p class="mb-0">クラウドサービスの開発・提供。</p>
        </div>
      </div>
    </div>

    <!-- 右：サブ情報 (col-lg-4) -->
    <div class="col-12 col-lg-4">
      <div class="card mb-3">
        <div class="card-header"><h6 class="mb-0">ステータス</h6></div>
        <div class="card-body">
          <span class="badge rounded-pill bg-soft-success text-success">公開中</span>
          <hr class="my-2">
          <p class="mb-1 text-muted fs--1">登録日</p>
          <p class="mb-0">2024/01/10</p>
        </div>
      </div>
    </div>

  </div>
</div>

EDIT

編集画面の構成概要

✓フォームカードを縦に積む1カラム構成が基本。カード末尾に保存ボタンを右揃えで配置する。

プレビュー

企業編集

基本情報

企業名 *

業種

代表者名

設立年

事業内容

骨格コード

<div class="container-fluid">
  <div class="row g-3">

    <!-- ページヘッダー -->
    <div class="col-12">
      <div class="card">
        <div class="card-header d-flex
         justify-content-between align-items-center">
          <h5 class="mb-0">企業 編集</h5>
          <a href="../" class="btn btn-falcon-default btn-sm">戻る</a>
        </div>
      </div>
    </div>

    <!-- フォームカード（1カラム） -->
    <div class="col-12">
      <div class="card">
        <div class="card-header"><h6 class="mb-0">基本情報</h6></div>
        <div class="card-body">
          <!-- フォーム本体 -->
        </div>
        <!-- カード末尾：保存ボタン -->
        <div class="card-footer d-flex
         justify-content-end gap-2">
          <a href="../" class="btn btn-falcon-default btn-sm">キャンセル</a>
          <button type="submit" class="btn btn-falcon-primary btn-sm">保存する</button>
        </div>
      </div>
    </div>

  </div>
</div>

EDIT

フォームカード内部の作り方

プレビュー

企業名 *

業種

代表者名

電話番号

事業内容

1横2列は row g-3 + col-12 col-lg-6 で並べる
2必須項目は <span class="text-danger">*</span> をラベル末尾に付与
3テキストエリアは col-12 で全幅

HTML

card-body 内部

<div class="card-body">
  <div class="row g-3">

    <!-- 横2列入力 -->
    <div class="col-12 col-lg-6">
      <label class="form-label fs--1">
        企業名 <span class="text-danger">*</span>
      </label>
      <input type="text"
             class="form-control form-control-sm"
             required>
    </div>

    <div class="col-12 col-lg-6">
      <label class="form-label fs--1">業種</label>
      <select class="form-select form-select-sm">
        <option value="">選択してください</option>
        <option>IT</option>
      </select>
    </div>

    <!-- 全幅テキストエリア -->
    <div class="col-12">
      <label class="form-label fs--1">事業内容</label>
      <textarea class="form-control form-control-sm"
                rows="4"></textarea>
    </div>

  </div>
</div>

<!-- card-footer に保存ボタン -->
<div class="card-footer d-flex justify-content-end gap-2">
  <a href="../" class="btn btn-falcon-default btn-sm">
    キャンセル
  </a>
  <button type="submit"
          class="btn btn-falcon-primary btn-sm">
    保存する
  </button>
</div>

ポイントフォーム入力は form-control-sm / form-select-sm で統一（管理画面は small が標準）。
ポイント保存ボタンは card-footer に置き justify-content-end で右揃え。ページ最下部で迷わない位置に固定する。
ポイント必須項目の * は text-danger で赤表示し、バリデーションは was-validated クラスで Bootstrap 5 標準を活用する。

EDIT

編集画面 — 全体コード

<div class="container-fluid">
  <form method="post">
    <div class="row g-3">

      <!-- ページヘッダー -->
      <div class="col-12">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">企業 編集</h5>
            <a href="../" class="btn btn-falcon-default btn-sm">戻る</a>
          </div>
        </div>
      </div>

      <!-- フォームカード：基本情報 -->
      <div class="col-12">
        <div class="card">
          <div class="card-header"><h6 class="mb-0">基本情報</h6></div>
          <div class="card-body">
            <div class="row g-3">
              <div class="col-12 col-lg-6">
                <label class="form-label fs--1">企業名 <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control form-control-sm" required>
              </div>
              <div class="col-12 col-lg-6">
                <label class="form-label fs--1">業種</label>
                <select name="industry" class="form-select form-select-sm">
                  <option value="">選択してください</option>
                  <option>IT</option>
                  <option>製造</option>
                </select>
              </div>
              <div class="col-12">
                <label class="form-label fs--1">事業内容</label>
                <textarea name="description"
                          class="form-control form-control-sm"
                          rows="4"></textarea>
              </div>
            </div>
          </div>
          <div class="card-footer d-flex justify-content-end gap-2">
            <a href="../" class="btn btn-falcon-default btn-sm">キャンセル</a>
            <button type="submit" class="btn btn-falcon-primary btn-sm">保存する</button>
          </div>
        </div>
      </div>

    </div>
  </form>
</div>