フロントエンド開発者のスキルをスクリーニングする方法 - HTMLとCSS

公開されました。 9月 8, 2020 最終更新日 10月 26, 2021

11分で読める

HTMLとCSS はフロントエンド開発者の最も基本的なスキルです。少なくともこの2つの基本的な理解を持っていないウェブ開発者に出くわすことは難しいでしょう。しかし、HTML と CSS は内部ロジックを必要としないため、他の言語と同じように尊重されるべきではないと考える人もいます。それは、HTML と CSS は計算コードを使うのではなく、Web ブラウザに Web ページをレンダリングするように指示する宣言型言語だからです。

開発者にとって、これら 2 つの言語の深い知識と専門知識を持っていることの価値はますます高まっています。開発者の HTML と CSS のスキルを確認することは、Java や C++ のような言語のスキルを確認するのと同じくらい重要です。確かに、漠然とした技術的な知識を持っている人であれば、HTML と CSS の基本的な知識を持っているはずです。結局、それだけでいいんですよね？と思われるかもしれませんが、そうではありません。

HTML と CSS は、フロントエンド開発のバックボーンを構成しています。 JavaScript.実際、これらの言語を定期的に使用しているバックエンド開発者はかなり多く見受けられます。これらの言語だけを使用している開発者を見つけることはできませんが、HTML と CSS は、現代のソフトウェア開発において、以下のようなことを確実に行うために十分に重要です。フロントエンド開発者を効果的に使用することができます。これらのアプリケーションは簡単に始めることができますが、高度なアプリケーションには深いスキルと理解が必要です。開発者がこのような理解を持っているかどうかを確認することが不可欠です。

の資質をチェックしてみましょう。ソフトウェアエンジニア.

1.HTMLとCSSとは何か、何のために使われるのか？

1.1 HTMLとは？

HTMLまたはハイパーテキストマークアップ言語は、ウェブページやウェブアプリケーションを作成するための標準的なマークアップ言語です。マークアップ言語はプログラミング言語とは異なり、ロジックを実行しません。その代わり、HTMLは画像、フォーム、リストなどの要素を使用して構造化された文書を作成するように設計されています。ブラウザがこの文書を解釈して、最終的に表示されるウェブページを作成するかどうかは、あなたが今読んでいるようなウェブページを作成するかどうかにかかっています。

1.2 CSSとは？

CSSまたはカスケード・スタイル・シートは、異なる要素がどのようにページに表示されるべきかの標準的な定義を提供しています。これはどういう意味でしょうか？あなたの家を塗装業者に塗装してもらいたい場合、それぞれの壁の色を伝えることができると想像してみてください。これは、HTMLだけを使って指示を出すのと似ています。それはあなたの塗装業者のために多くの指示を必要とし、書くのに時間がかかるでしょう。

しかし、私のように家の壁を全て同じ色にしたいと思っている人はいませんか？その場合は、ペンキ屋さんに全ての壁を同じ色に塗るように指示することになります。これは、CSSを使って指示を出すようなものです。CSSを使えば、ページ上の要素の標準的な外観を定義することができるので、新しい要素を作成するときはいつでも、デザインの標準をすべてそのまま維持することができます。これにより、指示が少なくて済み、色やフォントなどの新しい要素がページの残りの部分と一貫したものになります。

1.3 HTMLやCSSは何に使うの？

HTML と CSS は共に使用され、World Wide Web の基礎となっています。どちらも非常に人気があり、基本的な概念は簡単に学ぶことができます。JavaScriptと合わせて考えると、フロントエンド開発者の3つの必須スキルのうちの2つです。しかし、フロントエンド開発者は、良い仕事をするためには、基本的な概念だけでなく、それ以上のことを知っている必要があります。

2.フロントエンド開発者のスキルHTMLとCSSについて、IT採用担当者が知っておくべきこととは？

2.1 標準

W3C（World Wide Web Consortium）は、HTMLやCSSの標準を作成する国際標準化団体です。つまり、HTMLの最新バージョンはHTML5であり、W3C規格ではなくWHATWG規格（いわゆるHTML Living Standard）に準拠しています。CSS 3以降はモジュールに分かれていて、モジュールごとに独立したバージョンになっているため、CSSには単一のバージョンはありません。

フロントエンドの開発者はもちろん、ほぼすべての開発者は、少なくとも HTML と CSS の基本的な理解を持っていなければなりません。HTML や CSS の開発者が独立した立場にあることはほとんどありません。ほとんどの場合、フロントエンド開発者やフルスタック開発者、グラフィック/ウェブデザイナーのスキルの一つに過ぎません。

標準はあまり頻繁には変更されません。しかし、新機能は定期的に登場するので、開発者は常に最新の状態を保つ必要があります。ここ数年、CSS の新機能や更新は一貫して行われています。バックエンドの開発者は、この技術がどれほど強力なものになったかに気付いていないかもしれません。

2.2 ツール

各ブラウザは、CSS と HTML を微妙に異なる方法で解釈します。開発者は、異なるブラウザ間の違いや、異なる HTML/CSS バージョンのサポートについて知っておく必要があります。さらに、開発者はクロスブラウザの HTML/CSS コンテンツを作成するために使用できるツールを知っておく必要があります。

JavaScriptフレームワークを使用するフロントエンド開発者は、通常、すぐに使えるコンポーネントが満載のライブラリを使って作業します。しかし、本番さながらのアプリケーションを作成するには、製品のデザインにスタイルを適応させる必要があります。この種の適応には、多くの場合、CSS の高度な知識が必要となります。

ウェブページを簡単に高速化するために、開発者はフロントエンドフレームワーク（Bootstrapなど）やスタイルシート言語（LESSやSCSSなど）のような追加ツールを使用することがよくあります。

2.3 ユーザーエクスペリエンス（UX

UXはフロントエンド開発。有能なフロントエンド開発者は、ユーザーの視点からウェブページやアプリケーションを見る能力を持っていなければなりません。それは、UXを全体的に最適化することを意味します。不要なクリックを削除したり、ページの読み込み速度を最適化してパフォーマンスを向上させるなど、アプリケーションの改善を提案することは、最適化の2つの例です。

レスポンシブWebデザイン（RWD）は、フロントエンド開発者がUXのために考慮しなければならないもう一つの重要なテクニックです。これは、画面サイズやプラットフォーム、向きに応じて、ユーザーの行動や環境に応じた設計・開発を行うことを提案するアプローチです。

最後に、a11y（「アクセシビリティ」という用語の略語）は、テック業界で広く議論されている動きであり、もう一つの重要なUXの考慮事項となっています。これは、技術と関係のある特定の基準、測定、または法律を指しているのではなく、むしろ障害者を考慮してウェブサイトを構築する方法の変化を指しています。このプロジェクトは、視覚障害や別の病気などの障害を持つ人々にとって、ウェブページをより消化しやすく、最新のものにし、寛容なものにすることを目指しています。

出典はこちら。Unsplash (アンスプラッシュ) サファールサファロフ

3.フロントエンド開発者のHTMLとCSSのスキルを履歴書でスクリーニングする

多くの採用担当者がフロントエンド開発者のHTMLとCSSの知識を最初に知るヒントは、候補者の履歴書に書かれていることです。シンプルなHTMLとCSSのスキル（フロントエンド開発者であれば誰もが持っているはず）だけでなく、候補者がどれだけフロントエンド技術スタックに精通していて、最新の知識を持っているかを見ることも重要です。ここでは、フロントエンド開発者に何を求めるべきかを理解するのに役立つように、注目すべきスキルの用語集と、候補者が知っておくべきことをまとめています。

3.1 技術系採用担当者のためのHTML・CSS用語集

フロントエンドフレームワーク	Bootstrap、Foundation、Semantic UI、Pure、UIkit、Bulma
CSS プリプロセッサ	Sass、LESS、スタイラス、CSS-Crush、神話、リワーク、コンパス、PostCSS
HTML5 フレームワーク	Skeleton、HTML KickStart、Montage、SproutCore、Zebra。
アニメーション	レスポンシブウェブデザイン（RWD
アクセシビリティ	A11Y
コンベンション	ブロックエレメントモディファイア
金型	CSSモジュール、CSS in JS
その他・雑感	HTML5 ボイラープレート

3.2 HTMLの標準 - HTMLの種類

HTML 4 - 1997年にW3Cによって勧告されたHTMLの基本バージョン
XHTML - HTML4の拡張版で、HTML4をより厳密にしただけのもの。 HTMLにXMLの機能をいくつか取り入れた。
HTML5 - HTML規格の最新バージョン。最も広く使われている。

3.3 CSS規格

CSS 2 - 1998年にW3Cによって公開されたCSSレベル2の仕様。
CSS 2.1 - CSSレベル2リビジョン1、CSS2のエラーを修正
CSS 3 - 仕様をモジュールと呼ばれる異なるセクションに分割し、大きな変更を行いました。CSS 3では、新しいセレクタ、新しいプロパティ、ボックスモデルの変更など、多くの新機能が導入されました。

3.4 HTMLとCSSのフレームワーク

基本的なHTMLやCSSは簡単にコーディングできますが、最近のWebサイトは複雑化しており、そのままコーディングするのは非常に時間がかかります。幸いなことに、開発者はすべてを一から作る必要はありません。すぐに使えるコンポーネントを提供するフレームワークがあり、ページの外観を簡単にカスタマイズすることができます。

最も人気のあるFrameworksを探してみましょう。

ブートストラップ（v4
ファンデーション（最新バージョン6

3.5 フロントエンド開発者が知っておくべきHTMLとCSSのその他の分野

CSSは基本的には簡単に学ぶことができますが、開発者が効率的に使用するためには特別な努力が必要な領域があります。それは以下の通りです。

CSS フレックスボックスモデル
CSSグリッド
CSSボックスモデル
絶対配置のレイアウト要素
フロート付きレイアウト要素
CSSアニメーション

4.HTML/CSSの面接問題と回答

このような質問などがあります。此処.

4.1 HTMLインタビューの質問と回答

ドクタイプとは何をするものですか？

Doctypeは、文書がどのバージョンのHTMLを参照しているかを決定します。

多言語サイトの設計・開発では、どのようなことに気をつければよいのでしょうか。

この質問に対する受験者の回答は、世界のさまざまな地域の大規模サイトを構築した経験があるかどうかを示すものです。Unicodeエンコーディングのサポート、左から右への翻訳と右から左への翻訳、通貨、日付、複数形の翻訳の自動化、翻訳された文字列のパラメータ化などのトピックを含む回答は、知識のある受験者であることを示しています。

、、の違いを説明してください。

この質問への回答は、Webアプリケーション内でJavaScriptがどのように実行されるかについての候補者の知識に関連しています。通常、スクリプトは順番に実行されますが、やはスクリプトを別の順番で読み込むためのテクニックです。

なぜ一般的にCSSを配置するのが良いのでしょうか？ <link href="">あいだ <head></head> とJS <script>s just before </body>? Do you know any exceptions?</script>

HTMLの文書構造を高度に理解していることを示す問題です。CSSのリンク <head> は、ページ内のあらゆるコンテンツがレンダリングの最初から正しく構造化されていることを確認します（コンテンツの一時的な点滅はありません）。一方、JSの読み込みが <body> は、コンテンツが表示された後、ブラウザにJSの実行を促します。

プログレッシブ・レンダリングとは何ですか？

回答は、候補者がサイトのパフォーマンスに注意を払っていることを示します。プログレッシブレンダリングとは、閲覧したページの一部をより速く読み込むための技術です。

4.2 CSSインタビューの質問と回答

CSSセレクタの特異性とは何ですか？

この質問は、候補者が大規模なウェブサイトの構築やメンテナンスを行う機会があり、複数のスタイルシート（矛盾する可能性がある）を担当したことがあるかどうかを知るためのものです。あるブロックに多くの相反するスタイルシートが適用されている場合、CSSはどれがより重要であるかを判断する必要があります。

CSSの「リセット」と「正規化」の違いは？あなたならどちらを選びますか？

回答は、候補者がブラウザ間の違いを取り除く経験を持っているかどうかを示します。リセットはデフォルトのスタイルを削除すること、ノーマライズは結果を統一することです。

フロートとその仕組みについて説明してください。

回答は、CSSの基本的な部分を決定します。フロートは、コンテナ内に要素を配置する方法を決定します。

BFC（Block Formatting Context）とその仕組みについて説明します。

答えは、候補者がブロックがどのようにページを構成しているか、またブロックがどのように相互に調整できるかを理解しているかどうかで決まります。

様々なクリアリングの手法がありますが、どの手法がどのような状況に適しているのでしょうか？

この問題への回答は、CSSの基本的な知識を示しています。最も一般的な3つのテクニックは、"clear: both"、overflowプロパティ、":after "擬似セレクタです。

ブラウザ固有のスタイリングの問題をどのように解決しますか？

この質問への回答は、候補者が多くの異なるデバイス上のユーザーに一貫したルック＆フィールを保証する方法を理解しているかどうかに関連しています。解決策の例としてnormalize.cssがあります。

機能制限のあるブラウザに対して、どのようにページを提供していますか？

ユーザーの中には古いバージョンのブラウザを使っている人もいるかもしれないし、コードベース内のCSS機能がサポートされていないかもしれないということを受験者が認識していることを示す回答になります。これは、ニュースサイトのような大規模なサイトを作成する際には特に重要なことです。

どのようなテクニックやプロセスを使っていますか？

Graceful Degradation - 不足しているブラウザ機能のフォールバックを提供することで、何かがサポートされていない場合でも可能な限り同様のUXを提供します。

プログレッシブ・エンハンスメント - ベースユーザーに機能を提供することに重点を置き、ブラウザがサポートする場合にのみ新しい機能を追加します。

コンテンツを視覚的に隠す（スクリーンリーダーでのみ利用可能にする）には、どのような方法がありますか？

この質問への回答は、候補者がWebサイトへのアクセシビリティ（a11y）を提供した経験があるかどうか、つまり障害者にとって平等なUXを確保しているかどうかを確認します。この特定のシナリオは、コンテンツが目の見えるユーザーにとって視覚的に明らかであり、スクリーン・リーダーが情報を提供するためのフォールバック情報が利用できる場合に発生するはずです。

5.オンラインテストを利用したHTML・CSSフロントエンド開発者スキルの技術審査

フロントエンド開発者は、Webページやアプリのフロントエンドを構築するために存在します。開発者が基本的なコンセプトを理解しているかどうかは重要ですが、それを実際の仕事に応用できるかどうかはもっと重要です。これは、次のような方法で行うことができます。コーディングテスト或いはプログラミングインタビューしかし、これらのテストのためのプラットフォームはすべて同じように作られているわけではありません。

5.1 フロントエンド開発者のスキルをテストするには、どのHTMLとCSSのコーディングテストを選ぶべきか？

適切なHTMLとCSSのオンラインコーディングテストを探す際には、以下の条件に合致しているかどうかを確認する必要があります。

テストでは、実際のフロントエンドプロジェクトでHTMLやCSSを活用し、実際に行われている作業を反映させる必要があります。
時間効率が良い - 最大1～2時間。
自動的に送信され、どこにでも持ち出すことができるので、あなたと候補者に柔軟性を与えます。
コードがページをレンダリングするかどうかをチェックするだけでなく、コードの効率性や、複数のプラットフォームでのレンダリング性もチェックします。
できるだけ自然なフロントエンド開発環境に近づけ、候補者が普段仕事で使うようなリソースにアクセスできるようにする。
仕事に最も重要なものを含め、通常使用するすべてのライブラリ、フレームワーク、およびその他のツールへのアクセスを候補者に提供する。
候補者の能力を適切なテストに合わせる

6.フロントエンド開発者のスキルを評価するための DevSkiller のすぐに使えるオンライン HTML および CSS コーディングテスト

DevSkillerのRealLifeTestingTM手法は、開発者がすでに仕事をしているかのようにテストするために作られています。開発者は、あらかじめ決められた結果を得るために、1ページだけのテストを受けるのではありません。DevSkillerでは、フロントエンドの開発者は、自分のスキルを最大限に発揮するために開発した複数ファイルのプロジェクトでテストを受けます。ここでは、HTMLとCSSを取り入れたいくつかのプレメイドテストをご紹介します。

1.HTMLとCSSとは何か、何のために使われるのか？

1.1 HTMLとは？

1.2 CSSとは？

1.3 HTMLやCSSは何に使うの？

2.フロントエンド開発者のスキルHTMLとCSSについて、IT採用担当者が知っておくべきこととは？

2.1 標準

2.2 ツール

2.3 ユーザーエクスペリエンス（UX

3.フロントエンド開発者のHTMLとCSSのスキルを履歴書でスクリーニングする

3.1 技術系採用担当者のためのHTML・CSS用語集

3.2 HTMLの標準 - HTMLの種類

3.3 CSS規格

3.4 HTMLとCSSのフレームワーク

最も人気のあるFrameworksを探してみましょう。

3.5 フロントエンド開発者が知っておくべきHTMLとCSSのその他の分野

4.HTML/CSSの面接問題と回答

4.1 HTMLインタビューの質問と回答

ドクタイプとは何をするものですか？

多言語サイトの設計・開発では、どのようなことに気をつければよいのでしょうか。

、、の違いを説明してください。

なぜ一般的にCSSを配置するのが良いのでしょうか？ <link href="">あいだ <head></head> とJS <script>s just before </body>? Do you know any exceptions?</script>

プログレッシブ・レンダリングとは何ですか？

4.2 CSSインタビューの質問と回答

CSSセレクタの特異性とは何ですか？

CSSの「リセット」と「正規化」の違いは？あなたならどちらを選びますか？

フロートとその仕組みについて説明してください。

BFC（Block Formatting Context）とその仕組みについて説明します。

様々なクリアリングの手法がありますが、どの手法がどのような状況に適しているのでしょうか？

ブラウザ固有のスタイリングの問題をどのように解決しますか？

機能制限のあるブラウザに対して、どのようにページを提供していますか？

どのようなテクニックやプロセスを使っていますか？

コンテンツを視覚的に隠す（スクリーンリーダーでのみ利用可能にする）には、どのような方法がありますか？

5.オンラインテストを利用したHTML・CSSフロントエンド開発者スキルの技術審査

5.1 フロントエンド開発者のスキルをテストするには、どのHTMLとCSSのコーディングテストを選ぶべきか？

6.フロントエンド開発者のスキルを評価するための DevSkiller のすぐに使えるオンライン HTML および CSS コーディングテスト

テストされたスキル

選択問題

コードギャップ

選択問題

プログラミングタスク - レベル。簡単

テストされたスキル

選択問題

コードギャップ

プログラミングタスク - レベル: ハード

テストされたスキル

選択問題

コードギャップ

プログラミングタスク - レベル。中程度

テストされたスキル

プログラミングタスク - レベル: ハード

プログラミングタスク - レベル: ハード

テストされたスキル

選択問題

プログラミングタスク - レベル。簡単

テストされたスキル

選択問題

プログラミングタスク - レベル: ハード

テストされたスキル

テストされたスキル

テストされたスキル

コードギャップ

選択問題

プログラミングタスク - レベル。中程度

テストされたスキル

選択問題

プログラミングタスク - レベル: ハード

プログラミングタスク - レベル: ハード

技術者の採用についてはこちら

関連記事

シームレスにコーディングスキルを検証＆開発