Perl Perl_3 css

2015年03月17日

! Perl - CSS 利用 41 @media print 印刷用のスタイル (0x175)

目次 - Perl Index

Theme

Perl について、復習を兼ねて断片的な情報を掲載して行く連載その 0x175 回。

CGI.pm で、「カスケーディングスタイルシート」( Cascading Style Shieets : CSS ) の指定方法を確認する。

今回は、Getting Started - MDN "チュートリアル第1章" の "Media" ( メディア ) で "実習" ( Action ) として示されている印刷のためのスタイル定義を確認します。

@media print

今回は Media - MDN で例示されている、印刷のためのスタイル定義を、その HTML ドキュメントとともに確認します。

印刷のためのスタイル定義は (0x167) の「 @page 」で途方に暮れた経験がありますが、今回は、(0x166) で確認した「 @media 」でメディアタイプ「 print 」を利用する様です。

印刷ページの HTML ドキュメント

印刷ページに利用する HTML ドキュメントは次のものです。



<!DOCTYPE html>

<html>

  <head>

    <title>Print sample</title>

    <link rel="stylesheet" href="style_print.css">

  </head>

  <body>

    <h1>Section A</h1>

    <p>This is the first section... (これは最初のセクション)</p>

    <h1>Section B</h1>

    <p>This is the second section... (これは 2 番目のセクション)</p>

    <div id="print-head">

      Heading for paged media (ページメディアのための 見出し)

    </div>

    <div id="print-foot">

        Page:

    </div>

</body>

</html>

この中で気になる部分は、12 行目で HTML 要素「 div 」に指定してある HTML id「 print-head 」と、同じく HTML 要素「 div 」に指定してある 15 行目の HTML id「 print-foot 」です。

(0x151) で確認したとおり、HTML id はページ内に任意で固有の識別子を指定するためのものですが、その命名からして印刷ページに関連するだろうことが分かります。

スタイルシートを指定しない場合、この HTML ドキュメントは Web ブラウザ ( Firefox Dev 38.0a2 ) で次の様に表示されます。

! Perl - CSS 利用 41 @media print 印刷用のスタイル (0x175)

印刷ページの CSS スタイルシート

印刷ページのスタイルを定義するスタイルシートは次のものです。



/*** Print sample (印刷サンプル) ***/



/* defaults for screen (スクリーンのためのデフォルト) */

#print-head,

#print-foot {

  display: none;

}



/* print only (印刷のみ) */

@media print {

  h1 {

    page-break-before: always;

    padding-top: 2em;

  }



  h1:first-child {

    page-break-before: avoid;

    counter-reset: page;

  }



  #print-head {

    display: block;

    position: fixed;

    top:   0pt;

    left:  0pt;

    right: 0pt;



    font-size: 200%;

    text-align: center;

  }



  #print-foot {

    display: block;

    position: fixed;

    bottom: 0pt;

    right:  0pt;



    font-size: 200%;

  }



  #print-foot:after {

    content: counter(page);

    content-increment: page;

  }



} /* end print only (印刷のみ 終了) */

(コンピュータ) スクリーン用のスタイルと、印刷用のスタイルを個別に定義している様子が伺えます。

このスタイルの定義を適用した HTML ドキュメントは次の様に表示されます。

! Perl - CSS 利用 41 @media print 印刷用のスタイル (0x175)

HTML id「 print-head 」と「 print-foot 」がページ上から消えています。

この状態で印刷プレビューを確認します。印刷プレビューでは次の様に表示されます。

! Perl - CSS 利用 41 @media print 印刷用のスタイル (0x175)

ページが 2 ページに分割され、かつ、各ページに見出し ( ヘッダ ) とページ番号 ( フッタ ) が追加されています。

消えたはずの HTML id「 print-head 」と「 print-foot 」がここに現れているわけです。これが「 @media print 」の効力だということです。

「 @page 」で印刷用のスタイル定義に挫折した分、こうしたスタイルが正常に機能するのを見るとちょっと感激です。併せて「 @page 」の機能に誤解があるように感じるので別途確認しておいた方が良いかもしれません。

0x175 -> 0x176 へ

次回は、今回確認した「印刷のためのスタイルシート」の各定義を確認します。

参考情報は書籍「初めての Perl 第 6 版」を中心に perldoc, Wikipedia および各 Web サイト。それと詳しい先輩。

目次 - Perl Index

同じカテゴリー（Perl）の記事

Perl mp2 翻訳 Web コンテンツ圧縮の FAQ (d228)
Perl mp2 翻訳既知のブラウザのバグの回避策をいくつか (d227)
Perl mp2 翻訳 Perl と Apache でのキュートなトリック (d226)
Perl mp2 翻訳テンプレートシステムの選択 (d225)
Perl mp2 翻訳大規模 E コマースサイトの構築 (d224)
Perl mp2 翻訳チュートリアル (d223)