CSSによる印刷レイアウトの変更

  • CSS
  • 現在地

印刷プレビューでレイアウトが崩れる場合に

このサイトを印刷プレビューで見たら、高さを固定してボックスに入れているため、ブラウザに映っている部分しか印刷できない状況でした。

なので今回は、直すために使用した方法を紹介します。

印刷時のみに適用するCSSの記述方法

  • @media print{
  • セレクタ{プロパティ: 値;}
  • }

記述は上記のようになります。@media は出力機器のことで、ここでは印刷機器となる print を値としています。

この記述の中で行うセレクタへの定義は、印刷機器の使用の時にしか適用されないことになります。

擬似フレームのページを印刷に対応させる

それでは、擬似フレームの場合の @media print{} 内のポイントについて記述しておきます。

ポイント

  • 印刷の際は不必要となるメニューなどのフレームの部分を除く
    • div#menu{display: none;}
  • 本文部分のボックスの、"position"と"overflow"を初期値に、高さと幅を"auto"に指定します。
    • div#main{position: static; overflow: visible; width: auto; height: auto;}

ボーダーがある場合は、boder の値を none に変更しましょう。

後書き

本来ならこれだけでできるはずなのですが、ボックスの中にさらにボックスを "position: absolute;" で設置している場合は、枠となるボックスには、"position: static;" だけを、中のボックスに "overflow: visible;" を設定します。

この場合、中のボックスは "position: absolute;" のままでいいです。ただし、top や left 等の配置位置と "z-index" の設定もきちんと変更しましょう。

スポンサードリンク

inserted by FC2 system