Webエンジニア 新人日記

Webエンジニアになりました。元々はCOBOLやらBASICやらでプログラムしてました。C言語やVisualBasicは趣味でやっていましたが、久々に現場復帰ということです。資格はエンベデッドスペシャリスト、DBスペシャリスト、ネットワークスペシャリスト、セキュリティスペシャリスト、システムアーキテクト、プロジェクトマネージャ他を所有

【html+css】印刷ボタンを画面上に固定

画面が下に長くスクロールしても、印刷ボタンは固定したいような場合。

htmlでは、ボタンにidを割り当てておく。
onClickにwindow.print()を割り当てることでブラウザの印刷機能を呼び出す。
ちなみに、印刷時にはボタンそのものは印刷しないようにしている。

<form class="noprint">
   <input type="button" value="印刷" onclick="window.print();" id="print_button">
</form>

CSS側で、position: fixed;で固定する。topとrightは、それぞれ端からのピクセル数。

input#print_button {
	position: fixed;
	padding: 15px 40px;
	font-size: 1.2em;
	top: 10px;
	right: 10px;
}