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

公開されました。 9月 8, 2020 最終更新日 2月 2, 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エンコーディングのサポート、左から右への翻訳と右から左への翻訳、通貨、日付、複数形の翻訳の自動化、翻訳された文字列のパラメータ化などのトピックを含む回答は、知識のある受験者であることを示しています。