HTMLとCSSは、いくつかの理由でインタビューするのが困難です。
たとえばプログラミング言語と比較すると、それらは基本的すぎます。
彼らは仕事の文脈に大きく依存しています。例：
Googleスケール、非常に高速で最適化されたWebサイトを作成する場合、仕事のためにインタビューする人々はCSSスプライトを無視できません。
XHTML W3Cの有効なWebサイトを作成する場合、候補者がXHTML 1.0とXHTML 1.1の違い、またはの必須属性<img/>などを知っていることを確認する必要があります。
ハッキングに満ちたひどいWebサイトを作成する場合は、インタビューする人々に、そのようなハッキングをどのように行うか、どのブラウザーに対して異なるCSSを提供するかなどについて質問する必要があります。
等
それが純粋なHTMLとCSSの仕事であれば、その人は一方でデザイナーと、他方で開発者と協力しなければなりません。彼らはHTMLとCSSを知っている必要がありますが、もっと価値があるのは、それらの人々と対話し、デザイナーのニーズ、開発者の要件、HTMLとCSSの制約の両方を理解する能力です。
たとえば、JavaScript開発者が後でインタラクティブ機能を簡単に追加できるような方法でHTMLを構成する方法を知っている必要があります。
いくつかの基本的な質問から始めてください。
お気に入りのブラウザは何ですか？
その人が「Internet Explorer」と答えたら、すぐにインタビューを停止します。そのような人は必要ありません。
いいえ、冗談です。答えは無関係です。代わりに、次を尋ねることができます。
お気に入りのブラウザで使用するデバッグツールについて教えてください。
主にChromeを使用して、毎日Developer Toolsを使用しています。これらのツールを使用すると、次のことができます。
ページから行われたリクエストを表示し、
ページと関連リソース、特にDNSルックアップ、待機時間、受信時間の読み込みにかかる時間を調べ、
送信された要素のヘッダーとキャッシュインジケーターを調べ、
DOMを表示して、CSSセレクターがどのように適用されるかを調べます。
また、高いスケーラビリティを必要とするWebサイトの最適化のチェックリストとして機能するYSlowを使用します。YSlowは、サーバーが正しく構成されている（正しいヘッダーを送信するなど）かどうかを判断する際にも役立つツールです。
Firefoxでは、Chromeの開発者ツールに非常によく似たツールであるFirebugを使用します。開発者用ツールはInternet Explorerの新しいバージョンでも利用でき、IE7からIE10への互換性ビューに切り替えることもできます。この最後の機能は非常に役立ちます。これがないと、レガシーテストのためだけに複数の仮想マシンをインストールするか、Litmusなどの有料サービスをより頻繁に使用する必要があります。
<dl/>タグについて教えてください。このタグの使用目的は何ですか？実際にはどのように使用されていますか？この拡張された使用法についてどう思いますか？
ここでは、<dl/>1つのキー<dt/>を1つまたは複数の値に関連付けて、辞書用であると説明できるようにする必要があります<dd/>。このタグの主な使用法は純粋にセマンティクスに関連していましたが、実際にはテーブルを置き換えるために広く使用されていました。良い例はPHPBB3です。これは、テーブルがページのレンダリングを遅くしている場合には良いことですが、注意して使用する必要があります。を使用せずにコンテンツを説明するリスト<dl/>。
固定レイアウトと流動レイアウトの違いは何ですか？それぞれの長所と短所は何ですか？
固定レイアウトには、要素の幅が事前定義されています。流体レイアウトの要素は、ページの幅に依存します。
固定レイアウトにより、特にフル幅のグラフィックが多数ある場合に、ページの設計が容易になります。グラフィックスがなくても、正確なケースのみを管理するため、さらに簡単です。たとえば、Programmers.SEは固定レイアウトのWebサイトであり、質問と回答を表示する列のサイズは常に同じです。この列に流動的なレイアウトを使用すると、問題が発生します。小さな画面では、行が短すぎるためにテキストが判読できなくなりますが、大きな画面では、行が非常に大きくなるため、読めないでしょう。
固定レイアウトの問題は、いくつかの最も使用されている解像度ではうまく機能するが、それ以外の場合は多かれ少なかれ失敗することです。非常に大きくて広いモニターの採用と、小さなモバイルデバイスでのインターネットの使用の増加により、特に重要になります。
流動的なレイアウトはそれを助けますが、そのようなウェブサイトの設計はより困難です。適切に管理されていないプロジェクトの一部のシナリオでは、これにより、HTMLおよびCSSのハック、大きなページ、保守性の低下、開発中のコストの増加、期限の遅れが発生する可能性があります。
流動的なレイアウトのページで、テキストの列が大きくなりすぎて読みにくくなる状況を回避するにはどうすればよいですか？
max-widthプロパティを使用して、テキストゾーンの幅を制限できます。
このコードについてどう思います<p color="Red" align="Center">Text here</p>か？
このコードには、HTML内にプレゼンテーションロジックを混在させる欠陥があります。プレゼンテーションロジックは、いくつかの理由でCSSに配置する必要があります。
- 懸念事項とクリーンなコードの分離に役立ちます。つまり、後でメンテナンスが安くなり、
- スタイルをページ間で再利用できるようにします。これにより（保守性の問題以外）、Webサイト全体で同じスタイルを使用していることを確認できます。
- CSSファイルがキャッシュされるため、帯域幅の削減に役立ちます。
そのような基本的な質問をいくつかした後、さらにトリッキーな質問をすることができます。
単一のセレクターでターゲットにできない複数の要素に色やフォントが適用されている場合、CSSで色やフォントが重複しないようにするにはどうすればよいですか？欠点はありますか？
これを行うには、SassやLESSなどのCSSプリプロセッサーを使用します。これらは、後でスタイルで使用できる変数内のスタイルの色、フォント、およびその他の部分を定義できます。
CSSプリプロセッサの欠点は次のとおりです。
ブラウザで最新のCSSコードを使用するために、開発および展開のワークフローを変更する必要がある場合があります。
それらは少数の開発者のみが知っているため、新しい人が後でプロジェクトに参加したり、プロジェクトを維持したりするのが難しくなります。
SassまたはLESS用の優れたIDEも高速なIDEもありません。また、最も人気のあるIDE内での統合はかなり残念です。
hrefこの画像がHTTPとHTTPSの両方を介してアクセスできるWebサイトに表示される場合、CDNにある画像の値の例を教えてください。
HTTPSでは、呼び出されたすべてのリソースもHTTPSである必要があるため（そうでない場合、多くの場合、ユーザーにセキュリティ警告が表示されます）、リンクをとして指定することはできませんhttp://cdn.example.com/image.png。画像に適切にリンクするには、//cdn.example.com/image.png使用する必要があります。ブラウザは、コンテキストに応じて、http:または先頭に追加さhttps:れます。
Webサイト上のページのサイズとリクエスト数を最適化できず、コンテンツを変更したりAJAXを追加したりできない場合、Webサイトが高速であるという印象をユーザーに与えるにはどうすればよいですか？HTMLの観点から何が関係しますか？
HTTP 1.1が使用される場合、ページはチャンクされる場合があります。これは、最初の部分がより速く表示され、Webサイトが実際よりも速いという印象を与えることを意味します。チャンク転送エンコードはHTTP 1.0では不可能です。つまり、この場合は何もすることがありません。
チャンク化されたコンテンツを提供できるようにするには、HTMLの観点から要素を並べ替えて、最も重要な要素をファイルの先頭に配置する必要があります（ページの先頭に表示する必要があるわけではありません）。たとえば、eコマースWebサイトでは、ユーザーが製品の詳細を確認したい場合、最初のチャンクに<head/>と製品の詳細を含めることができます。次のチャンクには、ウェブサイトのロゴ、メインメニュー、著作権などの主要な要素を含めることができます。最後に、最後のチャンクには「これを買った人も買った」セクション、製品のコメント、評価、 「Facebookで共有」など
最後に、実世界のシナリオで作業するように候補者に依頼できます。以下の最も簡単なものから、CSSスプライトやその他の高度な最適化手法、ブラウザーの不整合などに対処しなければならない複雑なシナリオまで、何でもかまいません。
2つのゾーンを持つXHTMLページを作成してください：左のゾーンにはリストがあり、右のゾーンにはテキストがあります。2つのゾーンは、ページの最上部から最下部まで伸びる垂直線で区切られています。リストとテキストのサイズはさまざまですが、どれが最大の高さになるかを予測することはできません。<table/>s は使用できません。
実際、それは非常に簡単ですが、高さについて考える反射神経があるかどうかを示します。経験の浅い候補者はfloat:leftゾーンとゾーンを作成しますborder-left:solid 1px #ccc;が、左側のゾーンに境界線を追加し、2つの境界線が同じ場所になるように拡張することを忘れます。
