更新済み 2025年2月19日
共有:

HTMLとCSSの使用方法

This article was translated from English: Does it need improvement?
Translated
View the article in English

CSSの「screen」メディアタイプは、主にコンピュータ画面や類似のデバイスでの表示を目的としています。 「スクリーン」メディアタイプ用にスタイルが定義される場合、それはスクリーン上のウェブコンテンツの表示方法に影響を与え、ビジュアルデザインとインタラクティビティを強調します。

対照的に、CSS の「print」メディアタイプは印刷用に設計されています。 ウェブページが印刷されたときの表示を決定し、印刷ページ用にコンテンツを最適化することに重点を置きます。 この最適化には、印刷時に関係ない、または必要でない要素の調整、フォントサイズや余白の調節、削除や非表示が含まれる場合があります。


IronPDFを始めましょう

今日から無料トライアルでIronPDFをあなたのプロジェクトで使い始めましょう。

最初のステップ:
green arrow pointer


スクリーン&プリントCSSタイプ(CSS3)

IronPDFはC#でHTMLからPDFを生成し、デフォルトでスクリーンスタイルシートをPDFに簡単にレンダリングできます。 これは便利です。なぜなら、印刷用のスタイルシートは、画面用のスタイルシートに比べて、文書化が十分にされていないことが多く、使用されることも少なく、開発も進んでいないためです。

CSS3では、特定のCSSスタイルを印刷ドキュメント専用にレンダリングすることができますが、他のスタイルはウェブブラウザー向けに意図されています。 IronPDFはどちらでも動作するようにプログラムすることができます。

HTML に印刷スタイルシートを作成して適用する: 完璧な印刷スタイルシートを作成し適用する方法を学ぶ。

どのCSSメディアタイプが優れているかを言うのは非常に難しいです。なぜなら、それぞれのタイプは異なるユースケースを対象としているからです。 試行錯誤しながらそれぞれを試して、どれがあなたの要件に適しているか確認する価値があります。

印刷例1

スクリーン1の例


表のヘッダーを繰り返す

HTMLテーブルが複数のページにまたがる場合、CssMediaTypeプロパティをPdfCssMediaType.Printに設定します。 これにより、表ヘッダーが拡張された各ページの上部に繰り返されることが保証されます。 対照的に、PdfCssMediaType.Screen は Chrome にヘッダーを一度だけ印刷するように指示します。

Chromeがテーブルヘッダーを検出するようにするには、theadタグで囲む必要があります。 'tableHeader.html 例の繰り返しテーブルヘッダー' HTML ファイルを PDF にレンダリングして、その効果を確認しましょう。

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs
using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");
チャクニット・ビン

チャクニット・ビン

ソフトウェアエンジニア

 LinkedIn

ChaknithはIronXLとIronBarcodeで作業しています。彼はC#と.NETに深い専門知識を持ち、ソフトウェアの改善と顧客サポートを支援しています。ユーザーとの対話から得た彼の洞察は、より良い製品、文書、および全体的な体験に貢献しています。