記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true"><strong style="font-weight: 700;">ASP.NET Core MVC</strong> を使って、コントローラーとビューでシンプルな月間カレンダーを生成するサンプルを示します。<br>このサンプルは&nbsp;<strong style="font-weight: 700;">現在の月</strong> または指定された年月のカレンダーを HTML テーブルとして表示します。</p><h2 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px Roboto, Helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">1. モデル (<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Models/CalendarDay.cs</code>)</h2><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(240, 243, 255);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; display: inline-block; color: rgb(60, 81, 180);">Csharp</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px Roboto, Helvetica, sans-serif; background-color: rgb(217, 223, 251); border-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;"><span style="color: rgb(215, 58, 73);">using</span> System;

<span style="color: rgb(215, 58, 73);">namespace</span> <span style="color: rgb(111, 66, 193);">MvcCalendar.Models</span>
{
    <span style="color: rgb(106, 115, 125);">// 1日分の情報を保持するモデル</span>
    <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(215, 58, 73);">class</span> <span style="color: rgb(111, 66, 193);">CalendarDay</span>
    {
        <span style="color: rgb(215, 58, 73);">public</span> DateTime Date { <span style="color: rgb(215, 58, 73);">get</span>; <span style="color: rgb(215, 58, 73);">set</span>; }
        <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(227, 98, 9);">bool</span> IsCurrentMonth { <span style="color: rgb(215, 58, 73);">get</span>; <span style="color: rgb(215, 58, 73);">set</span>; }
        <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(227, 98, 9);">bool</span> IsToday { <span style="color: rgb(215, 58, 73);">get</span>; <span style="color: rgb(215, 58, 73);">set</span>; }
    }
}
</code></pre><h2 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px Roboto, Helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">2. コントローラー (<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Controllers/CalendarController.cs</code>)</h2><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(240, 243, 255);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; display: inline-block; color: rgb(60, 81, 180);">Csharp</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px Roboto, Helvetica, sans-serif; background-color: rgb(217, 223, 251); border-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;"><span style="color: rgb(215, 58, 73);">using</span> Microsoft.AspNetCore.Mvc;
<span style="color: rgb(215, 58, 73);">using</span> MvcCalendar.Models;
<span style="color: rgb(215, 58, 73);">using</span> System;
<span style="color: rgb(215, 58, 73);">using</span> System.Collections.Generic;
<span style="color: rgb(215, 58, 73);">using</span> System.Globalization;

<span style="color: rgb(215, 58, 73);">namespace</span> <span style="color: rgb(111, 66, 193);">MvcCalendar.Controllers</span>
{
    <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(215, 58, 73);">class</span> <span style="color: rgb(111, 66, 193);">CalendarController</span> : <span style="color: rgb(111, 66, 193);">Controller</span>
    {
        <span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">Index</span>(<span style="color: rgb(227, 98, 9);">int</span>? year, <span style="color: rgb(227, 98, 9);">int</span>? month)
        {
            <span style="color: rgb(106, 115, 125);">// 年月が指定されていない場合は現在の年月</span>
            <span style="color: rgb(215, 58, 73);">var</span> targetDate = <span style="color: rgb(215, 58, 73);">new</span> DateTime(
                year ?? DateTime.Today.Year,
                month ?? DateTime.Today.Month,
                <span style="color: rgb(0, 92, 197);">1</span>
            );

            <span style="color: rgb(215, 58, 73);">var</span> days = GenerateCalendar(targetDate);
            ViewBag.Year = targetDate.Year;
            ViewBag.Month = targetDate.Month;
            ViewBag.MonthName = targetDate.ToString(<span style="color: rgb(3, 47, 98);">&quot;MMMM&quot;</span>, CultureInfo.CurrentCulture);

            <span style="color: rgb(215, 58, 73);">return</span> View(days);
        }

        <span style="color: rgb(215, 58, 73);">private</span> List&lt;CalendarDay&gt; <span style="color: rgb(111, 66, 193);">GenerateCalendar</span>(DateTime targetDate)
        {
            <span style="color: rgb(215, 58, 73);">var</span> days = <span style="color: rgb(215, 58, 73);">new</span> List&lt;CalendarDay&gt;();

            <span style="color: rgb(106, 115, 125);">// 月初と月末</span>
            <span style="color: rgb(215, 58, 73);">var</span> firstDayOfMonth = <span style="color: rgb(215, 58, 73);">new</span> DateTime(targetDate.Year, targetDate.Month, <span style="color: rgb(0, 92, 197);">1</span>);
            <span style="color: rgb(215, 58, 73);">var</span> lastDayOfMonth = firstDayOfMonth.AddMonths(<span style="color: rgb(0, 92, 197);">1</span>).AddDays(<span style="color: rgb(0, 92, 197);">-1</span>);

            <span style="color: rgb(106, 115, 125);">// カレンダー開始日（週の初め：日曜日）</span>
            <span style="color: rgb(215, 58, 73);">var</span> startDate = firstDayOfMonth.AddDays(-(<span style="color: rgb(227, 98, 9);">int</span>)firstDayOfMonth.DayOfWeek);

            <span style="color: rgb(106, 115, 125);">// カレンダー終了日（週の終わり：土曜日）</span>
            <span style="color: rgb(215, 58, 73);">var</span> endDate = lastDayOfMonth.AddDays(<span style="color: rgb(0, 92, 197);">6</span> - (<span style="color: rgb(227, 98, 9);">int</span>)lastDayOfMonth.DayOfWeek);

            <span style="color: rgb(215, 58, 73);">for</span> (<span style="color: rgb(215, 58, 73);">var</span> date = startDate; date &lt;= endDate; date = date.AddDays(<span style="color: rgb(0, 92, 197);">1</span>))
            {
                days.Add(<span style="color: rgb(215, 58, 73);">new</span> CalendarDay
                {
                    Date = date,
                    IsCurrentMonth = date.Month == targetDate.Month,
                    IsToday = date.Date == DateTime.Today
                });
            }

            <span style="color: rgb(215, 58, 73);">return</span> days;
        }
    }
}
</code></pre><h2 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px Roboto, Helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">3. ビュー (<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Views/Calendar/Index.cshtml</code>)</h2><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(240, 243, 255);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; display: inline-block; color: rgb(60, 81, 180);">Razor</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px Roboto, Helvetica, sans-serif; background-color: rgb(217, 223, 251); border-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;">@model List&lt;MvcCalendar.Models.CalendarDay&gt;
@{
    ViewData[&quot;Title&quot;] = &quot;カレンダー&quot;;
    var weeks = Model.Chunk(7); // 1週間ごとに分割
}

&lt;h2&gt;@ViewBag.Year 年 @ViewBag.Month 月 (@ViewBag.MonthName)&lt;/h2&gt;

&lt;table border=&quot;1&quot; cellpadding=&quot;5&quot; style=&quot;border-collapse: collapse; text-align: center;&quot;&gt;
    &lt;thead&gt;
        &lt;tr style=&quot;background-color: #f0f0f0;&quot;&gt;
            &lt;th&gt;日&lt;/th&gt;
            &lt;th&gt;月&lt;/th&gt;
            &lt;th&gt;火&lt;/th&gt;
            &lt;th&gt;水&lt;/th&gt;
            &lt;th&gt;木&lt;/th&gt;
            &lt;th&gt;金&lt;/th&gt;
            &lt;th&gt;土&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        @foreach (var week in weeks)
        {
            &lt;tr&gt;
                @foreach (var day in week)
                {
                    var style = &quot;&quot;;
                    if (!day.IsCurrentMonth) style = &quot;color: #aaa;&quot;;
                    if (day.IsToday) style += &quot; background-color: yellow;&quot;;

                    &lt;td style=&quot;@style&quot;&gt;
                        @day.Date.Day
                    &lt;/td&gt;
                }
            &lt;/tr&gt;
        }
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;div style=&quot;margin-top: 10px;&quot;&gt;
    &lt;a href=&quot;@Url.Action(&quot;Index&quot;, new { year = ViewBag.Year, month = ViewBag.Month - 1 })&quot;&gt;前月&lt;/a&gt; |
    &lt;a href=&quot;@Url.Action(&quot;Index&quot;, new { year = ViewBag.Year, month = ViewBag.Month + 1 })&quot;&gt;次月&lt;/a&gt;
&lt;/div&gt;
</code></pre><h2 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px Roboto, Helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">4. 実行方法</h2><ol style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">新規 ASP.NET Core MVC プロジェクトを作成<pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(240, 243, 255);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; display: inline-block; color: rgb(60, 81, 180);">Bash</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px Roboto, Helvetica, sans-serif; background-color: rgb(217, 223, 251); border-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;">dotnet new mvc -n MvcCalendar
</code></pre></li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">上記の&nbsp;<strong style="font-weight: 700;">モデル</strong>,&nbsp;<strong style="font-weight: 700;">コントローラー</strong>,&nbsp;<strong style="font-weight: 700;">ビュー</strong> を追加</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Program.cs</code> /&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Startup.cs</code> はデフォルトのままでOK</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">実行<pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(240, 243, 255);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; display: inline-block; color: rgb(60, 81, 180);">Bash</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px Roboto, Helvetica, sans-serif; background-color: rgb(217, 223, 251); border-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;">dotnet run
</code></pre></li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">ブラウザで<pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(240, 243, 255);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; display: inline-block; color: rgb(60, 81, 180);">
</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px Roboto, Helvetica, sans-serif; background-color: rgb(217, 223, 251); border-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;">https://localhost:5001/Calendar
</code></pre>にアクセス</li></ol><h2 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px Roboto, Helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">特徴</h2><ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">現在日付を黄色でハイライト</strong></li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">前後の月の日付はグレー表示</strong></li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">前月・次月リンクで移動可能</strong></li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">週は日曜始まり</strong></li></ul><p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">もしご希望であれば、このカレンダーに&nbsp;<strong style="font-weight: 700;">イベント登録機能</strong> や&nbsp;<strong style="font-weight: 700;">Ajaxでの月切り替え</strong> を追加した拡張版も作成できます。<br>次はその拡張版を作りますか？</p><p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a></p>

添付画像

画像を変更

Back to List

//検索文：Editor内でHTMLコードをコピーさせる