カテゴリー : HTML

HTMLで印刷用ページを作成する

印刷ボタンを用意して、クリックすると印刷用ページを開くという実装を行ったのでメモ。
通常は、Web表示用と印刷用でそれぞれのCSSを用意して、
印刷したい場合だけ印刷用のCSS(print.cssなど)が適用されるように実装します。

印刷ボタンを以下のようにして設置することで印刷が実行されます。

<button onclick="window.print()">印刷する</button>

今回は、別途印刷専用のページを用意して、そのページを開くと印刷が実行されるように実装しました。
で、ページを開くとすぐに印刷が実行されるようにするにはどうするか?と思い
とりあえず以下を入れてみたらOKでした。簡単でした・・・。

<script>
window.print();
</script>

ヘッダーのスクロールを固定したい

ヘッダー部分のスクロールを固定して、常にヘッダーが表示されているようにしたいという案件があったのでメモ。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="sample.css" media="all" type="text/css" />
</head>

<body>

<div id="header">
  ヘッダーです
</div>

<div id="contents">
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
</div>

<div id="footer">
  フッターです
</div>

</body>
</html>

CSS

#header{
  position: fixed !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #4E9ABE;
  color: #FFF;
  z-index: 11;
}

#contents{
  margin-top: 110px;
  width: 100%;
  height: 1000px;
}
* html div#contents {
  height: 100%;
  overflow: auto;
}

#footer{
  width:100%;
  height: 50px;
  background-color: #4E9ABE;
  color: #FFF;
}

ヘッダにposition: fixed !important;を指定します。
スクロールした際に、コンテンツ部分が上に来てしまうため、ヘッダーにz-index: 11;を指定しました。