採用向けCSSテスト
候補者が実際のページのCSSコードをどのように読み解くかを確認できます。
- 10分
- 15問
- 中級
- 選択式
- 英語の問題
- スマートフォン・デスクトップ
簡単に言うと
CSSテストは、実際のページで使うCSSの読み書きを問う、15問の選択式テストです。制限時間は10分です。セレクターと詳細度、ボックスモデルによるサイズ設定とレイアウト、最新のスタイル機能、基本構文を測定します。フロントエンド開発者、CSSおよびUI開発者、コードを書くWebデザイナー、インターフェースを構築するフルスタック開発者を対象としています。
測定する内容
実践的なCSSの知識：セレクターと詳細度、ボックスモデルとレイアウト、最新のスタイル機能、基本構文。
セレクター、詳細度、カスケード
候補者はセレクターと宣言を確認し、カスケードでどのルールが優先されるかを考えます。
レイアウト
ボックスモデルによるサイズ設定や要素の配置について、候補者の考え方を問います。
応用的なスタイル設定
候補者はカスタムプロパティ、関数、コンテナクエリがどのような結果を生むかを考えます。
構文と基礎
短いスタイルシートやHTMLのコード片を使って、CSSの基本構文を確認します。
問題形式
選択式
候補者： 短い状況説明、表、または文を読み、正解またはすべての正解を選びます。
確認できる内容： 候補者が内容を認識するだけでなく、実際に活用できるほど理解しているかを測定します。
10分で問題15問を1問ずつ出題
このテストに適した職種
フロントエンド開発者、CSSおよびUI開発者、コードを書くWebデザイナー、インターフェースを構築するフルスタック開発者。
このCSSアセスメントでわかること
履歴書だけではわからないスキルの証拠
経験についての説明だけに頼らず、候補者がコード内のCSSルール、サイズ設定、配置をどのように読み解くかを確認できます。
スキルを集中的に確認
短いテストで詳細度、レイアウト、最新のスタイル機能、構文を確認してから、さらに詳しく確認する内容を決めましょう。
共通のスタートライン
候補者全員に同じ15問形式で実施できます。メモ用紙は使用でき、サイズの計算に電卓は必要ありません。
面接で役立つ追加質問
結果をもとに関連性の高い実務課題を選び、候補者に考え方を尋ねましょう。
候補者ごとに得られる内容
- テスト中、テストのタブを離れずに受験
- 回答の貼り付けなし
- 一定のペースで回答
スコア、プロフィール、Integrity Scoreのシグナルは、面接とあわせて確認するための情報です。自動的な判断には使われません。
テストの設計とインテグリティシグナル
受験するたびに、大規模な問題プールから異なる問題セットが出題されます。問題と選択肢の順番は入れ替わり、候補者には1問ずつ表示されます。10分のタイマーはサーバー上で動作し、候補者は前の問題に戻れません。ページを再読み込みすると、同じ問題が残り時間とともに復元されます。問題文のコピーや選択はできません。HireValidは、テスト画面から離れていた時間、回答欄への貼り付け、問題を読むには短すぎる時間での回答などのシグナルを記録します。雇用主が確認できるよう、Integrity Scoreと証拠のタイムラインが提供されます。どちらも単独で判断を下すものではありません。HireValidのテスト作成方法をご覧ください。
スコアを出発点として活用する
スコアは担当者が確認するための証拠として扱い、採用の判断そのものにはしないでください。次の手順で活用します。
- セレクターと詳細度、レイアウト、最新のスタイル機能、構文に関する結果を確認します。
- その職種のインターフェース業務を反映したCSSの実技課題と組み合わせます。
- 実技課題とあわせてスコアを考慮しながら、構造化面接で候補者の判断について話し合います。この手順については、構造化面接ガイドをご覧ください。
構造化面接の質問
スタイルルールが適用されないページを、どのように調べますか？
該当するセレクター、詳細度、カスケードを調べる実践的な方法と、その理由の説明に注目します。
ページレイアウト内のカードのサイズと配置を、どのように決めますか？
暗記した定義ではなく、ボックスモデルと意図する配置についての明確な考え方に注目します。
スタイル設定の作業で、カスタムプロパティや関数をどのように使うか教えてください。
具体的な用途と、そのCSSでどのような結果になるかの説明に注目します。
コンテナクエリが期待どおりの結果にならない場合、何を確認しますか？
コードと意図するレイアウトに沿った、段階的な説明に注目します。
公平性と配慮措置
問題には、わかりやすいクラス名と、カード、メニュー、フォームなどの一般的なページ要素を使った短く中立的なコードを使用します。慣用表現、地域固有の知識、ブランド名は含みません。回答は特定のブラウザーの挙動ではなく、現行のCSS標準に基づきます。色に関する問題も、表示された色を見るのではなく、コードから回答します。候補者全員がメモ用紙を使用できます。また、サイズを求める問題には電卓が不要な整数を使用します。
配慮措置として、候補者に追加の時間を与えることができます。結果は人が確認するための情報であり、自動的に判断を下すものではありません。
暫定：候補者200人が受験を完了した時点で信頼性を報告します。
テストの詳細
実際のページで使うCSSの読み書きを問う、短時間のテストです。候補者は短いスタイルシートやHTMLのコード片を見て、どのルールが優先されるか、要素のサイズや配置はどうなるか、カスタムプロパティ、関数、コンテナクエリなどの最新機能がどのような結果を生むかを考えます。
- 問題は英語です。
- 使用可能な補助具：メモ用紙。
- 各質問に順番に一度ずつ回答します。前の質問に戻ることはできません。
- 時間制限付きテストの前に、練習問題4問（3分）
よくある質問
CSSアセスメントで測定できること+
短いスタイルシートやHTMLのコード片を使って、実践的なCSSの知識を確認します。候補者は、どのルールが優先されるか、要素のサイズや配置はどうなるか、カスタムプロパティ、関数、コンテナクエリなどの最新機能がどのような結果を生むかを考えます。
CSSテストの所要時間はどれくらいですか？候補者は前の問題に戻れますか？+
CSSテストは、15問の選択式問題で制限時間は10分です。候補者は前の問題に戻れません。練習セットは4問で、所要時間は3分です。メモ用紙を使用できます。
CSSアセスメントが適している職種+
フロントエンド開発者、CSSおよびUI開発者、コードを書くWebデザイナー、インターフェースを構築するフルスタック開発者を対象としています。採用する職種のCSSやレイアウト業務を反映した実技課題と組み合わせてください。インターフェース開発の採用では、[Angularテスト](/tests/programming-skills/angular)と比較することもできます。
CSSテストのスコアはどのように解釈すればよいですか？+
結果は確認用の証拠として扱い、決定的な評価や、それだけに基づく採用判断には使わないでください。CSSの実技課題と比較し、構造化面接で候補者の選択について話し合いましょう。候補者に配慮した採用プロセスについては、[候補者に配慮した採用ガイド](/guides/candidate-friendly-hiring)をご覧ください。
関連テスト
次回の採用でCSSテストを活用しましょう
Freeプランには必須テスト5種が含まれ、有料プランにはすべてのテストライブラリが含まれます。