こんにちは！！
手足の汗が止まらない🍞焼きたてパン（@kitchen-craft）です。
前回の記事では、新規ソリューションを作成し、テンプレートやフレームワークを選択して画面上に 『Welcome』 と表示させるところまで進めましたね！
前回の記事をまだお読みでない方は、以下のリンクからぜひ読み始めてもらえたらうれしいです！ 👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
🧭 目次
- 🎯 この記事の対象
- ✅ STEP 1：作成されたファイル構成を見てみよう！
- ✅ STEP 2：画面が表示されるまでの流れを追ってみよう！
- ✅ STEP 3：UIをカスタマイズしてみよう！
- 🎨 UIをカスタマイズしてみよう！！
🎯 この記事の対象
Visual Studioの開発画面って色々あってどこから触っていいのか分からん...
画面ってどう作るん？ HTMLで文字を出すだけでいいん？
多汗症の疑いあるし、とりあえず漢方薬買おう...
そんなあなた（＝未来の私）に向けて、今回はUIを作成するだけに集中します！ TODOアプリのコアな機能はちょっと置いておいて、まずは「見た目」を作るところから始めてみましょう。
🌟
余計なコードの海には飛び込まず、 「とりあえず表示されるって気持ちいい🌟」 っていう達成感を味わっていきます。
💬 途中で「ここよく分からん！」ってなったら、ぜひコメントしてください！
私が焼きたてのかぎり返信していきます🍞🔥
✅ STEP 1：作成されたファイル構成を見てみよう！
前回の最後では、以下のような画面で緑色の ▶ ボタン をクリックすることで自動的に画面が開き、「Welcome」という文字が表示されました。
この画面のままでは、どこのファイルをみれば実際のファイルやプログラムが記述されているかなどはわかりません（ ´;ω;｀)
フォルダやファイルなどは 『ソリューションエクスプローラー』 という項目で確認することができます👇👇
するとこんな感じの項目が表示されたかと思います📁
これは開発の進行表＆倉庫みたいなもので、ここからいろんな材料を取り出して、アプリというパンを焼いていきます🍞🔥
🏠 よく見かける住人たち
| 名前 | 説明 |
|---|---|
Connected Services |
外部のサービス（Azureやデータベースなど）とつなぐ設定場所。今回は使わないので “ふーん” と眺めておくだけでOK👌 |
Properties |
プロジェクト全体の設定ファイル（launchSettings.json など）が入ってる場所。「実行時にどの画面を出すか」などが決まってます🔧 |
wwwroot |
見た目に関する素材たち（CSSや画像）が置かれる場所。UIをオシャレにしたければここを活用🍃 |
Controllers |
MVCモデルの『C！』ページの動きをコントロールする人たち。データを取って画面に渡したりします🎮 |
Models |
MVCモデルの『M！』データ構造を定義するファイルたち。今回はあまり出番なし😴 |
Views |
MVCモデルの『V！』HTMLのように画面を作るファイル群。今回の主役！ 特に Views/Home/Index.cshtml をチェック✨ |
appsettings.json |
アプリの設定ファイル。データベース接続やログ出力などの情報をここで管理します📖 |
Program.cs |
アプリのエントリーポイント！どんなサービスを使うか、どんな設定を読み込むかを決める最重要ファイル🚪 |
それぞれのフォルダの中に、さらにファイルが格納されているけど、そこはまた説明していくので今回は『UI💻』に関することだけを説明していきます🍞
🧠 補足 1：そもそも「UI」って何？
UIは 「ユーザーインターフェース（User Interface）」 の略で、ユーザーがアプリと触れ合う“見た目👀”の部分を指します。 たとえば、TODOアプリでいうと…
- タスクを入力するテキストボックス🔳
- 登録ボタン🔘
- 登録されたタスクの一覧📅
- タスクを削除するボタン✖
などなど、目に見えて、マウスなどで触れられる部分が全部UIです！
👪ユーザーにとっては「中の処理」より「どこ押したら動くか」が最重要！ UIがわかりやすい＝アプリが>使いやすい＝褒められる（はず）🎉
🧠 補足 2：UIから作るメリットって？
初心者のうちは「データの保存」とか「複雑な処理」より、まず「見た目が動く感覚」をつかむことが大事！
UIから作るメリットとしては：
- ✨ すぐに動きを確認できて楽しい！（ボタン押せるってうれしい）
- 💡 処理の流れが目に見えてわかる
- 🧱 ロジックとUIを分けて考えやすくなる
- 🔥 モチベが上がる！（ここ大事！）
実は、現場の開発でもまずUIから組み立てていくケースって多いんです。 「とりあえず画面だけ作っちゃおう！」ってスタイルは、メンバー同士の認識合わせにも役立ちますし、動いている感があるとチーム全体のテンションも上がる！🚀
✅ STEP 2：画面が表示されるまでの流れを追ってみよう！
Visual Studioで ▶ ボタンを押すとブラウザが立ち上がり、画面に「Welcome」などが表示されましたね。 でもその裏で、アプリはちゃんとした手順で画面を用意してくれてるんです😃
🧩 ざっとした起動の流れ（MVCの基本）
Program.cs → コントローラー → ビュー → ブラウザに表示！
※MVCの基本としておきながら「MVCの"M"のモデルはどこ❓」となると思いますが！
モデルというのはデータを取り扱うもの📁となるため、画面に「Welcome」と表示するだけでは特に必要のない項目なのでした(´;ω;｀)
ただ絶対必要になるのでその時にちゃんと説明しやす👀
さて！見ての通り、C#（特に ASP.NET Core アプリケーション）では、すべての処理は 『Program.cs』 から始まります。 このファイルは、アプリの「エントリーポイント」であり、スタート地点とも言える場所です。
さっそく『Program.cs』をダブルクリックして中身を確認してみましょう👀
// アプリケーションの名前空間を定義（プロジェクト名と合わせるのが一般的）
namespace TODOApp
{
// アプリのエントリーポイントとなる Program クラス
public class Program
{
// Mainメソッド：C# アプリが最初に実行する処理（ここから始まる！）
public static void Main(string[] args)
{
// Web アプリの設定やサービスを構築するためのビルダーを生成
var builder = WebApplication.CreateBuilder(args);
// コントローラーとビュー（MVC）を使用できるようにDIにサービス登録
builder.Services.AddControllersWithViews();
// アプリケーション本体を構築して、各種設定にアクセス可能にする
var app = builder.Build();
// 本番環境でのエラーハンドリング設定（ユーザーに優しいエラーページ表示）
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error"); // 例外発生時の遷移先
app.UseHsts(); // HTTP Strict Transport Security を有効化（HTTPS強制）
}
// HTTP → HTTPS への自動リダイレクトを設定
app.UseHttpsRedirection();
// 静的ファイル（画像、CSS、JSなど）を読み込めるようにする
app.UseStaticFiles();
// ルーティングの設定：URLとコントローラーの紐づけを行う
app.UseRouting();
// 認証・認可の仕組みをアプリに組み込む（今回は未使用でもOK）
app.UseAuthorization();
// ルート設定：URLでアクセスされた時、どのコントローラー＆アクションを使うか
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
// 例： http://localhost/Home/Index → HomeController の Index() を呼び出し
// Web アプリケーションを起動（サーバーがここから立ち上がる！）
app.Run();
}
}
}
🧩 このコードの全体像を一言でいうと？
「ASP.NET Core MVC アプリの土台を作って、Webサーバーを起動するまでの流れをすべて定義しているファイル」です。
☞正直、なにやってるかよくわかんないっす。
というのも、最初の段階では「Program.cs」に何かを追加したり修正したりすることはほとんどなく、今後「必要に応じて追加していく」といったイメージなので、特に気にする必要はないかと思います。
ただぁあ！！！！！！！！！！！！（クソデカ低音ボイス👄）
起動の流れを理解していく上で、１つ見てほしい箇所があります👀
それがこれ👇👇👇
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
これは以下の意味があります。
name: "default"
- このルート設定の「名前」
- 複数ルートがある場合の識別子になるだけで、動作自体には直接関係しません。
pattern: "{controller=Home}/{action=Index}/{id?}"
これはURLの “形” を決めています。
| パート | 意味 |
|---|---|
{controller=Home} |
/Home のように指定されたとき、HomeController.cs を使う。未指定なら "Home" が使われる。 |
{action=Index} |
コントローラー内の Index メソッドを呼び出す。未指定なら "Index" に自動ルーティング。 |
{id?} |
任意のID（数字や文字列など）をURLで受け取れるようにする。? は「なくてもOK」の意味。 |
🎨 これがUIとどう関係するの？
このルート設定があることで、URLと画面（View）とのつながりが自動的に決まるんです✨ つまり、ユーザーがブラウザで / にアクセスすると…
１．HomeController.cs の Index() メソッドが実行されて
２．Views/Home/Index.cshtml が表示される！
🖼️ 画面の「入口案内板」みたいな役割をしているんですね！
例えば「X」や「Instagram」とかのSNSを使うときに、一番最初ってログインが必要になるけど、
「ログイン画面をデフォルトの画面に設定しておく」 っていうこともできる🌟
ではでは！上の説明では...
１．HomeController.cs の Index() メソッドが実行されて
２．Views/Home/Index.cshtml が表示される！
って説明の通り、最初の画面では現状 「HomeController.cs」 が呼ばれていることが分かったので、さっそく見に行ってみましょう！！
名前に「Controller」と書いてある通り、「Controllers」フォルダを見てみましょう！
すると、ありますねぇ！ありますねぇ！「HomeController.cs」！！
こちらをダブルクリックで見てみましょう！
同じく中身を見ていきましょう👀！
// エラー処理やログに使う機能たちを読み込む
using System.Diagnostics;
// ASP.NET Core MVC の基本機能（Controllerなど）を使うための名前空間
using Microsoft.AspNetCore.Mvc;
// View に渡すデータモデルの定義（今回は Error 表示用）
using TODOApp.Models;
// ここからコントローラーの定義！（今回は HomeController）
namespace TODOApp.Controllers
{
public class HomeController : Controller
{
// ログを記録するための仕組み（実行中の情報や例外を残したりできる）
private readonly ILogger<HomeController> _logger;
// コンストラクター（クラスが呼ばれたときに一度だけ実行される初期設定）
public HomeController(ILogger<HomeController> logger)
{
_logger = logger;
}
// 👀 "/Home/Index" にアクセスされたときに呼ばれるメソッド
// 画面（View）として Views/Home/Index.cshtml を表示するよ！
public IActionResult Index()
{
return View();
}
// 🔐 "/Home/Privacy" にアクセスされたときに呼ばれるメソッド
// プライバシーポリシーなどを表示する画面（デフォルトで用意されてるやつ）
public IActionResult Privacy()
{
return View();
}
// ⚠️ もしアプリ内でエラーが発生したら、このメソッドでエラーページを表示する
// ResponseCache 属性で「この画面はキャッシュしないで！」という指定をしてる
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
// エラー発生時に必要な情報（RequestId）を View に渡して表示
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
}
内容についてはコメントをつけてる通りの意味だけど、今回注目したいのは 「Index()」 というところ!!
public IActionResult Index()
{
return View();
}
🧁 public IActionResult Index() の役割とは？
ユーザーがアプリの /Home/Index にアクセスしたときに呼び出される 「最初の案内係」！」
「ようこそ！こちらがトップページですよ〜」と、HTML画面を渡してあげるのが仕事です。
またこのメソッドは、「Program.cs」のデフォルトでも指定されていた通り、
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
ここで指定されている controller=Home と action=Index の組み合わせが、 URL未指定（/）の場合でも HomeController の Index() を呼び出すようになっています。
そのため、起動時の最初のページとして起動するというわけなのです👀🌟
🧠 補足 3：View()って何が表示されるの？
『View()』 には特定の引数がなければ、規則的に
Views/Home/Index.cshtml
が表示されるという約束🎀があります。
つまり、
「HomeController の Index() メソッド → Views/Home/Index.cshtml」
という流れが自動でつながってるんです✨
🎨 よくある応用
return View("AnotherView");
👉 表示するビューを Index.cshtml 以外に切り替えたいときは、こうして名前を指定できます。
return View(model);
👉 View に渡したいデータがあるときは、引数にモデルを渡します。 たとえば、ToDo一覧やユーザー情報などを画面に表示するためです📦
※モデルについてはまた今度詳しく説明をします。
さて！！
『Index()』 で呼び出されるビューは、「 Views/Home/Index.cshtml 」にあることが分かりました。
いよいよこのファイルを開いて、UI部分をカスタマイズしていきましょう！
✅ STEP 3：UIをカスタマイズしてみよう！
それではさっそく
Views/Home/Index.cshtml
のファイルを開いてみましょう📁👀
@{
// Razor記法の「コードブロック」
// このページのタイトルを設定しています。ブラウザのタブなどに表示される部分ですね！
// この書き方についてはまた今度👍
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<!-- 画面中央に大きな見出しを表示します。「display-4」はBootstrapの見た目調整用のクラスです -->
<h1 class="display-4">Welcome</h1>
<!-- ASP.NET Core の公式ドキュメントへのリンクを紹介しています。
開発初心者の方はまずここから学習するのがオススメです！ -->
<p>
Learn about
<a href="https://learn.microsoft.com/aspnet/core">
building Web apps with ASP.NET Core
</a>.
</p>
</div>
HTMLやCSSの書き方については、今回の記事では省略させていただきますが、
よく理解されている方ではあれば、2つの点に気づくと思います(((ｕдｕ*)ｩﾝｩﾝ
🧠 補足 4：Razor記法って何？どうしてこんな書き方なの？
ASP.NET でページを作っていると、まず初めにこんなコードに目が行くかもしれません。
@{
ViewData["Title"] = "Home Page";
}
「この @{} って何？ なんでここにタイトルが書かれてるの？」
――そんな疑問が浮かんでもまったく不思議ではありません✨実際初見じゃ分かりませんし(´;ω;｀)
-----------------🌿 Razor構文の世界へようこそ -----------------
この書き方は、Razor（レイザー）というテンプレートエンジンの構文で、「HTMLの中にC#のコードを書くための記法」なんです。
❓テンプレートエンジンとは....
Webアプリを作っていると、「HTMLだけじゃ足りない…！プログラムの力を借りたい！」という場面がよくあります。
そこで登場するのが、テンプレートエンジンという仕組み！
🔧 役割をひとことで言うと…👫
🔹「静的なHTML」と 🔹「動的なプログラム（C#やJavaなど）」を
🔹自然に混ぜて使えるようにしてくれる仲介役👫です！
今回の場合でいうと...
- @{ ... } は Razorのコードブロック を意味します。
- HTMLとは別に、ページのロジックや変数、データの定義などをここで書けます。
- 中には C# のコードが自由に書けます！
例えば👇
@{
var now = DateTime.Now;
var userName = "ゲストさん";
}
このように、ページ内で使いたい値を準備したり、処理を組み立てたりできます。
🧭 ViewDataってなに？
その中で使われている
ViewData["Title"] = "Home Page";
は、ビュー側で使うデータを一時的に渡す仕組みです。
- ViewData は辞書のようなもの
- "Title" という名前で "Home Page" という値を登録している
- レイアウトやページの中で @ViewData["Title"] と書けば、表示できる！
つまり、「ページのタイトルをここで決めてるよ〜」という意味なんです🏷️
この書き方は実際にTODOアプリを作成していく過程で基本的な内容は説明しますので、とりあえずは
「こういう書き方があるんだなぁ～🖋」ぐらいの感じで大丈夫です🍞
🧠 補足 5：<html>とか<body>無くね...？
.cshtml ファイルを開くと、こんな感じで <html> や <head> や <body> が書かれていなくて、 いきなり
@{ ViewData["Title"] = "Home Page"; } とか <div> だけが並んでいて、「ん？これってHTMLじゃないの？」と思うかもしれません。
⚙ 実はこのファイル、画面の“部品”なんです！
これは ASP.NET Core の Razorビューが「レイアウト分離型」になっているからなんですね👀！
-----------------🧁 ページの土台は _Layout.cshtml にある！ -----------------
実はASP.NET MVC では、画面の共通レイアウト（HTMLのベース構造）は
Views/Shared/_Layout.cshtml
にまとめて記述されています。
コメントを付与してみたので、ざっくり見てみましょう👇👀
<!DOCTYPE html>
<html lang="en">
<head>
<!-- このページはHTML5で、言語は英語で記述するよ～って宣言！ -->
<meta charset="utf-8" />
<!-- モバイル対応のための魔法の1行。レスポンシブデザイン必須✨ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- タイトルはViewDataから動的に表示！Razorならではの書き方🧠 -->
<title>@ViewData["Title"] - TODOApp</title>
<!-- BootstrapのCSSを読み込んで、見た目を一瞬で整える💅 -->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<!-- サイト全体で使うスタイルシートを読み込むよ。バージョン管理もOK -->
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<!-- アプリ固有のスタイルもここで一括読み込み🎨 -->
<link rel="stylesheet" href="~/TODOApp.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<!-- ナビゲーションバーの定義。Bootstrapを使って見た目も機能もバッチリ◎ -->
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<!-- サイトのロゴやタイトル。クリックするとHomeに飛ぶ✨ -->
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">TODOApp</a>
<!-- スマホ対応のためのハンバーガーメニュー！ -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- メニュー項目たち。コントローラーとアクションでURL決定する仕組み🍴 -->
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- ページのメインコンテンツ部分 -->
<div class="container">
<main role="main" class="pb-3">
<!-- ここに個々の.cshtmlファイルの中身が挿入される！ -->
@RenderBody()
</main>
</div>
<!-- フッター。共通表示領域なのでここもレイアウト固定！ -->
<footer class="border-top footer text-muted">
<div class="container">
© 2025 - TODOApp - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<!-- 必要なJavaScriptたちを読み込む。jQuery＋Bootstrap＋自作スクリプト！ -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<!-- ページごとに任意のスクリプトを追加できるようにするスペース🧩 -->
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
🎨 なぜこんな仕組みにしてるの？
実はこの構造、すっごく便利で
- ✅ ヘッダーやフッターの共通部分は _Layout.cshtml に一括で書いておける
- ✅ 各ページは「中身」だけに集中して書ける（見た目のテンプレートにとらわれない）
- ✅ 変更があったとき、全ページに一気に反映できる！
つまり「パンの型（レイアウト）は1つ、具材（個別ビュー）は毎回選べる」仕組みですね🍞🥬
ちょっと何言ってるか分かんないけど👆
もちろん！
「この画面ではレイアウトを使いたくない！」とか
「この画面は違うレイアウトを使いたい！」とかにも柔軟に対応できるので、必要に応じて調べてみてください！（TODOアプリではレイアウトは１つで使用しますm(__)m）
🎨UIをカスタマイズしてみよう！！
さっそく『TODOアプリ』風な見た目に変更していきましょう！
先ほどの「Index.cshtml」を以下のhtmlに置き替えてみましょう👀🌟
※Bootstrapのスタイルを使用してます🍫
@{
// ページタイトルを設定
ViewData["Title"] = "TODOリスト管理";
}
<!-- ヘッダー：画面上部の見出しエリア -->
<header class="bg-primary text-white py-4 text-center">
<h1 class="display-5">TODOリスト管理</h1> <!-- 大きめのタイトル -->
</header>
<!-- メインコンテンツ：TODO一覧の表示部分 -->
<main class="container my-4">
<table class="table table-bordered table-hover">
<!-- テーブルのヘッダー部分 -->
<thead class="table-light">
<tr>
<th scope="col">✔️ 完了</th> <!-- チェックボックス -->
<th scope="col">📅 予定日</th> <!-- 日付 -->
<th scope="col">📝 内容</th> <!-- タスク内容 -->
</tr>
</thead>
<tbody>
<!-- 仮データ（本番ではループ処理などで出力） -->
<tr>
<td><input type="checkbox" class="form-check-input" /></td>
<td>2025-08-01</td>
<td>デザイン修正の確認</td>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input" /></td>
<td>2025-08-02</td>
<td>API連携のテスト</td>
</tr>
</tbody>
</table>
</main>
<!-- フッター：操作ボタン（登録・編集・削除）を配置 -->
<footer class="bg-light py-3 mt-auto">
<div class="container text-center">
<div class="btn-group" role="group">
<!-- 新規登録画面への遷移 -->
<a href="#" class="btn btn-success">＋ 登録</a>
<!-- 編集画面への遷移 -->
<a href="#" class="btn btn-warning">🛠 編集</a>
<!-- 削除画面への遷移 -->
<a href="#" class="btn btn-danger">🗑 削除</a>
</div>
</div>
</footer>
htmlを変更出来たら実行ボタンをクリックしてみましょう( ^)o(^ )
いかがですか！？
あくまで何の機能も実装していないただの画面ですが、こうしてUIが出来上がると、
「次は登録ボタンを実装しようかな？」
「項目をもっと増やしてみようかな？」
と頭の中にいろいろとやりたいこと、実装したいことなど浮かんできませんか？💡
今回の記事は以上になりますが、今回の内容を活かして
- index.cshtmlじゃなくて、違うhtmlをメインの画面にしたいな
- UIをもっと自分好みに変更してみようかな
- 漢方薬のんでも全然手足の汗とまらんのやけど...
など！自分でいろいろ考えて、広げていくことこそ上達の近道だと思いますので、いろんなことを試してみてください👀🌟
次回は、ソースからTODOリストのタスクを表示する仕組みを作っていきましょう🍞✨
🛠 このシリーズでは、以下の流れでTODOアプリを作っていきます：
1.✅ C#でTODOアプリを作る理由
2.🧰 Visual Studio 2022のインストールと開発環境構築
3.📝 ASP.NET Core MVCでTODOアプリ作成 ← 今回
4.🗃 データベース連携編
5.🎨 バリデーションやデザインの工夫 など
📘 次の記事はこちら 👇