事前公表

第60回 技能五輪全国大会

ウェブデザイン- Web Technologies 競技課題

M1

スピードテスト（その他ウェブデザインに関わる諸技能）
作業時間： 1時間

目次
目次

2

はじめに

4

選手への指示4Part A: Website Design5

A1：画像のぼかし（簡単）5

A2：透明な背景（簡単）5

A3：パターン（簡単）5

A4：ローディングGIF（普通）5

A5：UIキット（難しい）5

A6：画像の合成（簡単）6

A7：ピクトグラム（普通）6A8：サムネイル画像の作成（普通）6

A9：メッセンジャー（難しい）6

A10：モザイク（簡単）6

A11：バナー作成（普通）7Part B: Layout

7

B1：HTMLタグ（簡単）7

B2：CSSグリッド（普通）7

B3：段落（簡単）

8

B4：グラデーションアニメーション（簡単）8

B5：段落と大文字への変換（簡単）8B6：リンクリスト（簡単）8B7：トライアングル（簡単）8B8：グレースケール画像（簡単）8B9：トグル（普通）9B10：ジャンプするボール（簡単）9

B11：お問い合わせフォーム（普通）9B12：円グラフ（普通）9B13：フルスクリーンスクロール（普通）10B14：スクエア アニメーション（普通）10B15：表の背景色（簡単）10Part C: Front-End Development

11

C1：Canvasアニメーション（簡単）Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

11

Version: 1.0©︎ WorldSkills Japan.

2 / 17

C2：計算（簡単）11C3：canvas による描画（普通）11

C4：アナログストップウォッチ（普通）11

C5：行の追加と削除（難しい）12

C6：カーソルを追う（簡単）12C7：マウスオーバー（簡単）12

C8：RGBスライダー（普通）12

C9：FizzBuzz（簡単）13

C10：ローディングアニメーション（普通）13

C11：合計値（簡単）13C12：ピクセルエディタ（普通）14C13：モーダルウィンドウの作成（普通）14Part D: Back-End Development

15

D1：DB接続（簡単）15

D2：重複を削除する（簡単）15

D3：ページネーション（普通）15

D4：配列（簡単）

15

D5：主要な色の取得（簡単）15

D6：大小チェック（簡単）16D7：画像に透かしを入れる （簡単）16

D8：フォームバリデーション（普通）16D9：ファイルマネージャー（普通）16

D10：簡易掲示板の作成（普通）17

D11：検索フォーム作成（普通）17

D12：末日の出力（簡単）17Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

3 / 17はじめにこのモジュール競技では、与えられた複数のタスクから 10 問を 1 時間で行います。タスクには、デザイン、レイアウト、フロントエンド開発、バックエンド開発 の 4つのパートがあります。

すべてのタスクをこなす必要はありません。

事前公表から、競技日までに抽選によって 10 問が決定されます。
競技課題の内容の 0〜30% 程度は競技当日変更される場合があります。

選手への指示1. 選手は自身が何のタスクを作業したか分かるようにフォルダ管理を行うこと
2. 作業したタスクは、競技サーバにアップロードされたものが採点対象なる
3. 競技サーバにアップロードされてないものは採点されない

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

4 / 17

Part A: Website Design

A1：画像のぼかし（簡単）
素材として提供されている画像をグラフィックソフトを使用してグレースケールにし、ぼかし効果を加え、「 a1.jpg 」として保存しなさい。

A2：透明な背景（簡単）
素材として提供されている jpg の画像をグラフィックソフトを使用して背景を透明にし、「 a2.png 」として保存しなさい。

A3：パターン（簡単）
任意のラインパターンを 100 × 100 px 毎に繰り返す背景画像を作成し、1920 × 1080 px で「 result.jpg」として保存しなさい。

A4：ローディングGIF（普通）「 Loading 」の文字が画面の左端から右端の外側に移動する GIF アニメーションを作成しなさい。文字サイズやドキュメントサイズなどは任意とする。アニメーションは 3秒以内 で完了させること。

A5：UIキット（難しい）
次の要素の ウェブサイト用 UI キットを作成しなさい。
テキストボックス、検索用テキストボックス、ボタン、ドロップダウンリスト、チェックボック
ス付きのラベル、ラジオボタン付きのラベル、ドロップダウンカレンダー、レンジスライダー、プログレスバー。作成した UIキットは「 uikit.png 」として保存しなさい。ドキュメントサイズは任意とする。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

5 / 17

A6：画像の合成（簡単）
素材として提供されている「 photo1.jpg 」の人物の背景を透過し「 photo2.jpg 」に合成して 1つの画像を作成しなさい。作成した画像は「 a6.jpg 」として保存しなさい。

A7：ピクトグラム（普通）ジャンケンゲームというコンテンツ(ゲーム)で使用するピクトグラムを作成しなさい。
グー（ rock.svg ）、チョキ（ scissors.svg ）、パー（ paper.svg ）の 3つのファイルを作成し保存しなさい。

A8：サムネイル画像の作成（普通）指定されたフォルダにある画像 30枚のサムネイル画像 100 x 80 px を作成しなさい。サムネイル
画像のファイル名は 元のファイル名の image を thumb に変更して保存すること。
例：image_01.jpg → thumb_01.jpg

A9：メッセンジャー（難しい）
サイズ 360 x 640 のメッセンジャーアプリの画面モックアップを 2枚作成しなさい。
画面1 - リスト（アバター、フルネーム、メッセージのプレビュー）。
画面2 - ユーザーとのチャット（アバター、フルネーム、メニュー（3点）、メッセージ、テキス
トフィールド、送信ボタン）。全ての要素が存在すること。

A10：モザイク（簡単）
素材として提供されている画像にグラフィックソフトを使用してモザイク効果を加え「a10.png 」として保存すること。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

6 / 17

A11：バナー作成（普通）
提供されている素材を使い、グラフィックソフトを使用してバナーを作成しなさい。
●

提供されている写真・テキスト素材は、すべて利用すること●

写真は適宜、加工して利用すること●

テキストは可読性にも注意すること●

ドキュメントサイズは、横：468px、縦：60px で作成すること●「 a11.jpg」として保存することPart B: Layout

B1：HTMLタグ（簡単）
提供されている文章データを、Webブラウザで表示できるように HTML 化しなさい。ウェブブラウ
ザで適切に表示できるよう、HTMLを使ってコンテンツを構造化すること。また、セマンティックタグやアクセシビリティにも配慮すること。

B2：CSSグリッド（普通）次のグリッドに基づくレイアウトプランを、 CSS グリッドで実装しなさい。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

7 / 17

B3：段落（簡単）HTML 文書中の段落の 1文字目の色を変更しなさい。
指示のない段落は作業する必要はない。
1段落目「 #ff0000 」、2段落目「 #00ff00 」、3段落目「 #0000ff 」※ CSS のみ編集する事

B4：グラデーションアニメーション（簡単）HTML と CSS を使用して、ページにグラデーションのアニメーションを作成しなさい。グラデーシ
ョンは任意の方向で構わない。

B5：段落と大文字への変換（簡単）HTML 文書中の段落 1文字目を大文字に変更し色を変えなさい。
1段落目「 #ff0000 」、2段落目「 #00ff00 」、3段落目「 #0000ff 」※ CSS のみ編集する事

B6：リンクリスト（簡単）HTML にはリンク（ a要素 ）のリストがある。このリンク先の HTML ファイルが web で始まるリンクのフォントの色を赤に、design で始まるリンクのフォントの色を青になるよう、 CSS を編集しなさい。

B7：トライアングル（簡単）画面中央に赤い正三角形を作成し、これをアニメーションさせて黄色の正四角形に変形させなさい。アニメーションは流動的で、無限にループさせること。

B8：グレースケール画像（簡単）
提供されている画像をCSSを利用してグレースケールにし、画像の上にマウスを置くと画像がカラーにトランジションするようにしなさい。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

8 / 17

B9：トグル（普通）HTMLとCSSのみでトグルスイッチを作成しなさい。

B10：ジャンプするボール（簡単）ジャンプするボールのループアニメーションを作成しなさい。

B11：お問い合わせフォーム（普通）未完成の問い合わせフォームの HTML と CSS を、完成見本を元に完成させなさい。
動作については動画ファイルを参考にする事。なおこの問題は JavaScript を利用することはできない。

B12：円グラフ（普通）下図のような円グラフを作成しなさい。
配色は任意とするが、差が分かるように着色を行うこと。JavaScriptは利用できない。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

9 / 17

B13：フルスクリーンスクロール（普通）フルスクリーンで作成された要素をスナップスクロールして切り替えなさい。JavaScriptは利用できない。
●

切り替えの確認ができるように各要素に違う背景色を設定すること●

各要素には「セクション 01」「セクション 02」などの文字を表示すること

●

配色は任意

●

3つ以上の要素を切り替えること

B14：スクエア アニメーション（普通）大きな黄色の正方形で始まり、小さな赤い円に変わるアニメーションを作成しなさい。
アニメーションはビューの中央に配置する必要があり、ループする必要があります。

B15：表の背景色（簡単）
表の td 要素の背景色を、下図のようになるよう style.css を編集しなさい。 使用するカラー
コードは #fff 、#aaa とする。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

10 / 17

Part C: Front-End Development
C1：Canvasアニメーション（簡単）Canvas を使用して、高さ 300px、幅 400px のコンテナに円形のオブジェクトを描画しなさい。な
お円形オブジェクトは、ブラウザが再読み込みされたときに左から右に移動するアニメーションとして作成しなさい。

C2：計算（簡単）指定された配列に格納されている数字のうち、奇数のみを二乗し合計を計算する関数を実装しなさい。

C3：canvas による描画（普通）canvas を使用して、次の機能を備えた描画領域を作成しなさい。
●

マウスをドラッグして移動することで描画●

描画色を3色に切り替え

C4：アナログストップウォッチ（普通）HTML 内の #watch 内にアナログのストップウォッチを作成しなさい。この #watch は縦横 400pxとなっている。実装するのは秒針だけでよい。
スタートボタンをクリックすると計時開始（秒針が動き始める）、ストップボタンをクリックすると計時終了（秒針が停止する）、リセットボタンをクリックすると秒針が 0 にもどる機能とすること。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

11 / 17

C5：行の追加と削除（難しい）
画面には表がある。この表は「 追加 」をクリックすると一番下に行を追加でき、「 削除 」をクリックすると行を削除できる。ただし入力行が1つの場合は削除できないようにしなさい。
また、表には数字入力ができる。入力された全ての数字の平均値を画面に出力できるようにしな
さい。※ json ファイルに格納されている情報は、全てダミーデータである。

C6：カーソルを追う（簡単）
配布されている index.html 内には #square が存在している。この #square が、ウィンドウ内にあるパソコンのマウスカーソルを追いかけるようにしなさい。

C7：マウスオーバー（簡単）HTML には img 要素が 3つある。この各要素におけるマウスオーバー時にそれぞれ “A”、”B”、”C”という文字が表示されるように CSS を編集しなさい。
例：1番目の img要素でマウスオーバーした時、その画像上に「A」と表示させること。

C8：RGBスライダー（普通）以下のような、赤、緑、青の値を調整するための3つのスライダーを持つRGBスライダーを実装しなさい。 ※ デザインは採点に含まない。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

12 / 17

C9：FizzBuzz（簡単）以下のプログラムを実装しなさい。
1 〜 100 までの数字を下記にある要件に注意しながら Console に出力しなさい。
3の倍数の場合は、数字の代わりに Fizz。5の倍数の場合は、数字の代わりに Buzz。3 、5 両方の倍数の場合は、数字の代わりに FizzBuzz とすること。

1 〜 15 の出力例
12Fizz
4Buzz
Fizz
78FizzBuzz
11Fizz1314
FizzBuzzC10：ローディングアニメーション（普通）
配布されている動画を元に、以下のようなCSSローディングアニメーションを作成しなさい。

C11：合計値（簡単）HTML 内の li 要素のテキスト部分には整数が記載されている。この整数の合計を計算し #calc 要
素内に出力しなさい。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

13 / 17

C12：ピクセルエディタ（普通）
下図のようなピクセルエディタを作成しなさい。

●

描画マスは、縦：16 x 横：16 で構成する●パレットは選択されている色が分かるようにすること●パレットが選択されている状態で、描画マスをクリックすると選択されてる色で描画●

保存機能は必要ない

C13：モーダルウィンドウの作成（普通）ブラウザで表示された要素をクリックしたら、モーダルウィンドウを表示させなさい。
●

モーダルウィンドウが表示中は、body要素はスクロールさせない●

モーダルウィンドウが表示中は、背景色を付けるなどして視覚的に分かりやすくすること●

モーダルウィンドウが表示中は、背景および閉じるボタンでモーダルウィンドウを閉じることができる●

レスポンシブで横幅：375pxで正しく確認できること

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

14 / 17

Part D: Back-End Development
D1：DB接続（簡単）
データベース compe に接続し、テーブル sample の全てのデータを 1行ずつ出力するプログラムを作成しなさい。

D2：重複を削除する（簡単）
配列を指定し、重複する値を削除し、新しい配列を表示しなさい。

D3：ページネーション（普通）JSON を読み取り、1ページにつき 10個のデータを表示させなさい。
別ページに移動するための 5ページ分のリンクを 1つのページに表示する必要があり、かつ前と次の 5ページを一度に移動するためのボタンを制作する必要がある。このページリンクは、中央に配置しなさい。
HTML / CSS / PHP のみ使用できるが、json データとページネーションコードの読み取りには、PHPのみを使用しなさい。Bootstrap を使用しても構わないが、JavaScript は利用できない。
※ jsonに格納されている情報は、全てダミーデータである。

D4：配列（簡単）
提供ファイルにいくつかの PHP配列がある。2つの配列を比較し、その共通項の値を文字列として出力する関数を完成させなさい。

D5：主要な色の取得（簡単）
素材で提供された画像から1つの主要な色を特定し 16進数の色コードを画面上に表示させなさい。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

15 / 17

D6：大小チェック（簡単）以下の条件の場合において機能を実行するコードを実装しなさい。
●

GET パラメータ num により出力するメッセージを変える●

50 より大きい場合「大きすぎます」●

50 より小さい場合「小さすぎます」●

50 の場合「50です」

例：「 http://192.168.33.10/D6/index.php?num=30」にアクセスがあった場合「小さすぎます」と表示される。

D7：画像に透かしを入れる （簡単）提供された画像に透かし（ .png ファイル）を付けなさい。透かしの位置は右下隅とすること。

D8：フォームバリデーション（普通）入力フォームに対してバリデーション機能を付けなさい。 バリデーションは送信ボタンをクリックしたらクライアントで行うこと。
パラメータ制限

Name

入力必須

Mail

アドレス形式の確認（＠ が含まれているかのみでよい）

Number1-10 の整数

D9：ファイルマネージャー（普通）
ファイルやフォルダの追加、ファイルやフォルダの削除、ファイルの編集や保存を行うことができるファイルマネージャーを作成しなさい。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

16 / 17

D10：簡易掲示板の作成（普通）同一ページ内で入力・表示を行う簡易掲示板を作成しなさい。JavaScriptは利用できない。
●

入力された内容は「 log.json 」に保存●

入力内容は「名前」「内容」とする●表示欄を設け「名前」「内容」「投稿日時」を表示する

D11：検索フォーム作成（普通）指定されたDBに接続し、検索フォームを作成しなさい。
●

検索するための入力フォームを1つ作成すること●検索された内容は、同ページ内に表示すること●

DBに格納されている情報は、検索時に該当するものをすべて表示すること

D12：末日の出力（簡単）
2022年 の 1月 から 12月 までの末日を一覧にして出力させなさい。
例：2022年01月31日

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

17 / 17