【決定版】Webページの印刷崩れをStylusで完全回避！画面通りのレイアウトを保つ設定術

📄 印刷プレビューの「ガタガタ崩れ」よ、さらば！

Webページを印刷しようとして、こんな「絶望」を味わったことはありませんか？

横に並んでいたはずの画像と説明が、縦一列に積み重なっている 🧱
文字が枠からはみ出して消えている 🫥
背景のデザインが真っ白になって、スカスカな印象になる 💨

これは、ブラウザが「紙という狭い枠に合わせるために、レイアウトを勝手に組み替えてしまう」から起こる現象です。

今回は、拡張機能「Stylus（スタイラス）」を使って、この勝手な組み替えを封じ込め、「画面で見ているその形」を死守して印刷する方法を解説します！

🛠 Step 1：Stylusの準備（インストール）

まずは、ブラウザを改造するための「Stylus」を導入しましょう。

インストール： Chrome ウェブストアの Stylus ページにアクセスし、「Chromeに追加」をクリック。
有効化： ブラウザ右上の「パズルピース」アイコンを押し、Stylusの横にあるピン留めマークをクリックします。

✨ Step 2：形を崩さない「鉄壁のコード」を貼る

インストールができたら、いよいよ魔法をかけます。今回は「背景を維持する」だけでなく、「配置を無理やり崩させない」ための命令も追加しました。

対象のサイトを開く： 印刷が崩れるページを開きます。
編集開始： ブラウザ右上の「Stylusアイコン」をクリックし、メニュー内のドメイン名（例：sample.com）をクリックします。
以下のコードをコピペ： 出てきた白い画面に、以下の内容をすべて貼り付けてください。

CSS

/* 印刷時のみ適用されるルール */
@media print {
  * {
    /* ① 色や背景を画面通りに表示 */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    
    /* ② レイアウトの「勝手な組み替え」を禁止 */
    float: none !important;
    position: relative !important; /* staticだと崩れる場合があるため */
    display: inline-block !important; /* 要素が縦に積み重なるのを防ぐ */
  }

  /* ③ 紙の幅に合わせて無理やり縮小されるのを防ぐ */
  body {
    width: 1200px !important; /* 画面で見ている横幅に近い数値を指定 */
    overflow: visible !important;
  }

  /* ④ 印刷時に勝手に消される要素（メニューなど）をあえて表示させたい場合 */
  header, nav, .sidebar {
    display: block !important;
  }
}