CSSで印刷デザインを制御~基礎~

アイキャッチ「プリンターのイラスト」

印刷時に印刷したくない場所ってありますよね。
そんな時に使うのがCSSの、『display:none;』です。

まずはCSSの終わりに下記プログラミング文を挿入

メディアは”プリンタ”と指定します。

@media print {          }

メディアタイプについてはこちら

{  }の中に非表示する部分を記入していきます。

例.idがheader・footer・sidebarとなっている部分と、classがprintnoneとなっている部分、合わせて4箇所を印刷しない様にしたい。

@media print {
  #header,
  #footer,
  #sidebar,
  .printnone
     { display:none; }
}

{  }はちゃんと対になる様にしましょうね!

@media print { ・・・ } の中に非表示の「display:none;」を指定するのではなく、
ホームページデザインをする時のように大きさや色等を指定することにより、印刷時の専用テンプレートを作ることが出来ますよ。

  • このエントリーをはてなブックマークに追加

関連記事

ピックアップ記事

  1. アイキャッチ「カラフル建物」
  2. アイキャッチ「案内図」

アーカイブ

ページ上部へ戻る