[CSS] IEで印刷のレイアウト崩れ対策 | WEBエンジニアの雑記ブログ
Internet Explorer（9 ~ 11）にて印刷時にレイアウト崩れが発生しかなり苦戦したので、共有 + 自分の後学の為に公開しておこうと思います。 1. 印刷時読み込むCSSの設定 レスポンシブサイトを構築しているとよくある話ですが、印刷時サイズって横幅約700px（A4）なのでスマホ版レイアウトが表示されがちですが、それを解消する為に下記のいずれかを記述すると思います。 //パターン1 印刷用CSSをheadタグに追記する <link rel="stylesheet" type="text/css" media="print" href="print.css"> //パターン2 共通用CSSに印刷用CSSのインポートを追記 @import url("print.css") print; //パターン3 各CSS内の該当部分にメディアクエリを使用した追
![[CSS] IEで印刷のレイアウト崩れ対策 | WEBエンジニアの雑記ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/913ed2b2b71cd0201fdb22129ed43049ef324b06/height=288;version=1;width=512/http%3A%2F%2Fwebsite-engineer.com%2Fwp-content%2Fuploads%2F2017%2F06%2Fcss3.jpg)
【決定版】印刷用CSSはこれでいこう！ | m-pixel labo blog
「いざホームページが完成！と思ったら、印刷するときに思い通りの画面じゃなかった！」といったことはありませんか？Webサイトは本来PCなどのディスプレイで出力することを目的としているので、印刷には不向きなものです。 今ではスマートフォンやタブレットなどの持ち歩く端末が普及したために、印刷の必要性が下がったとはいえ、ページによっては印刷したいというものもまだまだあります。そこで今回は印刷用のCSSをどのようにして作るのか、見ていきたいと思います。 印刷用CSSの書き方（基本編） まずは印刷用のCSSを用意します。CSSでは、出力する端末に応じてメディアタイプをかき分けることができます。例えば以下のような種類が存在します。 screen（スクリーン、ディスプレイ） print（プリンタ） tv（テレビ） projection（プロジェクター） all（上記の全て） などなど このうち今回使用する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
