記事詳細

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

ASP.net(10.) Core MVC: VisualStudio開発：Viewの表示を印刷専用のCSS を追加して「印刷」ボタンで印刷するプログラムのサンプルはありますか？

内容

はい、ASP.NET Core 10 MVC で 印刷専用の CSS を適用し、「印刷」ボタンで印刷できるサンプルは作れます。
以下はシンプルな例です。

1. View に印刷専用 CSS を追加
Views/Shared/_Layout.cshtml または対象の View に <link> を追加します。

Html
<head>
    <meta charset="utf-8" />
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/css/site.css" />
    <!-- 印刷専用CSS -->
    <link rel="stylesheet" href="~/css/print.css" media="print" />
</head>

2. 印刷専用 CSS (wwwroot/css/print.css)
印刷時だけ適用されるスタイルを記述します。

Css
/* 印刷時に不要な要素を非表示 */
header, nav, footer, .no-print {
    display: none !important;
}

/* 印刷用にフォントや余白を調整 */
body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
}

3. View に「印刷」ボタンを追加
例: Views/Home/Index.cshtml

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

<h1>印刷サンプルページ</h1>

<div>
    <p>この部分は印刷されます。</p>
    <p class="no-print">この部分は印刷されません。</p>
</div>

<button type="button" onclick="window.print()">印刷</button>

4. ポイント

  • media="print" を使うと印刷時だけ CSS が適用されます。
  • window.print() はブラウザの印刷ダイアログを開きます。
  • .no-print クラスを使えば印刷時に非表示にできます。

もしご希望なら、このサンプルを コントローラー付きの完全な ASP.NET Core MVC プロジェクト構成 にしてお渡しできます。
そうすれば Visual Studio でそのまま動かせますが、作りますか？

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