SkyoceanHome
Home
Privacy
ダウンロード
SkyShop
Updated Information
チュートリアルコード集
References
記事編集
日付
ジャンルのカテゴリ―名
名前を選択して下さい。
Contexts
Controllers
Databases
Htmls
JavaScripts
Models
MVCTutorials
Others
Styles
Views
タイトル
内容の要旨
<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;">Bootstrapモーダル対応版</strong> の ASP.NET Core MVC 実装例です。<br><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">prompt</code> を廃止し、モーダルフォームで新規項目を追加できるようにしています。<br>これにより UX が向上し、バリデーションや入力補助も行いやすくなります。</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. モデル</h2><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.1); 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 data-bm="29" 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(248, 244, 241);"><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: normal !important; font-variant: normal !important; font-weight: 400 !important; font-stretch: 100% !important; line-height: 18px; font-family: roboto, helvetica, sans-serif !important; font-optical-sizing: auto !important; font-size-adjust: none !important; font-kerning: auto !important; font-feature-settings: normal !important; font-variation-settings: normal !important; font-language-override: normal !important; 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: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; block-size: 28px; gap: 2px; padding-inline: 10px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: clip; max-block-size: calc(1lh); padding-inline: 2px;">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);">public</span> <span style="color: rgb(215, 58, 73);">class</span> <span style="color: rgb(111, 66, 193);">PaymentType</span> { <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(227, 98, 9);">int</span> Id { <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);">string</span> Name { <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> ICollection<PaymentMethod> PaymentMethods { <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(215, 58, 73);">class</span> <span style="color: rgb(111, 66, 193);">PaymentMethod</span> { <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(227, 98, 9);">int</span> Id { <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);">string</span> Name { <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);">int</span> PaymentTypeId { <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> PaymentType PaymentType { <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. コントローラ</h2><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.1); 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 data-bm="30" 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(248, 244, 241);"><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: normal !important; font-variant: normal !important; font-weight: 400 !important; font-stretch: 100% !important; line-height: 18px; font-family: roboto, helvetica, sans-serif !important; font-optical-sizing: auto !important; font-size-adjust: none !important; font-kerning: auto !important; font-feature-settings: normal !important; font-variation-settings: normal !important; font-language-override: normal !important; 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: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; block-size: 28px; gap: 2px; padding-inline: 10px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: clip; max-block-size: calc(1lh); padding-inline: 2px;">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);">public</span> <span style="color: rgb(215, 58, 73);">class</span> <span style="color: rgb(111, 66, 193);">PaymentsController</span> : <span style="color: rgb(111, 66, 193);">Controller</span> { <span style="color: rgb(215, 58, 73);">private</span> <span style="color: rgb(215, 58, 73);">readonly</span> AppDbContext _context; <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(111, 66, 193);">PaymentsController</span>(AppDbContext context) { _context = context; } <span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">Create</span>() { ViewData[<span style="color: rgb(3, 47, 98);">"PaymentTypeId"</span>] = <span style="color: rgb(215, 58, 73);">new</span> SelectList(_context.PaymentTypes, <span style="color: rgb(3, 47, 98);">"Id"</span>, <span style="color: rgb(3, 47, 98);">"Name"</span>); ViewData[<span style="color: rgb(3, 47, 98);">"PaymentMethodId"</span>] = <span style="color: rgb(215, 58, 73);">new</span> SelectList(Enumerable.Empty<SelectListItem>()); <span style="color: rgb(215, 58, 73);">return</span> View(); } [<span style="color: rgb(0, 92, 197);">HttpPost</span>] <span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">AddPaymentType</span>(<span style="color: rgb(227, 98, 9);">string</span> name) { <span style="color: rgb(215, 58, 73);">if</span> (<span style="color: rgb(227, 98, 9);">string</span>.IsNullOrWhiteSpace(name)) <span style="color: rgb(215, 58, 73);">return</span> BadRequest(<span style="color: rgb(3, 47, 98);">"Name is required"</span>); <span style="color: rgb(215, 58, 73);">var</span> type = <span style="color: rgb(215, 58, 73);">new</span> PaymentType { Name = name.Trim() }; _context.PaymentTypes.Add(type); _context.SaveChanges(); <span style="color: rgb(215, 58, 73);">return</span> Json(<span style="color: rgb(215, 58, 73);">new</span> { id = type.Id, name = type.Name }); } [<span style="color: rgb(0, 92, 197);">HttpPost</span>] <span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">AddPaymentMethod</span>(<span style="color: rgb(227, 98, 9);">int</span> paymentTypeId, <span style="color: rgb(227, 98, 9);">string</span> name) { <span style="color: rgb(215, 58, 73);">if</span> (<span style="color: rgb(227, 98, 9);">string</span>.IsNullOrWhiteSpace(name)) <span style="color: rgb(215, 58, 73);">return</span> BadRequest(<span style="color: rgb(3, 47, 98);">"Name is required"</span>); <span style="color: rgb(215, 58, 73);">var</span> method = <span style="color: rgb(215, 58, 73);">new</span> PaymentMethod { Name = name.Trim(), PaymentTypeId = paymentTypeId }; _context.PaymentMethods.Add(method); _context.SaveChanges(); <span style="color: rgb(215, 58, 73);">return</span> Json(<span style="color: rgb(215, 58, 73);">new</span> { id = method.Id, name = method.Name }); } [<span style="color: rgb(0, 92, 197);">HttpGet</span>] <span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">GetPaymentMethods</span>(<span style="color: rgb(227, 98, 9);">int</span> paymentTypeId) { <span style="color: rgb(215, 58, 73);">var</span> methods = _context.PaymentMethods .Where(m => m.PaymentTypeId == paymentTypeId) .Select(m => <span style="color: rgb(215, 58, 73);">new</span> { id = m.Id, name = m.Name }) .ToList(); <span style="color: rgb(215, 58, 73);">return</span> Json(methods); } } </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. Create.cshtml</h2><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.1); 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 data-bm="31" 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(248, 244, 241);"><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: normal !important; font-variant: normal !important; font-weight: 400 !important; font-stretch: 100% !important; line-height: 18px; font-family: roboto, helvetica, sans-serif !important; font-optical-sizing: auto !important; font-size-adjust: none !important; font-kerning: auto !important; font-feature-settings: normal !important; font-variation-settings: normal !important; font-language-override: normal !important; font-size: 16px; display: inline-block; color: rgb(60, 81, 180);">Cshtml</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: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; block-size: 28px; gap: 2px; padding-inline: 10px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: clip; max-block-size: calc(1lh); padding-inline: 2px;">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 YourNamespace.Models.Payment <div class="form-group"> <label asp-for="PaymentTypeId"></label> <div class="input-group"> <select asp-for="PaymentTypeId" class="form-control" asp-items="@(ViewData["PaymentTypeId"] as SelectList)"></select> <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addTypeModal">＋</button> </div> </div> <div class="form-group"> <label asp-for="PaymentMethodId"></label> <div class="input-group"> <select asp-for="PaymentMethodId" class="form-control" asp-items="@(ViewData["PaymentMethodId"] as SelectList)"></select> <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addMethodModal">＋</button> </div> </div> <!-- 親追加モーダル --> <div class="modal fade" id="addTypeModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"><h5 class="modal-title">支払タイプ追加</h5></div> <div class="modal-body"> <input type="text" id="newTypeName" class="form-control" placeholder="タイプ名"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button> <button type="button" class="btn btn-primary" id="saveTypeBtn">保存</button> </div> </div> </div> </div> <!-- 子追加モーダル --> <div class="modal fade" id="addMethodModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"><h5 class="modal-title">支払方法追加</h5></div> <div class="modal-body"> <input type="text" id="newMethodName" class="form-control" placeholder="方法名"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button> <button type="button" class="btn btn-primary" id="saveMethodBtn">保存</button> </div> </div> </div> </div> @section Scripts { <script> $(function () { // 親変更時に子リスト更新 $('#PaymentTypeId').change(function () { var typeId = $(this).val(); $.getJSON('/Payments/GetPaymentMethods', { paymentTypeId: typeId }, function (data) { var $method = $('#PaymentMethodId'); $method.empty(); $.each(data, function (i, item) { $method.append($('<option>', { value: item.id, text: item.name })); }); }); }); // 親保存 $('#saveTypeBtn').click(function () { var name = $('#newTypeName').val(); if (!name) return; $.post('/Payments/AddPaymentType', { name: name }, function (data) { $('#PaymentTypeId').append($('<option>', { value: data.id, text: data.name, selected: true })); $('#PaymentTypeId').trigger('change'); $('#addTypeModal').modal('hide'); $('#newTypeName').val(''); }); }); // 子保存 $('#saveMethodBtn').click(function () { var typeId = $('#PaymentTypeId').val(); if (!typeId) { alert("先に支払タイプを選択してください"); return; } var name = $('#newMethodName').val(); if (!name) return; $.post('/Payments/AddPaymentMethod', { paymentTypeId: typeId, name: name }, function (data) { $('#PaymentMethodId').append($('<option>', { value: data.id, text: data.name, selected: true })); $('#addMethodModal').modal('hide'); $('#newMethodName').val(''); }); }); }); </script> } </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;">改良ポイント</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;">Bootstrapモーダル</strong>で新規追加 → 入力UIが改善され、バリデーションも容易</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;">Ajaxで即DB保存 → 保存後に <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);"><select></code> に反映し、選択状態に設定</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;">親変更時に子リストを自動更新</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);">.val('')</code> でリセットし、連続追加も可能</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;">この構成なら、</p><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;">親・子どちらもモーダルから追加可能</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;">保存後</li></ul><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コードをコピーさせる