HTMLで横長印刷！CSS・JavaScript・プラグインの使い分け

2024-04-06

HTML から横長印刷を行う方法

CSS でページ設定を指定する

@page ルールを使用して、印刷時のページサイズや余白などを設定することができます。

@page {
  size: landscape; /* 横長印刷を指定 */
  margin: 0; /* 余白を0に設定 */
}

HTML の body 要素に class 属性を追加する

body 要素に class 属性を追加し、そのクラスに横長印刷用のスタイルを適用する方法です。

<body class="landscape">
  ...
</body>

.landscape {
  /* 横長印刷用のスタイル */
}

JavaScript を使用して、印刷時にページ設定を変更する方法です。

window.onload = function() {
  // 印刷時に横長印刷を設定
  window.print();
};

上記の方法を組み合わせることで、より柔軟な横長印刷を行うことができます。

補足

印刷時にヘッダーやフッターを表示しない場合は、CSS で @page ルールの margin プロパティに 0 を指定します。
印刷時に特定の要素のみを印刷したい場合は、CSS で display: none; を使用して非表示にしたり、media="print" を使用して印刷時のみ表示するように設定できます。

ブラウザやプリンターの設定によっては、横長印刷がうまくできない場合があります。
横長印刷を行う場合は、事前に印刷プレビューで確認することをおすすめします。

関連用語

HTML
CSS
JavaScript
印刷
横長印刷
@page
media="print"

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>横長印刷サンプル</title>
  <style>
    @page {
      size: landscape;
      margin: 0;
    }
  </style>
</head>
<body>
  <h1>横長印刷サンプル</h1>
  <p>このページは横長印刷されます。</p>
</body>
</html>

上記コードを index.html として保存し、ブラウザで開くと、横長印刷されます。

その他のサンプル

ヘッダーやフッターを表示しない場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>横長印刷サンプル</title>
  <style>
    @page {
      size: landscape;
      margin: 0;
      @top-left {
        content: "";
      }
      @top-right {
        content: "";
      }
      @bottom-left {
        content: "";
      }
      @bottom-right {
        content: "";
      }
    }
  </style>
</head>
<body>
  <h1>横長印刷サンプル</h1>
  <p>このページは横長印刷されます。</p>
</body>
</html>

特定の要素のみを印刷する場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>横長印刷サンプル</title>
  <style>
    @page {
      size: landscape;
      margin: 0;
    }
    .print-only {
      display: none;
    }
    @media print {
      .print-only {
        display: block;
      }
    }
  </style>
</head>
<body>
  <h1>横長印刷サンプル</h1>
  <p>このページは横長印刷されます。</p>
  <div class="print-only">
    <p>印刷時のみ表示される要素</p>
  </div>
</body>
</html>