記事詳細

投稿日
2026年05月13日06時22分
タイトル

ASP.net(10.) Core MVC: Viewの表示でCSS の @media print で特定部分だけ印刷するプログラムのサンプルはありますか？

内容

はい、ASP.NET Core 10 MVC で View の表示時に CSS の @media print を使って特定部分だけ印刷するサンプルを作れます。
ASP.NET 側では特別な処理は不要で、Razor ビューに印刷用 CSS を書くだけで実現できます。
以下は 「#print-area」だけを印刷し、それ以外は非表示にする例です。

1. コントローラー例

Csharp
using Microsoft.AspNetCore.Mvc;

namespace PrintSample.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

2. View (Views/Home/Index.cshtml)

Cshtml
@{
    ViewData["Title"] = "印刷サンプル";
}

<style>
    /* 通常表示用スタイル */
    body {
        font-family: sans-serif;
        margin: 20px;
    }
    #print-area {
        border: 2px solid blue;
        padding: 20px;
        margin-top: 20px;
        background-color: #f0f8ff;
    }
    .other-content {
        border: 1px dashed gray;
        padding: 10px;
        margin-bottom: 10px;
        background-color: #f9f9f9;
    }

    /* 印刷時だけ適用されるスタイル */
    @media print {
        body * {
            visibility: hidden; /* まず全て非表示 */
        }
        #print-area, #print-area * {
            visibility: visible; /* 印刷対象だけ表示 */
        }
        #print-area {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
    }
</style>

<div class="other-content">
    <p>ここは印刷したくない部分です。</p>
</div>

<div id="print-area">
    <h1>印刷したいエリア</h1>
    <p>この部分だけが印刷されます。</p>
    <ul>
        <li>項目1</li>
        <li>項目2</li>
    </ul>
</div>

<div class="other-content">
    <p>ここも印刷しない部分です。</p>
</div>

<button onclick="window.print()">この部分だけ印刷</button>

3. 動作のポイント

  • @media print を使うことで、印刷時だけ CSS を切り替えられます。
  • body * { visibility: hidden; } で全要素を一旦非表示にし、
    #print-area, #print-area * { visibility: visible; } で印刷対象だけを再表示します。
  • position: absolute; left: 0; top: 0; で印刷時にページ左上に配置します。
  • ASP.NET Core MVC 側では特別な API 呼び出しは不要です。
    通常の Razor ビューに CSS を書くだけで動作します。

4. 別のシンプルな CSS 方法（display:none 方式）1

Css
@media print {
    *:not(#print-area):not(:has(#print-area)):not(#print-area *) {
        display: none;
    }
}

この方法だと visibility ではなく display:none を使うため、印刷対象以外は完全にレイアウトから除外されます。
テーブルや複雑なレイアウトでも崩れにくいです。

✅ このサンプルをそのまま ASP.NET Core MVC の View に貼り付ければ、
**「ボタンを押すと特定の部分だけ印刷」**が実現できます。

もし希望があれば、このサンプルを 部分ビュー（PartialView） にして、
複数ページで共通利用できる形にもできますが、作りますか？
そうすれば印刷対象の UI を共通化できます。

Powered by Froala Editor
添付画像
画像はありません
Genreのカテゴリ-名
Views
編集 | 記事一覧