記事詳細

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

ASP.NET Core 10 MVC で 印刷専用の CSS を組み込み、「印刷」ボタンでブラウザ印刷を呼び出すサンプルは簡単に作成できます。 以下は、Visual Studio でそのまま試せるシンプルな構成例です。

内容

ASP.NET Core 10 MVC で 印刷専用の CSS を組み込み、「印刷」ボタンでブラウザ印刷を呼び出すサンプルは簡単に作成できます。
以下は、Visual Studio でそのまま試せるシンプルな構成例です。

1. レイアウトまたは対象ビューに印刷用 CSS を読み込み
Views/Shared/_Layout.cshtml の <head> 内に追加します。

Html
<head>
    <meta charset="utf-8" />
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/css/site.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: 11pt;
    color: #000;
    background: #fff;
    margin: 20mm;
}

/* 表や画像の最適化 */
table {
    border-collapse: collapse;
    width: 100%;
}
table, th, td {
    border: 1px solid #000;
}

3. ビューに印刷ボタンを設置
例: Views/Home/Index.cshtml

Html
@{
    ViewData["Title"] = "印刷テスト";
}

<h1>印刷テストページ</h1>

<div>
    <p>この文章は印刷されます。</p>
    <p class="no-print">この文章は印刷時に非表示になります。</p>
</div>

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

4. 実装のポイント

  • media="print" を指定した CSS は印刷プレビューや印刷時のみ適用されます。
  • window.print() はブラウザの印刷ダイアログを直接呼び出します。
  • .no-print クラスを使えば、印刷時に不要なボタンやメニューを簡単に隠せます。

もしご希望であれば、このサンプルを HomeController 付きの最小 MVC プロジェクト構成 にして、Visual Studio で即動作確認できる形にまとめることもできます。
その形で作成しましょうか？

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