2022.03.05 [土] ポートフォリオサイトを印刷用CSSでプリントする。
2月が短いというのありますが、あっという間に3月ですね。
だんだんと春めいた陽気になってきました。
さて、3月になり、名目上の就職活動解禁となりました。
来年（23年）卒の学生たちは、説明会参加やエントリーなどで慌ただしく活動しているか思います。
その就職活動で必要なものが、ポートフォリオです。Webデザイン学科の学生が志望するデザイナー職・エンジニア職には、採用試験の前や面接時に作品集「ポートフォリオ」を求められることが多くあります。
Webデザイン学科では、Webサイト制作を学んでいるため、その技術や成果を伝えるためにWebサイトでポートフォリオを制作していますが、まれに紙のポートフォリオが必要になる場合があります。
印刷用CSSで紙用のレイアウトを設定する。
ポートフォリオを簡易的に作るサービスも増えてきていますが、いちから制作すると、やはり時間がかかります。さらに、IllustratorやInDesignで紙のポートフォリオを制作するとなると膨大な時間を費やすことになります。
就職活動期間とはいえ、学校の授業や課題などもありますので、そこまで時間をかけることはできません。
そこで今回は印刷用のスタイルシートを設定することで、Webポートフォリオを印刷すると紙用のレイアウトでプリントさせる方法について書いていこうと思います。
以前は、Webサイトを印刷する機会も多かったのですが、スマートフォンが普及したおかげでずいぶんと少なくなってきました。さらにブラウザの印刷メニューでも背景非表示など最適化が可能になっていますので、内容を見るためのプリントなら、それほど不便なく印刷できます。
そのためか、印刷用のCSSが読み込まれているWebサイトも少なくなってきました。
印刷用CSSをWebサイトに適用させる為には、PCとスマートフォンの見た目を切り替えるメディアクエリで使う、メディアタイプが重要になります。
メディアタイプ
メディアタイプには、機器の分類値を記述しています。
また、メディアタイプは省略可能です。その場合、暗黙的に値はallとなります。
主なメディアタイプの分類は、
- all：すべての機器に適合します。
- print：ページのある資料や、画面に印刷プレビューモードで表示されている文書に適合します。
- screen：主にPCやスマホなどスクリーン向けのものです。
- speech：音声合成向けのものです。
CSS2.1およびMedia Queries3では、他にもテレビやプロジェクターなどのメディアタイプ（tty、tv、projection、handheld、braille、embossed、aural）が定義されていましたが、これらはMedia Queries4で非推奨となっています。
印刷用CSSを設定する方法
印刷用のCSSを設定する方法は4つほどあります。
① link要素にmedia属性で読み込む
１つめは、外部CSSファイルとして、link要素のmedia属性の値をメディアタイプの分類値にします。
分類値には複数の値を設定することもできます。
