回答:
CSSで、次のように@pageプロパティを設定できます。
@media print{@page {size: landscape}}@pageはの一部であるCSS 2.1仕様しかし、これはsizeという疑問への答えによって強調されていない{：風景サイズ}廃止されました@Page？：
CSS 2.1はsize属性を指定しなくなりました。CSS3 Paged Mediaモジュールの現在のワーキングドラフトはそれを指定しています（ただし、これは標準ではなく、受け入れられていません）。
前述のように、サイズオプションはCSS 3 Draft Specificationに基づいています。理論的には、サンプルではサイズが省略されていますが、ページサイズと向きの両方に設定できます。
このサポートは、Firefoxに提出されたバグレポートと非常に混ざり合っています。ほとんどのブラウザではサポートされていません。
IE7では機能しているように見えるかもしれませんが、これはIE7がユーザーに印刷プレビューで横または縦の最後の選択を記憶するためです（ブラウザーのみが再起動されます）。
この記事には、ユーザーのブラウザーにキーを送信するJavaScriptまたはActiveXを使用した推奨回避策がいくつかありますが、理想的ではなく、ブラウザーのセキュリティ設定の変更に依存しています。
あるいは、ページの向きではなくコンテンツを回転させることもできます。これは、スタイルを作成して、これらの2つの線を含むボディに適用することで実行できますが、これには、配置やレイアウトに関する多くの問題を引き起こす欠点もあります。
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>私が見つけた最後の代替案は、横長バージョンをPDFで作成することです。ユーザーが印刷を選択するとPDFを印刷するように指定できます。しかし、IE7でこれを自動印刷することができませんでした。
<link media="print" rel="Alternate" href="print.pdf">結論として、一部のブラウザーでは@page sizeオプションを使用して相対論が簡単ですが、多くのブラウザーでは確実な方法がなく、コンテンツと環境に依存します。これが、Googleドキュメントが印刷を選択したときにPDFを作成し、ユーザーがそれを開いて印刷できるようにする理由かもしれません。
@page size最近のすべてのブラウザでは機能しないようです。Firefoxのみです。ChromeとOperaはどちらも私が見た限りではこれを無視します。
size: landscapeはルールですが、CSS2.1の一部ではありません@page。ただし、CSS3の一部です。確認のため、W3C CSS Validatorを使用して、@page {size: landscape}「プロファイル」をレベル2.1とレベル3に設定して結果を入力および比較してください
私の解決策：
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>これはIE、FirefoxおよびChrome
classdivをページ全体ではなく横向きにしたい場合はどうなりますか？
ページのコンテンツを回転させるだけでは十分ではありません。以下は、ほとんどのブラウザー（Chrome、Firefox、IE9 +）で機能する正しいCSSです。
最初に本文marginを0に設定します。そうしないと、ページ余白が印刷ダイアログで設定した余白よりも大きくなるためです。また、backgroundページを視覚化するために色を設定します。
body {
margin: 0;
background: #CCCCCC;
}margin、borderおよびbackgroundページを視覚化するために必要です。
padding必要な印刷マージンに設定する必要があります。印刷ダイアログでは、同じマージン（この例では10mm）を設定する必要があります。
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}A4サイズは210mm×297mmです。サイズから印刷余白を差し引く必要があります。そして、ページのコンテンツのサイズを設定します。
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}ブラウザーによってページの拡大率が少し異なるため、277mmではなく276mmを使用しています。そのため、それらの一部は高さ277mmのコンテンツを2ページに印刷します。2ページ目は空になります。276mmの方が安全です。
私たちは、いずれかを必要としないmargin、border、padding、background印刷されたページに、ので、それらを削除します。
@media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}変換の原点は0 0！また、横向きのページのコンテンツは276mm下に移動する必要があります。
また、縦向きと横向きのページが混在している場合、IEはページを縮小します。-ms-zoom1.665に設定して修正します。この値を1.6666またはこのような値に設定すると、ページコンテンツの右の境界が切り取られることがあります。
あなたが必要な場合はIE8-またはその他の古いブラウザでは、使用できるサポート-webkit-transform、-moz-transform、filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)。ただし、最新の十分なブラウザの場合は必要ありません。
ここにテストページがあります：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
...Copy all styles here...
</style>
</head>
<body>
<div class="portrait">A portrait page</div>
<div class="landscape">A landscape page</div>
</body>
</html>CSS-Discuss Wikiからの引用
@pageルールの範囲がCSS2からCSS2.1に削減されました。報告によると、CSS2の@pageルール全体は、Operaのみに実装されていたと報告されています（それでもバグが多い）。私自身のテストでは、IEとFirefoxが@pageをまったくサポートしていないことを示しています。現在廃止されているCSS2仕様のセクション13.2.2によると、ユーザーの向きの設定をオーバーライドして（たとえば）横長で印刷を強制することができますが、関連する「サイズ」プロパティはCSS2.1から削除され、事実と一致しています現在のブラウザではサポートされていません。CSS3 Paged Mediaモジュールで復活しましたが、これは草案にすぎない（2009年7月現在）ことに注意してください。
結論：今のところ@pageを忘れてください。ドキュメントを横向きで印刷する必要があると思われる場合は、代わりにデザインをより滑らかにすることができるかどうかを自問してください。（たとえば、ドキュメントに多くの列を持つデータテーブルが含まれているために）本当にできない場合は、方向を横に設定し、おそらく最も一般的なブラウザーでその方法を概説するようにユーザーにアドバイスする必要があります。もちろん、一部のブラウザーには幅に合わせる（縮小する）印刷機能があります（Opera、Firefox、IE7など）が、この機能を使用している、またはスイッチをオンにしているユーザーに依存することはお勧めできません。
これをあなたのCSSに追加してみてください：
@page {
size: landscape;
}sizeプロパティは、あなたが述べたように後にしているものです。印刷時にページの向きとサイズの両方を設定するには、以下を使用できます。
/* ISO Paper Size */
@page {
size: A4 landscape;
}
/* Size in mm */
@page {
size: 100mm 200mm landscape;
}
/* Size in inches */
@page {
size: 4in 6in landscape;
}@pageドキュメントへのリンクは次のとおりです。
.cssファイルに保存する必要があります。そうでない場合は、インラインの場合、デフォルトのブーストラップ宣言（size: a3）が優先されます。
あなたは使用することができるかもしれませんCSS 2 @pageルールあなたが設定することができます風景に「サイズ」プロパティを。
非標準のIEのみのcss属性writing-modeを使用することもできます
div.page {
writing-mode: tb-rl;
}空のMSドキュメントを横長に設定して作成し、メモ帳で開きました。以下をコピーして私のHTMLページに貼り付けました
<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:4;}
div.Section1
{page:Section1;}
</style>
<div class="Section1"> put text / images / other stuff </div>印刷プレビューでは、ページが横長のサイズで表示されます。これは、FFではテストされておらず、IEとChromeでは問題なく動作しているようです。
私はこの問題を一度解決しようとしましたが、私のすべての研究がActiveXコントロール/プラグインに私を導きました。ブラウザーが（いずれにせよ3年前に）印刷設定（部数、用紙サイズ）を変更することを許可したというトリックはありません。
私は、ブラウザの印刷ダイアログが表示されたときに「横長」を選択する必要があることをユーザーに注意深く警告するように努力しました。また、「印刷プレビュー」ページを作成しました。これは、IE6の場合よりもはるかにうまく機能しました。私たちのアプリケーションは、一部のレポートに非常に幅の広いデータのテーブルがあり、印刷プレビューにより、テーブルが用紙の右端からこぼれることがユーザーに明らかになりました（IE6は2枚の印刷にも対応できなかったため）。
そして、はい、人々は今でもIE6を使用しています。
<style type="text/css" media="print">
.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>このスタイルをテーブルに適用する場合は、このスタイルクラスで1つのdivタグを作成し、このdivタグ内にテーブルタグを追加して、末尾のdivタグを閉じます。
このテーブルは横向きでのみ印刷され、他のすべてのページは縦向きモードでのみ印刷されます。しかし、問題は、テーブルのサイズがページ幅よりも大きい場合、一部の行が失われる可能性があり、ヘッダーも失われることがあります。注意してください。
良い一日を過ごしてください。
ありがとう、Naveen Mettapally。
私はデニスの答えを試し、いくつかの問題にぶつかりました（横向きのページを追いかけた後、縦向きのページが適切に印刷されませんでした）、これが私の解決策です：
body {
margin: 0;
background: #CCCCCC;
}
div.page {
margin: 10px auto;
border: solid 1px black;
display: block;
page-break-after: always;
width: 209mm;
height: 296mm;
overflow: hidden;
background: white;
}
div.landscape-parent {
width: 296mm;
height: 209mm;
}
div.landscape {
width: 296mm;
height: 209mm;
}
div.content {
padding: 10mm;
}
body,
div,
td {
font-size: 13px;
font-family: Verdana;
}
@media print {
body {
background: none;
}
div.page {
width: 209mm;
height: 296mm;
}
div.landscape {
transform: rotate(270deg) translate(-296mm, 0);
transform-origin: 0 0;
}
div.portrait,
div.landscape,
div.page {
margin: 0;
padding: 0;
border: none;
background: none;
}
}<div class="page">
<div class="content">
First page in Portrait mode
</div>
</div>
<div class="page landscape-parent">
<div class="landscape">
<div class="content">
Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="page">
<div class="content">
Third page in Portrait mode
</div>
</div>