雑記：印刷用スタイルシートの記述

印刷用スタイルシートの記述

トップページにあるメモですが、印刷されることを考慮して印刷用のスタイルシートを記述しました。というか印刷するほどの内容でもないので僕のようなサイトでそこまでやってもあまり意味ないんですが、後学のためということで。。作業してて、資料があるサイトとかコンテンツがあるサイトでは印刷用に別途スタイルを記述しておくと便利かなと思いました。

印刷用のスタイルシートを定義する方法ですが、2つあります。1つは、印刷用のCSSを別途作って以下のようにHTMLのヘッダで読み込む方法。ただし、この方法だと全部のHTMLファイルに印刷用CSSを読み込まなければならず面倒です。

<link rel="stylesheet" href="site.css" 
type="text/css" media="screen,tv" />
<link rel="stylesheet" href="print.css" 
type="text/css" media="print" />

もう一つは、一つのスタイルシート中に以下のように別々に記述する方法で、こちらだと、スタイルシートを修正するだけで良いので楽です。

@media screen, tv {
    /* パソコン表示時に使われるスタイルシート */
    body {
    }
}
@media print {
    /* 印刷時に使われるスタイルシート */
    body {
    }
}
@media handheld {
    /* ハンドヘルド用に使われるスタイルシート */
   body {
   }
}

あとは印刷したくない部分をdisplay:none;で表示しないようにしてやれば、印刷時には余計なものが出てきません。スタイルシートはこちらにありますので興味のある方はご覧ください。携帯のページもこれで切り替えられたら、わざわざ携帯用のサイトを作らなくて良いので楽なんですが、これってできるのかな？operaを積んでいる携帯ではhandheldを認識してスタイルシートの切り替えをしてくれるらしいんですが、他の端末で対応しているのかどうか。。もう少し調べてみよう。。

ちなみに、operaなどのcounter-incrementおよびcounterに対応しているブラウザで印刷すると自動的に章番号が付くようにしてます。書き方はこんな感じです。IEやFirefoxもこのスタイルに対応してくれたらうれしいんですが。

h1 {
    counter-increment: chapter;
}
h1:before {
    content: counter(chapter) " ";
}
h2 {
    counter-increment: section;
    counter-reset:subsection;
}
h2:before {
    content: counter(chapter)"."counter(section)" ";
}
h3 {
    counter-increment: subsection;
}
h3:before {
    content: counter(chapter)"."
        counter(section)"."
        counter(subsection)" ";
}

ついでにこのブログのスタイルも変更しました。時間がかかった割にはなんかいまいちなスタイルです。

2006年11月03日07:00投稿 | 技術的なこと | Comments (0) | Trackbacks (0)

この記事に対するコメント