
スキルアップ
2021.01.27
給料が高い仕事の特徴や年収を調査。高収入を目指す方法も紹介
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
JavaScript
2017.12.08
window.print メソッドを使用すると、Webページを印刷することができます。
今回は、window.print メソッドを使用して、Webサイトの画面印刷をする方法について紹介します。
print メソッドは、Windowオブジェクトのメソッドで、ブラウザの印刷ダイアログを呼び出します。
次のように記述して使用します。
window .print( );
また、script 要素内( <script> ~ </script> )に記述する場合は、下記のように「 window. 」を省略することもできます。
次のように記述して使用します。
print( );
次のサンプルは、現在開いている画面を印刷するプログラムです。
印刷ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function printWeb() { print(); } //--> </script> <div style="background-color : #CCC;"> <input type="button" value="印刷" onClick="printWeb()"> </div>
単に print メソッドを記述するだけで、自画面の印刷ダイアログが表示されます。
次のソースコードでも 同様の結果が得られます。
<div style="background-color : #CCC;"> <input type="button" value="印刷" onClick="window.print();"> </div>
print メソッドを スクリプト要素の外に記述する場合は、「 window. 」を省略せずに上記のように記述します。
また、ボタン以外に リンクから印刷ダイアログを表示させることもできます。
印刷リンクをクリックしてみて下さい。
ソースコードは次の通りです。
<div style="background-color : #CCC;"> <a href="#" onclick="window.print();">印刷</a> </div>
JavaScript ではありませんが、印刷に不要な部分を非表示にするなど、印刷内容を指定することができます。
印刷内容の設定は、次のように CSS で行います。
<style type="text/css"> <!-- /* 印刷をしない */ @media print{ .noPrint{display:none;} } /* 画面表示をしない */ @media screen{ .noScreen{display:none;} } /* 画面表示も印刷もしない */ @media screen,print{ .noScreenPrint{display:none;} } --> </style> <div class="noPrint"> ここは、画面表示されますが印刷されません </div> <div class="noScreen"> ここは、画面表示されませんが印刷されます </div> <div class="noScreenPrint"> ここは、画面表示も印刷もされません </div> <input type="button" value="印刷" onclick="window.print();">
CSSでは @(アットマーク)の記号を使った指定方法がいくつかあり、「 @media 」もそのうちの 1 つです。
@media を使うと、特定のメディアに対して、スタイルを指定することができます。
カンマ( , )で区切ることによって、メディアを複数指定することもできます。
上記のソースコードでは、「 print 」と「 screen 」の 2 つのメディアに対して スタイルを指定することで、指定印刷を実現しています。
スキルアップ
2021.01.27
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
INTERNOUS,inc. All rights reserved.