2022.03.28 [月] 5校合同制作合宿2022（オンライン）

あれ？もう、桜の開花の時期ですね。
今年も卒業式間近の3月14日（月）から2泊3日でWeb合同制作合宿を行いました。
各地でオミクロン株が猛威を奮っていますので、今年もオンライン開催です。

参加校

前回参加のトライデントコンピュータ専門学校、ECCコンピュータ専門学校、神戸電子専門学校、東京電子専門学校の4校を加え、HOPTER TECH SCHOOLが参加し、5校39名の学生が10チームに分かれて、合同制作合宿を開催しました。

昨年とは違い、今年はメインのコミュニケーションツールにoViceを利用しました。最初は戸惑っていた学生も、次第に楽しそうにコミュニケーションを取っていました。

5校合同Web制作合宿

期間：2022年3月14日（月）〜3月16日（水）

会場：オンライン

テーマ：「場所」

参加者：トライデントコンピュータ専門学校（Webデザイン学科）新2年生、ECCコンピュータ専門学校（Webデザインコース）新2年生、神戸電子専門学校（グラフィックデザイン科）新2年生、東京電子専門学校（ウェブ・メディア科）新2年生、HOPTER TECH SCHOOL 新2年生

過去のようす

• ［専門学校5校］合同Web制作合宿（オンライン）2021
• トライデント・ECC・日総ビ専門学校Web制作合宿2019

制作テーマ「場所」

マネーフォワードの村治さんにテーマの提案と講評をお願いしました。
今回の合同制作合宿でのテーマは「場所」です。

新型コロナウィルスの感染拡大から2年が経ち、リアルの移動が制限された中、オンラインでのコミュニケーションにも慣れてきました。さらに近年、メタバースやWeb3というワードも話題になっており、場所という概念が変化しつつあります。今、改めて「場所」について考えてみます。
場所をテーマにした、サービスもしくはWebサイトを3日間で制作し、最終日に発表します。

「5校合同制作合宿2022（オンライン）」の続きを読む≫

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属性の値をメディアタイプの分類値にします。
分類値には複数の値を設定することもできます。

「ポートフォリオサイトを印刷用CSSでプリントする。」の続きを読む≫