記事詳細

投稿日

2026年01月02日03時13分

タイトル

ASP.NET MVC で「左側カラムに複数の Reference ページへのメニュー」

内容

以下は ASP.NET MVC のレイアウトページ（_Layout.cshtml）などで使える、Bootstrap を利用した「左側カラムに複数の Reference ページへのメニュー」を持つサンプル HTML コードです。

この例では Bootstrap 5 を使用し、左カラムに固定メニュー、右側にメインコンテンツを配置しています。

Cshtml
@* _Layout.cshtml の例 *@
@{
    Layout = null; // レイアウトファイル自身なので null
}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>@ViewBag.Title - My MVC App</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />

    <style>
        body {
            min-height: 100vh;
        }
        .sidebar {
            min-height: 100vh;
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
        }
        .sidebar .nav-link {
            color: #333;
        }
        .sidebar .nav-link.active {
            background-color: #0d6efd;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 左カラム（メニュー） -->
            <nav class="col-md-3 col-lg-2 d-md-block sidebar collapse">
                <div class="position-sticky pt-3">
                    <h6 class="px-3 mt-3 mb-2 text-muted">Reference Pages</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="@Url.Action("Index", "Reference1")">
                                Reference 1
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="@Url.Action("Index", "Reference2")">
                                Reference 2
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="@Url.Action("Index", "Reference3")">
                                Reference 3
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="@Url.Action("Index", "Reference4")">
                                Reference 4
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- メインコンテンツ -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4">
                @RenderBody()
            </main>
        </div>
    </div>

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

ポイント

Bootstrap Grid を使って左カラム（col-md-3 col-lg-2）と右カラム（col-md-9 col-lg-10）を分割。
@Url.Action("Index", "ReferenceX") で MVC のコントローラーとアクションにリンク。
.sidebar に固定高さ（min-height: 100vh）を設定して縦いっぱいに表示。
.active クラスで現在ページを強調表示可能。
Bootstrap の collapse を使えばモバイル時にメニューを折りたたみ可能。

もしご希望があれば、この左メニューを 部分ビュー（PartialView）化 して、複数ページで共通利用できるようにするサンプルも作れます。
そうすればメニューの更新が一箇所で済みます。

添付画像

画像はありません

Genreのカテゴリ-名

Htmls

編集 | 記事一覧