>>> 学級日誌番外トップ

１６．印刷用CSS（背景画像を使ったタイトルを印刷するには） （2010年10月7日）

◎環境

・ブラウザ全般

◎解説

ホームページ作成のテクニックとしてタイトル等に用いられるオフレフトという手法。これは、HTML上のタイトルテキストにCSSで大きなマイナスのインデント値を設定して画面上から見えないようにし、代わりに画像化したタイトルをCSSで背景として表示させるというもので、HTML上にタイトルを画像で配置するよりもSEO的に優位で、音声ブラウザにもきちんと対応する。しかし、ブラウザの標準設定では背景画像を印刷しないようになっているため、CSSで背景画像として設定したタイトルは印刷されない。
そんな時は印刷用CSSを用意して、印刷時は背景画像を普通の画像に差し替えるようにすると正しく印刷することが出来る。

解決方法>>
<img>タグでタイトル画像を追加し、
ブラウザでの表示と印刷時の表示をCSSで切り替える。

          <h1 class="title">タイトルテキスト</h1>
          <img src="title.jpg" class="title_p" width="760" height="100" />
          

          .title {
            width: 760px;
            height: 100px;
            font-size: 10px;
            text-indent: -9999px;
            background-repeat: no-repeat;
            background-image: url(title.jpg);
          }
          .title_p {
            display: none;
          }
          /*============================
          印刷用CSS
          ============================*/
          @media print {
          .title {
            display: none;
          }
          .title_p {
            display: block;
          }
          

 

>>> マサがお勧めするCSSの本 （by Amazon.co.jp）