記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<div style="flex: 1 1 0%; display: flex; overflow: hidden; flex-direction: column; height: 368px; box-sizing: border-box; padding: 20px 20px 0px; color: rgb(0, 0, 0); font-family: roboto, helvetica, sans-serif; font-size: 14px; 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"><div style="display: flex; flex: 1 1 0%; position: relative; min-width: 0px; height: 256px; flex-direction: column;"><div tabindex="0" style="color: rgba(0, 0, 0, 0.8); padding: 0px; flex: 1 1 0%; font-size: 16px; line-height: 26px; font-weight: 400; overflow: auto; max-height: 420px;"><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;">結論として、<strong style="font-weight: 700;"><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">ViewBag.Labels</code> や <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">ViewBag.Data</code> は <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">RedirectToPage(&quot;Home/Index&quot;)</code> では利用できません</strong>。<br>理由は、<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">ViewBag</code>（および <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">ViewData</code>）は <strong style="font-weight: 700;">同一 HTTP リクエスト内のみ有効</strong>で、リダイレクトすると新しいリクエストが発生し、値が破棄されるためです。</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;">なぜ使えないのか</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;"><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;">ViewBag / ViewData</strong> は Controller から View へデータを渡すための一時的な仕組み。</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);">ViewData</code>（Dictionary）を利用しており、リクエスト終了とともに消える。</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);">RedirectToPage</code> や <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">RedirectToAction</code> は <strong style="font-weight: 700;">HTTP 302</strong> などで新しいリクエストを発生させるため、前回の ViewBag の値は存在しない。</li></ul><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;">リダイレクト後にデータを渡す方法</h2><h3 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; display: inline-block; font: 400 20px / 22px roboto, helvetica, sans-serif;">1. TempData を利用（短期保持）</h3><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;"><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">TempData</code> はリダイレクトを跨いでも値を保持できるため、チャート用データの受け渡しに適しています。</p><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;"><div data-bm="66" 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(243, 249, 254);"><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(11, 73, 127);">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(225, 240, 253); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !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(106, 115, 125);">// Controller側</span>
<span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">Chart</span>()
{
    TempData[<span style="color: rgb(3, 47, 98);">&quot;Labels&quot;</span>] = <span style="color: rgb(215, 58, 73);">new</span>[] { <span style="color: rgb(3, 47, 98);">&quot;Jan&quot;</span>, <span style="color: rgb(3, 47, 98);">&quot;Feb&quot;</span>, <span style="color: rgb(3, 47, 98);">&quot;Mar&quot;</span> };
    TempData[<span style="color: rgb(3, 47, 98);">&quot;Data&quot;</span>] = <span style="color: rgb(215, 58, 73);">new</span>[] { <span style="color: rgb(0, 92, 197);">10</span>, <span style="color: rgb(0, 92, 197);">20</span>, <span style="color: rgb(0, 92, 197);">30</span> };
    <span style="color: rgb(215, 58, 73);">return</span> RedirectToPage(<span style="color: rgb(3, 47, 98);">&quot;/Home/Index&quot;</span>);
}
</code></pre><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;"><div data-bm="67" 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(243, 249, 254);"><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(11, 73, 127);">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(225, 240, 253); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !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(106, 115, 125);">// Home/Index.cshtml</span>
@{
    <span style="color: rgb(215, 58, 73);">var</span> labels = TempData[<span style="color: rgb(3, 47, 98);">&quot;Labels&quot;</span>] <span style="color: rgb(215, 58, 73);">as</span> <span style="color: rgb(227, 98, 9);">string</span>[];
    <span style="color: rgb(215, 58, 73);">var</span> data = TempData[<span style="color: rgb(3, 47, 98);">&quot;Data&quot;</span>] <span style="color: rgb(215, 58, 73);">as</span> <span style="color: rgb(227, 98, 9);">int</span>[];
}
&lt;script&gt;
    <span style="color: rgb(215, 58, 73);">var</span> chartLabels = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(labels));
    <span style="color: rgb(215, 58, 73);">var</span> chartData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(data));
&lt;/script&gt;
</code></pre><h3 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; display: inline-block; font: 400 20px / 22px roboto, helvetica, sans-serif;">2. クエリ文字列やルートパラメータで渡す</h3><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;">小規模データなら URL に埋め込む方法も可能です。</p><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;"><div data-bm="68" 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(243, 249, 254);"><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(11, 73, 127);">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(225, 240, 253); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !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);">return</span> RedirectToPage(<span style="color: rgb(3, 47, 98);">&quot;/Home/Index&quot;</span>, <span style="color: rgb(215, 58, 73);">new</span> { labels = <span style="color: rgb(3, 47, 98);">&quot;Jan,Feb,Mar&quot;</span>, data = <span style="color: rgb(3, 47, 98);">&quot;10,20,30&quot;</span> });
</code></pre><h3 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; display: inline-block; font: 400 20px / 22px roboto, helvetica, sans-serif;">3. セッションを利用（長期保持）</h3><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;">複数ページや長期間保持する場合はセッションを使います。</p><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;"><div data-bm="69" 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(243, 249, 254);"><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(11, 73, 127);">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(225, 240, 253); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !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(106, 115, 125);">// 保存</span>
HttpContext.Session.SetString(<span style="color: rgb(3, 47, 98);">&quot;Labels&quot;</span>, JsonSerializer.Serialize(<span style="color: rgb(215, 58, 73);">new</span>[] { <span style="color: rgb(3, 47, 98);">&quot;Jan&quot;</span>, <span style="color: rgb(3, 47, 98);">&quot;Feb&quot;</span>, <span style="color: rgb(3, 47, 98);">&quot;Mar&quot;</span> }));
HttpContext.Session.SetString(<span style="color: rgb(3, 47, 98);">&quot;Data&quot;</span>, JsonSerializer.Serialize(<span style="color: rgb(215, 58, 73);">new</span>[] { <span style="color: rgb(0, 92, 197);">10</span>, <span style="color: rgb(0, 92, 197);">20</span>, <span style="color: rgb(0, 92, 197);">30</span> }));

<span style="color: rgb(106, 115, 125);">// 取得</span>
<span style="color: rgb(215, 58, 73);">var</span> labels = JsonSerializer.Deserialize&lt;<span style="color: rgb(227, 98, 9);">string</span>[]&gt;(HttpContext.Session.GetString(<span style="color: rgb(3, 47, 98);">&quot;Labels&quot;</span>));
<span style="color: rgb(215, 58, 73);">var</span> data = JsonSerializer.Deserialize&lt;<span style="color: rgb(227, 98, 9);">int</span>[]&gt;(HttpContext.Session.GetString(<span style="color: rgb(3, 47, 98);">&quot;Data&quot;</span>));
</code></pre><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;">✅ <strong style="font-weight: 700;">まとめ</strong></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;"><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);">ViewBag</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;">リダイレクト後に値を使いたい場合は <strong style="font-weight: 700;">TempData</strong>、<strong style="font-weight: 700;">クエリ文字列</strong>、<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;">データ量が多い場合は DB に保存して再取得する方が安全。</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;">もし必要であれば、<strong style="font-weight: 700;">TempData を使ってチャートデータを渡す ASP.NET Core MVC の完全動作サンプル</strong>を作成できます。<br>これを作成すれば、RedirectToPage 後でも確実にチャートが表示できます。</p><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;">次はこの完全サンプルコードを作成しますか？</p></div></div></div><div style="color: rgba(0, 0, 0, 0.6); border-top: 0px; margin: 0px 20px; padding: 0px 0px 20px; height: 36px; display: flex; align-items: center; position: relative; font-family: roboto, helvetica, sans-serif; font-size: 14px; 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;"><div style="flex: 1 1 0%; display: flex; gap: 8px; align-items: center;"><button type="button" title="Undo" tabindex="0" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 700 13px / 20px roboto, helvetica, sans-serif; background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !important; text-decoration: none !important; block-size: 38px; gap: 4px; padding-inline: 0px; aspect-ratio: 1 / 1; justify-content: center; border-radius: 8px;"><div data-visually-hidden="" 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); block-size: 1px; inline-size: 1px; border: 0px; clip-path: inset(50%); position: absolute; padding-inline: 4px;">Undo</div></button><button type="button" tabindex="-1" title="Redo" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 700 13px / 20px roboto, helvetica, sans-serif; background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: not-allowed; color: rgb(0, 0, 0) !important; text-decoration: none !important; opacity: 0.3; block-size: 38px; gap: 4px; padding-inline: 0px; aspect-ratio: 1 / 1; justify-content: center; border-radius: 8px;"><div data-visually-hidden="" 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); block-size: 1px; inline-size: 1px; border: 0px; clip-path: inset(50%); position: absolute; padding-inline: 4px;">Redo</div></button><button type="button" title="Copy" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 700 13px / 20px roboto, helvetica, sans-serif; background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !important; text-decoration: none !important; block-size: 38px; gap: 4px; padding-inline: 0px; aspect-ratio: 1 / 1; justify-content: center; border-radius: 8px;"><div data-visually-hidden="" 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); block-size: 1px; inline-size: 1px; border: 0px; clip-path: inset(50%); position: absolute; padding-inline: 4px;">Copy</div></button><button type="button" title="Export" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 700 13px / 20px roboto, helvetica, sans-serif; background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !important; text-decoration: none !important; block-size: 38px; gap: 4px; padding-inline: 0px; aspect-ratio: 1 / 1; justify-content: center; border-radius: 8px;"><div data-visually-hidden="" 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); block-size: 1px; inline-size: 1px; border: 0px; clip-path: inset(50%); position: absolute; padding-inline: 4px;">Export</div></button><div style="display: flex; z-index: 10; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; color: rgba(0, 0, 0, 0.6); width: 300px; min-height: 40px; max-height: 120px; position: absolute; box-sizing: border-box; bottom: 18px; border: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); left: 172px;"><br></div></div></div><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コードをコピーさせる