CSS インタビューの質問と回答トップ 50 (2024)
ここでは、新人だけでなく経験豊富な候補者も夢の仕事に就くための CSS (CSS3) 面接の質問と回答を紹介します。
1.CSSとは何ですか?
CSS の完全な形式はカスケード スタイル シートです。 これは十分にシンプルなスタイリング言語です。 HTML 要素。 Web デザインでよく使われており、XHTML でもその応用が一般的です。
2. CSS の起源は何ですか?
標準の汎用マークアップ言語は、1980 年代にスタイル シートの始まりを示しました。
3. CSS にはどのようなバリエーションがありますか?
CSS のバリエーションは次のとおりです。
- CSS 1
- CSS 2
- CSS 2.1
- CSS 3
- CSS 4
4. CSS の制限は何ですか?
制限事項は次のとおりです。
- セレクターによる昇順は不可
- 垂直制御の限界
- 表現はありません
- 列宣言がありません
- 動的動作によって制御されない疑似クラス
- ルール、スタイル、特定のテキストをターゲットにすることはできません
5. CSS の利点は何ですか?
利点は次のとおりです。
- 帯域幅
- サイト全体の一貫性
- ページの再フォーマット
- ユーザー補助
- プレゼンテーションから分離されたコンテンツ
6. CSS フレームワークとは何ですか?
これは、CSS 言語を使用して、より簡単で標準に準拠した Web ページのスタイル設定を可能にする、事前に計画されたライブラリです。
7. CSS1 を使用してブロック要素を中央に配置するにはどうすればよいですか?
ブロック レベルの要素は次の方法で中央に配置できます。
margin-left プロパティと margin-right プロパティは、明示的な値に設定できます。
BODY { width: 40em; background: fluorescent; } P { width: 30em; margin-right: auto; margin-left: auto }
この場合、左右のマージンは (40em ~ 30em) で残った XNUMX em を分割するため、それぞれ XNUMX em の幅になります。 BODY 要素の明示的な幅を設定する必要はありませんでした。 ここでは簡単にするためにこれを実行しました。
8. CSS 仕様は誰が管理していますか?
World Wide Web Consortium は CSS 仕様を維持しています。
9. CSS を Web ページとして統合できる方法は何通りありますか?
CSS は次の XNUMX つの方法で統合できます。
- インライン: Style 属性を使用して、CSS に HTML 要素を適用できます。
- 埋め込み: Head 要素には、コードを配置できる Style 要素を含めることができます。
- リンク/インポート: CSS を外部ファイルに配置し、link 要素を介してリンクできます。
10. 外部スタイルシートにはどのようなメリットとデメリットがありますか?
利点:
- XNUMX つのファイルを使用して、スタイルの異なる複数のドキュメントを制御できます。
- 複数の HTML 要素には多数のドキュメントを含めることができ、ドキュメントにはクラスを含めることができます。
- 複合状況でスタイルをグループ化するには、セレクターとグループ化としてのメソッドが使用されます。
デメリット:
- スタイル情報を含むドキュメントをインポートするには、追加のダウンロードが必要です。
- ドキュメントをレンダリングするには、外部スタイル シートをロードする必要があります。
- 小さなスタイル定義には実用的ではありません。
11. 埋め込みスタイルシートの長所と短所について話し合いますか?
埋め込みスタイルシートのメリット:
- XNUMX つのドキュメント内に複数のタグ タイプを作成できます。
- 複雑な状況では、Selector メソッドと Grouping メソッドを使用してスタイルを適用できます。
- 追加のダウンロードは不要です。
埋め込みスタイルシートのデメリット:
- 複数の文書を管理することはできません。
12. CSS セレクターとは何ですか?
CSSセレクターとは、HTML要素に相当する文字列を宣言したもの、またはその集合体であり、HTMLとスタイルシートをリンクする際に参照できるリンクです。
13. CSS が許可するメディア タイプを列挙しますか?
ドキュメントのデザインとカスタマイズはメディアによってレンダリングされます。 外部スタイル シートにメディア コントロールを適用することで、ネットワークからロードして取得して使用できるようになります。
14. 論理タグと物理タグを区別しますか?
- 物理タグは表示上のマークアップとも呼ばれますが、論理タグは外観には役に立ちません。
- 物理タグは新しいバージョンですが、論理タグは古いものであり、コンテンツに重点を置いています。
15. スタイルシートの概念を HTML と区別しますか?
HTML は簡単な構造方法を提供しますが、スタイル シートとは異なり、スタイルを備えていません。 さらに、スタイル シートには、より優れたブラウザ機能と書式設定オプションがあります。
16.「ルールセット」について説明してください。
ルールセット: セレクターは、ルールセットによって識別される他のセレクターに接続できます。
これには XNUMX つの部分があります。
- セレクター、例: R および
- 宣言 {text-indent: 11pt}
17. CSS の大文字と小文字の区別についてコメントしますか?
CSS には大文字と小文字の区別はありませんが、フォント ファミリや画像の URL などは区別されます。 の時だけ XML XHTML DOCTYPE とともに宣言がページで使用されており、CSS では大文字と小文字が区別されます。
18. 宣言ブロックを定義しますか?
プロパティ、コロン、値で構成される中括弧内の方向のカタログは、宣言ブロックと呼ばれます。
例: [プロパティ 1: 値 3]
19. さまざまなフォントの属性を入力しますか?
彼らは以下のとおりです。
- フォントスタイル
- フォントバリアント
- フォントの太さ
- フォントサイズ/行の高さ
- フォントファミリー
- キャプション
- アイコン
20. ファイルをインポートすると簡単に挿入できるのはなぜですか?
インポートすると、外部シートを組み合わせて多数のシートに挿入することができます。 異なるファイルとシートを使用して異なる機能を持たせることができます。 構文:
@import 表記法、一緒に使用されます tag.
21. クラスセレクターの用途は何ですか?
特定のスタイルに固有のセレクターは、CLASS セレクターと呼ばれます。 これによりスタイルの宣言やHTMLとの関連付けが行えます。 構文:
クラス名
A ~ Z、a ~ z、または数字を指定できます。
.top {font: 14em ;}、クラスセレクター
このクラスは要素に関連付けられています
22. クラスセレクターとIDセレクターを区別しますか?
クラスセレクターにはブロック全体が与えられますが、IDセレクターは他の要素と異なる単一の要素のみを優先します。 つまり、ID は一意ですが、クラスは一意ではありません。 要素がクラスと ID の両方を持つ可能性があります。
23. CSS に複数の宣言を追加できますか?
はい、セミコロンを使用することで実現できます。
24. 擬似要素とは何ですか?
疑似要素は、一部のセレクターに特殊効果を追加するために使用されます。 CSS は、HTML マークアップにスタイルを適用するために使用されます。 ドキュメントに追加のマークアップやスタイルを適用できない場合、CSS には疑似要素として知られる機能が利用できます。 実際のドキュメントを損なうことなく、ドキュメントに追加のマークアップを追加できます。
25. ハイパーリンクの下線を無効にする方法は?
制御ステートメントと外部スタイル シートは、ハイパーリンクの下線を無効にするために使用されます。
例えば:
B { text-decoration: none; } <B href="career.html" style="text-decoration: none">link text</B>
26. ページ全体で 100% 幅をフロートとともに使用するとどうなりますか?
float 宣言を行っている間、境界線として使用されるたびに 1 ピクセルが追加され、それ以降はさらに float が許可されます。
27. CSS を通じてデフォルトのプロパティ値を復元できますか? 「はい」の場合、どのようにして?
CSS では、デフォルト値がないため、古い値に戻すことはできません。 プロパティを再宣言して、デフォルトのプロパティを取得できます。
28. 使用されているさまざまなメディア タイプを列挙しますか?
大文字と小文字が区別されないため、メディアが異なればプロパティも異なります。
彼らは以下のとおりです。
- Aural – サウンド シンセサイザーおよびスピーチ用
- 印刷 – 印刷時にコンテンツのプレビューを表示します
- 投影 - CSS をプロジェクターに投影します。
- ハンドヘルド - ハンドヘルド デバイスを使用します。
- スクリーン - コンピューターとラップトップのスクリーン。
29. CSSボックスモデルとは何ですか?またその要素は何ですか?
このボックスは、CSS の要素のデザインとレイアウトを定義します。 要素は次のとおりです。
マージン: 最上層、全体構造が表示されます。
ボーダー: 周囲に境界線が付いたパディングとコンテンツのオプションが表示されます。 背景色は境界線に影響します。
パディング:スペースを表示します。 背景色は境界線に影響します。
コンテンツ:実際の内容が表示されます。
30. コンテキストセレクターとは何ですか?
要素の特別な出現を選択するために使用されるセレクターは、コンテキスト セレクターと呼ばれます。 個々のセレクターはスペースで区切られます。 この種のセレクターでは、パターンの最後の要素のみがアドレス指定されます。 例: TD P TEXT {色: ブルー}
31. RGB 値を XNUMX 進数のカラーコードと比較しますか?
色は次の XNUMX つの方法で指定できます。
- 色は 6 文字、つまり 00 進数のカラーコーディングで表されます。 これは数字と文字の組み合わせであり、先頭に # が付きます。 例: g {カラー: #XNUMXcjfi}
- 色は赤、緑、青の混合によって表現されます。 色の値を指定することもできます。 例: rgb(r,g,b): このタイプでは、値は整数 0 ~ 255 の範囲にあります。 rgb(r%,g%,b%): 赤、緑、青のパーセンテージが表示されます。
32. コンテキストを含む画像スプライトを CSS に定義しますか?
一連の画像が XNUMX つの画像にまとめられると、それは「画像スプライト」として知られます。 Web ページ上のすべての画像を読み込むには時間がかかるため、画像スプライトを使用すると時間が短縮され、情報がすぐに得られます。
CSSコーディング:
img.add { width: 60px; height: 55px; background: url (image.god) 0 0; }
この場合、必要な部分のみが使用されます。 これにより、ユーザーは大幅なマージンと時間を節約できます。
33. CSS のグループ化とネストを比較しますか?
グループ化: 同じプロパティ値を持つセレクターをグループ化することができ、コードが削減されます。
例:
h1 { color: blue; } h2 { color: blue; } p { color: blue; }
コードから、すべての要素が同じプロパティを共有していることがわかります。 各セレクターをカンマで区切って記述することで書き換えを回避できます。
ネスト: セレクター内でセレクターを指定することをネストと呼びます。
P { color: red; text-align: left; } .marked { background-color: blue; } .marked p { color: green; }
34. 要素の寸法はどのように定義できますか?
ディメンションのプロパティは次のように定義できます。
- 高さ
- 最大高さ
- 最大幅
- 最小高さ
- 最小幅
- 幅(Width)
35. CSSのfloatプロパティを定義しますか?
floatプロパティにより、画像を左右に移動させてテキストを回り込ませることができます。 このプロパティが適用される前の要素のプロパティは変更されません。
36. Z インデックスはどのように機能しますか?
CSS を使用して HTML 要素を配置すると、重複が発生する場合があります。 Z インデックスは、重複する要素を指定するのに役立ちます。 これは正または負の数値であり、デフォルト値はゼロです。
37. グレースフル デグラデーションとは何ですか?
コンポーネントに障害が発生した場合でも、正常な機能低下が発生しても引き続き適切に動作します。 Webページのデザインには最新のブラウザアプリケーションが使用されます。 誰でも利用できるわけではありませんが、より幅広いユーザーが使用できるようにするための基本機能があります。 画像を表示できない場合は、alt タグを使用してテキストが表示されます。
38. プログレッシブエンハンスメントとは何ですか?
これは、Web の問題に焦点を当てたグレースフル デグラデーションに代わるものです。 機能は同じですが、最新の帯域幅を持つユーザーに追加の利点を提供します。 最近ではモバイルインターネット接続の裾野が広がり、その利用が顕著になっています。
39. CSS で下位互換性を設計するにはどうすればよいですか?
HTML シートのメソッドは CSS と連携して使用されます。
40. 画像の下の隙間はどうすれば解消できますか?
インライン要素である画像はテキストと同じように扱われるため、ギャップが残りますが、これは次の方法で削除できます。
CSS
img { display: block ; }
41. @import が一番上にあるのはなぜですか?
@import は、ルールのオーバーライドを避けるために、先頭でのみ優先されます。 一般に、Java、Modula などのほとんどのプログラミング言語ではランキング順に従います。C では、# が @import が最上位にある顕著な例です。
42. CSS プロパティと HTML プロシージャのうちどちらが優先されますか?
CSS は HTML プロシージャよりも優先されます。 CSS をサポートしていないブラウザでは、HTML 属性が表示されます。
43. インラインスタイルとは何ですか?
CSS のインライン スタイルは、個々の HTML 要素にスタイルを追加するために使用されます。
44. CSS にコメントを追加するにはどうすればよいですか?
CSS のコメントは /* と */ で追加できます。
45. 属性セレクターを定義しますか?
これは、一連の要素、値、およびその部分によって定義されます。
46. プロパティを定義しますか?
CSS に影響を与えるのに役立つスタイル。 たとえば、FONT。 FONT には太字、斜体などの異なるスタイルがあるように、それらの中に対応する値またはプロパティがあります。
47. 代替スタイルシートとは何ですか?
代替スタイル シートを使用すると、ユーザーは [表示] > [ページ スタイル] メニューを使用してページを表示するスタイルを選択できます。 代替スタイル シートを使用すると、ユーザーはニーズや好みに応じてページの複数のバージョンを確認できます。
48. URL では引用符は必須ですか?
URL では引用符はオプションであり、単一または二重にすることができます。
49. アットルールとは何ですか?
シート全体に適用され、部分的には適用されないルールは、アットルールとして知られています。 @ が先頭にあり、その後に AZ、az、または 0 ~ 9 が続きます。
50. CSS をカスケードしてユーザーの個人シートと組み合わせるにはどうすればよいですか?
プロパティは、推奨される場所に設定し、CSS 用に変更されたドキュメントをユーザーの個人シートと組み合わせることができます。
これらの面接の質問は、あなたのビバ(口頭)にも役立ちます。 あらゆる業界において、Web サイトや Web アプリケーションの利用は日々増加しており、CSS は魅力的な Web サイトを構築するために不可欠な要素です。 そのため、HTML と CSS の十分な知識を持つ UI/UX および Web デザイナーに対する大きな需要があります。
不完全な情報なので、回答する場合は明確にしてください。 インタビュアーはこの種の質問は受け付けません!!。
とても有益な情報ありがとうございます
理論的な質問はすべて、実践的な例に基づいた質問もいくつか提供していただければもっと良かったと思います。
以下の回答は不完全です
「22. クラスセレクターとIDセレクターを区別しますか?
全体のブロックはクラス セレクターに与えられますが、ID セレクターは他の要素と異なる XNUMX つの要素のみを優先します。」
大変な努力に感謝します。
ありがとうございました
回答が更新されました
素晴らしい投稿です! ごきげんよう ! :)
CSSでfloat、背景動画、watch Clip tAg要素を定義してください。
感謝
投稿者:アシシ
剪断していただきありがとうございます。素晴らしいです。このトピックについてもっと書いてください。
こんにちは。ライブ サーバーがうまく動作しません。プロジェクトを実行するために [実行] ボタンをクリックすると、正常に動作します。主な問題は、タグまたは単語で何かを変更すると、プロジェクトを実行できなくなることです。次の場合のみです。ライブサーバーを停止して実行すると、再び動作します。対処方法がわかりません。時間があれば質問に答えてください。ありがとうございます。
素晴らしい質問をありがとうございました