CSS面接対策で差がつく頻出トピックを整理。詳細度、ボックスモデル、Flexbox/Grid、レスポンシブ、アクセシビリティまで、面接で通る答え方がわかるので今すぐ確認してください。
多くのCSS面接の不合格は、知識不足が原因ではありません。何週間もかけてプロパティを復習してきた候補者でも、面接官から「なぜそこでflexboxを選んだのですか？」とか「その `overflow: hidden` を外したらどうなりますか？」と聞かれると、つまずいてしまいます。本当に問題なのはそこです。このCSSの面接対策用チートシートは、その問題を解消するために作られています。つまり、覚えるプロパティを増やすのではなく、思い出した知識を答えに変えるための“理由づけの層”を与えることが目的です。
CSSは断片ごとなら簡単に学べます。あるチュートリアルでflexboxを覚え、Stack Overflowの回答で詳細度を知り、入門講座でボックスモデルを学ぶ。そうして出来上がるのは、実装には十分耐えうるものの、面接という特定の圧力には弱い寄せ集めの知識です。面接で必ず問われるのは定義ではなく判断だからです。以下の各セクションは、教科書の教え方ではなく、面接官の掘り下げ方に合わせて構成しています。
まずは、最初に費用対効果が高いCSS面接トピックから始める
復習の順番は、面接官が実際に確認する順番に合わせる
CSSの面接対策がうまくいかない最も多い理由は、候補者が教科書順、つまりプロパティ、セレクタ、レイアウトの順で学ぶからです。教科書の順番は、ゼロから頭の中にモデルを作るには理にかなっています。しかし、面接まで3日しかなく、どこが実際に問われるのかを知りたいときには、まったく合理的ではありません。
フロントエンドの採用フロー全体の傾向を見ると、ジュニア〜ミッドレベルの面接で安定して出やすいトピックは、おおむね5つの領域に集約されます。CSSがページにどう適用されるか（カスケード、詳細度、継承）、ボックスモデルとその失敗パターン、flexboxとgridとその境界条件、レスポンシブ挙動、そしてミッドレベル向けには、単に「そう動く」だけでなく「なぜそう動くのか」を理解しているかを見抜く上級概念です。floatとclearも今でも出てきますが、主に文脈を確認するための質問であり、決定打になることはあまりありません。
実際にはどう見えるか
面接優先度に沿った、1回の着席で終える復習ルートは次のようになります。まず、CSSがページにどう適用され、どのルールが勝つのかを説明できるかを確認します。次にボックスモデルへ進み、それによって起きるレイアウトバグを説明できるかを確認します。続いてflexboxとgridを別々ではなく一緒に扱います。面接官はほぼ必ず比較を求めるからです。その後に、レスポンシブ挙動とアクセシビリティを意識したCSSを確認します。BFC、stacking context、container queriesは最後に回しましょう。これらは、CSSのメンタルモデルを理解している候補者と、ただ使ったことがあるだけの候補者を分ける質問です。
MDNのCSSドキュメント は、次の領域に進む前に各概念の理解を確認するための、最も信頼できる参照先です。上から順に読むのではなく、まず自分の言葉で説明してみた後に、検証用の層として使ってください。
用語集を暗記したように聞こえずに、CSSがどうページに載るかを説明する
インライン、内部、外部CSSは、実際にはスコープと制御の話です
「インライン、内部、外部CSSの違いは何ですか？」という問いに対する表面的な答えは、インラインは `style` 属性に書き、内部は `<head>` 内の `<style>` タグに書き、外部は `.css` ファイルに置く、です。誰もがその答えを言います。面接官もそれは知っています。その次に聞きたいのは、実際のプロジェクトでその違いがなぜ重要なのかを理解しているかどうかです。
本質は、適用範囲、上書きの強さ、再利用性です。インラインCSSは3つの中で最も詳細度が高く、再利用性はゼロです。1つの要素にしか適用できず、共有もできず、`!important` を使わずにきれいに上書きするのは最も難しいです。内部CSSは1ページにスコープされ、ページ固有の上書きやプロトタイピングに向いていますが、2つのページで同じルールが必要になった瞬間に保守上の問題を生みます。外部CSSは、関心の分離、キャッシュ、そしてコンポーネントライブラリや複数ページアプリケーション全体にスケールできるという理由から、本番環境でのデフォルトです。
実際にはどう見えるか
3つのシナリオを考えてみてください。HTMLメールを作っていて、外部スタイルシートが読み込まれないことが多い場合、他に良い選択肢がないので、インラインCSSが妥当です。1回限りのランディングページで、そのページ以外には適用しない単一のスタイル上書きが必要な場合は、`<head>` 内の `<style>` ブロックで十分です。ボタン、カード、フォームなど共有コンポーネントを持つデザインシステムを保守しているなら、同じルールを複数箇所で更新しなければならなくなるため、外部CSS以外の選択肢は現実的ではありません。
実務では、スタイルをインラインから外部へ移すのは、たいてい誰かがそれを上書きしようとして、どのルールが勝つのか予測できなかったときです。それはスコープの問題が原因で起きる詳細度の問題です。CSS面接でスタイルシートの構成について聞かれたときの答えは、結局いつも「何を最適化しているのか？ 書く速さですか、それとも保守のしやすさですか？」に戻ります。
詳細度を、最高の意味で退屈に説明できるようにする
セレクタ同士が競合したら、誰が勝つのか
詳細度は、CSSの競合解決アルゴリズムです。2つのルールが同じ要素を対象にしているとき、ブラウザはどちらを適用するかを決める必要があります。その判断は一定の順序で行われます。インラインスタイルは `!important` を除いてすべてに勝ちます。その次に、IDセレクタはクラスセレクタ、属性セレクタ、疑似クラスより優先されます。さらにそれらは要素セレクタや疑似要素より優先されます。ユニバーサルセレクタ (`*`) と結合子は、詳細度の重みを加えません。
結合子、つまり子孫結合子（スペース）、子結合子（`>`）、隣接兄弟結合子（`+`）、一般兄弟結合子（`~`）は、ブラウザに「どこを探すか」を伝えるだけで、接続しているセレクタの詳細度は変えません。`:hover` や `:nth-child()` のような疑似クラスは、クラスセレクタと同じ重みを持ちます。`::before` や `::after` のような疑似要素は、要素セレクタと同じ重みを持ちます。カスケードの順序、つまりソース順、重要度、出自、詳細度が、他の条件が同じときにどのルールが勝つかを決めます。
ここでの正確な参照元は CSS Cascade specification です。これが存在することを知っていて、そのレイヤーを説明できるだけでも、面接官が見逃さないシグナルになります。
実際にはどう見えるか
本番のコンポーネントで、ボタンのベーススタイルが `.btn { background: blue; }` と定義されているとします。後から開発者が、より詳細なルール `nav .btn { background: gray; }` を追加しました。nav 内のボタンは灰色になります。想定通りです。ところが3人目の開発者が `.btn--primary { background: green; }` を追加して、nav のルールを上書きできるはずだと考えたのに、実際には上書きされません。`.btn--primary` は（クラス1つ）なので、`nav .btn`（要素1つ＋クラス1つ）に負けるからです。解決策は `!important` を足すことではなく、どのセレクタチェーンが勝っているのかを理解し、その詳細度に合わせるか、セレクタ階層を組み直すことです。
なぜ !important は近道に見えて、たいていその通りなのか
`!important` には正当な用途があります。たとえば、あらゆるものを上書きすることを明示的に意図したデザインシステムのユーティリティクラス（Tailwind の `!` プレフィックスのようなもの）、ブラウザのアクセシビリティ上書き、あるいは制御できない第三者スタイルシートのリセットです。その場合、`!important` は理由が明確な文書化された判断です。
保守上の罠は、自分でも十分に理解していない詳細度の争いから逃げるために `!important` を使うことです。`!important` を1つ追加するたびに、次の上書きのハードルが上がります。同じプロパティを対象にした `!important` 宣言が2つあると、また詳細度の解決に戻りますが、今度は混乱が1層増えています。面接で響きが良い答えは、「`!important` は、触れない外部ルールやユーティリティルールを意図的に上書きするときだけ使います。自分で作った詳細度の衝突を直すためには使いません」です。
ボックスモデルを使って、なぜレイアウトがよくある嫌な形で壊れるのかを説明する
ボックスモデルは、よい意図がoverflowに変わる場所です
CSSのすべての要素はボックスです。そのボックスには4つの領域があります。content（中身）、padding（中身と境界線の間の余白）、border（要素の境界）、margin（境界線の外側の余白）です。面接の罠は、この4領域を説明することではありません。固定幅の要素にpaddingやborderを追加したとき、レイアウトが不可解に壊れるのはなぜか、を説明することです。
デフォルトの挙動（`content-box`）では、`width` はコンテンツ領域だけを指します。`width: 200px` の要素に `padding: 20px` を追加すると、表示上の幅は240pxになります。要素は200pxのままで、paddingは内部に収まると期待していた人には驚きです。これはカードグリッド、サイドバー、モーダルで頻繁に出るボックスモデルのバグです。
box sizing は、多くの痛みを救う小さなCSSです
`box-sizing: border-box` にすると、`width` の中にpaddingとborderが含まれるようになります。つまり要素は200px幅のままで、paddingは要素を広げるのではなく、コンテンツ領域を圧縮します。現代のCSSリセットの多くは、次のようにグローバルに `border-box` を適用します。
面接官は、overflowの失敗パターンと並べてこれを聞くのが好きです。なぜなら、それがあるスターターテンプレートで見たことがある、というだけでなく、そのリセットがなぜ存在するのかを理解しているかが分かるからです。 MDNのボックスモデルのドキュメント には両方のモデルが図で示されており、面接前に見直す価値があります。
実際にはどう見えるか
`width: 100%` と `padding: 24px` を持つカードコンポーネントは、`content-box` ではコンテナからはみ出します。100%の幅に左右48pxのpaddingが加わるため、コンテナ幅を超えるからです。`border-box` に切り替えると、paddingが100%の幅の中に吸収されるので、カードはコンテナ内に収まります。同じパターンはサイドバーやモーダルのオーバーレイでも壊れます。面接で通る答えは、モデル名を挙げ、デフォルトの挙動を説明し、失敗パターンを特定し、修正方法を述べることです。これで、面接官が本当に知りたかったことを4文でカバーできます。
FlexboxとGridは、両方を実務で使った人のように選ぶ
Flexboxは1本の線向け、Gridは地図向けです
flexboxとgridの違いを最もきれいに説明するなら、flexboxは一次元です。行または列のどちらかを扱います。Gridは二次元です。行と列の両方を同時に扱います。この一文は面接回答の正しい出発点ですが、すべてではありません。
Flexboxは、アイテムを1つの軸に沿って流し、余白を分配したいときに向いています。ナビゲーションバー、ボタンの列、横並びのタグリストなどです。Gridは、行と列の関係が重要なときに向いています。商品カードのグリッド、ダッシュボードレイアウト、ヘッダー、サイドバー、コンテンツ領域が両軸でそろう必要があるページテンプレートなどです。
見落とされがちな失敗ケース
flexboxで最も見落とされやすい失敗ケースは、flexアイテムのデフォルトの `min-width` が `auto` であることです。つまり、長いテキストや幅の広い画像を含むflex子要素は、内容サイズより小さく縮めません。解決策は、flex子要素に `min-width: 0` を指定することです。これがないと、折り返すか縮むはずのカード列が、代わりにコンテナからはみ出します。こうした具体的な失敗パターンを挙げられるかどうかで、実際にflexboxレイアウトを組んだことがある人と、読んだだけの人が分かれます。
Gridのサイズ指定で意外とつまずくのが、`auto-fill` と `auto-fit` の違いです。どちらもコンテナに入るだけの列を作りますが、`auto-fit` は空のトラックを折りたたみ、アイテムが行いっぱいに広がるようにします。`auto-fill` は空のトラックを残すため、アイテムは広がりません。商品カードのグリッドで、左寄せに固まるのではなく、3枚のカードが行全体を埋めるようにしたいなら、通常は `auto-fit` が適しています。面接官がこの違いを尋ねるのは、実際にレイアウトが本番で予想外の挙動をしたときに初めて分かる類の話だからです。
実際にはどう見えるか
商品カードを横一列に並べるだけならflexbox向きですが、カード同士を複数行にわたってそろえたいならgrid向きです。ヘッダー、左ナビ、メインコンテンツ、フッターを持つダッシュボードは、これらの領域の関係が本質的に二次元なので、最初からgrid向きです。「どちらをいつ使うのか？」という質問への面接向けの答えは、一般論で終わらせず、具体例で締めることです。何を作ったのか、そしてどちらを選んだのかを言ってください。
CSS-Tricks の Complete Guide to Flexbox と、そのGrid版は、プロパティと挙動を素早く確認するのに今でも最も信頼できるリファレンスです。
float と clear が、勝負には負けても面接に出続ける理由を知る
Floatは、意味のある歴史の授業です
floatは、テキストを画像の周りに回り込ませるために設計されました。印刷レイアウトで、写真がテキストの段組みに入るときに見られるのと同じ挙動です。レイアウトツールとして設計されたものではありません。フロントエンド界隈は、他に良いものがなかった約10年間、これをレイアウトに使ってきました。その結果、機能はするものの脆いレイアウトが生まれました。floatの解除、つまり後続要素に `clear: both` を付ける方法や clearfix ハックは、floatされた要素が通常の文書フローから外れ、親コンテナがそれに合わせて潰れてしまうことへの回避策でした。
新規プロジェクトでは、flexboxとgridがfloatベースのレイアウトを完全に置き換えました。それでもfloatがフロントエンドCSSの面接で出続けるのは、面接官が知りたいのはその移行がなぜ起きたのかであって、起きたという事実だけではないからです。floatを理解することは通常フローを理解することであり、つまり現代のレイアウトツールがそこからどう離れているかを理解することです。
実際にはどう見えるか
典型例は、左にfloatした画像の右側でテキストが回り込むケースです。画像に `float: left` を付けると、テキストは横に流れます。その下のフッターに `clear: left` を付けると、フッターはfloatの横ではなく下に落ちます。現代のコードベースでは、これの代わりにgridかflexコンテナを使うことが多いでしょう。面接で通る答えは、floatとclearの仕組みを正確に説明した上で、新規プロジェクトではflexboxかgridを使うと答え、その理由として、overflowの挙動がより予測しやすいこと、配置の制御性が高いこと、親コンテナが潰れないようにclearfixハックを使う必要がないことを挙げることです。
すべての上級機能が日常ではなくても、ミッドレベルのCSSとして今の感覚を保つ
BFC、stacking context、container queriesは、本当の理解を露出させる領域です
Block Formatting Context（BFC）は、CSSのレイアウトモデルにおける分離された描画環境です。BFCの内側の要素は外側のfloatと干渉せず、BFC自身が内部のfloatを包含します。`overflow: hidden`、`display: flow-root`、`contain: layout` などでBFCを発生させるのが、clearfixハックを使わずにfloatの潰れを防ぐきれいな方法です。面接官がBFCを聞くのは、`overflow: hidden` がなぜfloatの潰れを防ぐのかを理解しているか、単に効くことを知っているだけかを見ているからです。
stacking context は、z-indexの重なり順を制御する仕組みです。`position` に `z-index` が `auto` 以外で付いている要素、`opacity` が1未満の要素、`transform`、`filter`、その他いくつかのプロパティによって、新しい stacking context が作られます。よくあるバグは、モーダルやツールチップに `z-index: 9999` が付いているのに、別の要素の背後に隠れてしまうケースです。親要素がより低いz-indexの新しい stacking context を作っているからです。修正には、z-index をさらに上げるのではなく、stacking context の階層を理解する必要があります。
Container queries は、いまや広くサポートされており、ビューポートではなくコンテナのサイズに応じてコンポーネントを変化させられます。これにより、レスポンシブデザインはページ全体の問題からコンポーネント単位の問題へと変わります。カードコンポーネントは、ビューポートがどうであれ、自分のコンテナが狭くなったときに内部レイアウトを再配置できます。
論理プロパティとレスポンシブメディアクエリは、流行ではなく実用として感じるべきです
論理プロパティ（`margin-left` の代わりに `margin-inline-start`、`padding-bottom` の代わりに `padding-block-end` など）は、物理的な方向ではなく、文書の書字方向に対応します。左から右へのレイアウトでは、物理プロパティと同じように振る舞います。右から左へのレイアウト、つまりアラビア語、ヘブライ語、ペルシア語では、自動的に反転します。論理プロパティを使うことは、国際化を後回しにしないためのCSS上の判断です。
`prefers-reduced-motion` は、OSレベルでその設定を選んでいるユーザー向けに、アニメーションを無効化または減らせます。`prefers-color-scheme` は、システムのダークモードに応答できます。これらはアクセシビリティの例外ではありません。プロダクトを単に組み立てたものではなく、きちんと考えて作られたものに感じさせるCSS上の判断です。
実際にはどう見えるか
ドロップダウンがカードの背後に隠れるz-indexバグは、ほぼ確実に stacking context の問題です。カードにGPUコンポジティング最適化のため `transform: translateZ(0)` が付いており、それが新しい stacking context を作っていて、ドロップダウンはその子要素であるため、z-index の値に関係なくそこから抜け出せません。修正は、ドロップダウンをその stacking context の子ではなく兄弟にするようDOMを組み替えることです。こうしたデバッグの説明は、ミッドレベルのCSS回答に「実際に触ってきた感」を与えます。
レスポンシブとアクセシビリティの質問には、ユーザーの体感をまだ気にしているように答える
レスポンシブCSSは、ブレークポイントと願望だけの話ではありません
レスポンシブCSSはレイアウトの堅牢性の話です。ビューポートがあらかじめ定義したブレークポイントに達したときだけではなく、コンテナが変化したときにも、コンテンツが自然に再配置されるようにすることです。ブレークポイント先行の考え方は、同じコンポーネントが異なる幅の複数の文脈で使われると崩れます。container queries はこれをコンポーネント単位で解決します。`clamp()` を使ったフルードタイポグラフィは、テキストレベルでそれを解決します。面接でうまく響く答えは、レスポンシブ挙動を切り替えの集合ではなく、レイアウトの連続的な性質として扱います。
アクセシビリティは、思われているよりずっとCSSに出ます
コントラスト比、フォーカスの可視性、モーションの抑制、カラースキームへの対応は、どれもCSSの判断です。WCAG 2.1 は、通常テキストに対して最低4.5:1のコントラスト比を要求しています。フォーカスインジケータは、` :focus` ではなく `:focus-visible` を使うべきで、マウス利用者のUIを煩雑にせず、可視である必要があります。代替のフォーカススタイルを用意せずに `outline: none` を削除するのは、本番CSSにおける最も一般的なアクセシビリティ失敗の1つです。`prefers-reduced-motion` は、UIの理解に必須でないアニメーションをすべて包むべきです。
実際にはどう見えるか
ブレークポイントでハンバーガーメニューに折りたたまれるナビゲーションコンポーネントは、フォーカス管理、ライト/ダークモード両方でのコントラスト、開閉トランジションのモーションを扱う必要があります。そのトランジションのCSSは、`@media (prefers-reduced-motion: no-preference)` ブロックで包むべきです。そうすれば、モーション軽減を希望しているユーザーにはアニメーションではなく即時の状態変化を返せます。こうした答えは、ブラウザだけでなくユーザーを考えている候補者だと示します。
よくある質問
Q: フロントエンド面接で最も出やすいCSSトピックは何ですか。また、どの順で復習すべきですか？
まずはカスケード、詳細度、継承から始めてください。これらは他のすべてのCSS質問の土台です。次にボックスモデルと `box-sizing`、続いてflexboxとgridを一緒に、レスポンシブ挙動とメディアクエリ、最後にミッドレベル向けのBFC、stacking context、container queriesといった上級トピックへ進みます。この順序は面接での出題頻度に合っており、各概念が前の概念の上に積み上がるようになっています。
Q: インライン、内部、外部CSSの違いを、面接で明確に説明するにはどう言えばいいですか？
まず機械的な違いを1文で答えてください（それぞれがどこに書かれるか）。その直後にトレードオフへ移ります。インラインは最も詳細度が高いが再利用性はゼロ、内部は1ページにスコープされておりプロトタイピングに便利、外部は関心を分離できスケールするので本番の標準、という具合です。面接官が聞いているのは定義ではなく、トレードオフです。
Q: FlexboxとGridはいつ使い分けるべきで、よくある失敗ケースは何ですか？
flexboxは一次元の流れ、つまりナビバー、タグ列、フォーム項目の縦並びなどに使います。Gridは行と列を同時にそろえる必要があるとき、つまりカードグリッド、ダッシュボードレイアウト、ページテンプレートなどに使います。挙げる価値がある失敗ケースは、`min-width: 0` がないとflexアイテムが `min-width: auto` より縮まないことと、`auto-fill` と `auto-fit` で疎なグリッドの挙動が変わることです。
Q: セレクタ、結合子、疑似クラス、詳細度は、どのスタイルが勝つかに実際どう影響しますか？
詳細度は層ごとに計算されます。インラインスタイルはIDセレクタに勝ち、IDセレクタはクラスセレクタや疑似クラスに勝ち、クラスセレクタや疑似クラスは要素セレクタや疑似要素に勝ちます。結合子は重みを足しません。対象を絞るだけです。詳細度が同じなら、ソース順が決め手になります。実務的な答えとしては、`!important` に頼る前に、勝っているルールのセレクタチェーンを追ってください。
Q: ボックスモデルとbox-sizingの落とし穴で、面接官がよく試すのは何ですか？
主な落とし穴は、デフォルトの `content-box` ではpaddingとborderが設定した幅を超えて要素を広げることです。`box-sizing: border-box` はpaddingとborderを幅に含めるので、サイズ指定が予測しやすくなります。面接官がこれを試すのは、仕組みを理解すると、不可解に見えるレイアウトoverflowの大半が説明できるからです。
Q: float と clear はどう動き、なぜ現代のレイアウトではほとんど置き換えられたのですか？
floatは要素を通常フローから外し、隣接するコンテンツをその周りに回り込ませます。`clear` は、後続要素がfloatの横に並ぶのを防ぎます。これらは、flexboxやgridが登場する前のマルチカラムレイアウトに使われていました。今ではほとんど置き換えられています。というのも、floatベースのレイアウトはコンテナの潰れを防ぐためにclearfixハックが必要でしたが、flexbox/grid のほうが配置と分配をより予測しやすく扱えるからです。
Q: ミッドレベル面接に向けて、BFC、container queries、論理プロパティのような上級CSSトピックはどこまで知っておくべきですか？
BFCは、`overflow: hidden` がなぜfloatを包含できるのかを説明できる程度には理解しておいてください（それが新しいフォーマッティングコンテキストを作るからです）。stacking context は、親の `transform` や `opacity` によるz-index失敗をデバッグできる程度に知っておいてください。container queries は、ビューポートベースのメディアクエリに代わるコンポーネントレベルの手段として理解しておくべきです。論理プロパティは、国際化やRTL対応について話すなら必ず触れる価値があります。
Q: 今っぽくて実践的に聞こえる、CSSのアクセシビリティとレスポンシブデザインの概念は何ですか？
アニメーションには `prefers-reduced-motion`、ダークモードには `prefers-color-scheme`、キーボード操作には `:focus-visible`、テキストにはWCAGのコントラスト比を挙げてください。レスポンシブデザインでは、フルードタイポグラフィの `clamp()` と、コンポーネントレベルの応答性のためのcontainer queries を挙げるとよいです。これらを回答の中心にする必要はありません。こちらから言わずに触れるだけで、ブラウザだけでなくユーザーも考えていることが伝わります。
Verve AI を使ってCSS面接の準備を進める方法
CSS面接対策の構造的な問題は、知識不足ではありません。ライブの圧力下でレイアウトの判断を言語化するのは、実際にレイアウトを作るのとは別のスキルだからです。grid を flexbox より使うべきタイミングを正確に知っていても、面接官に「ここでflexboxを使わないのはなぜですか？」と聞かれたときに、理由をその場でうまく言葉にできなければ、回答は冗長になりがちです。
Verve AI Interview Copilot は、まさにそのギャップを埋めるために作られています。会話が進行している最中にリアルタイムで聞き取り 、実際にあなたが言ったことに応答します。あらかじめ用意されたプロンプトに反応するのではありません。たとえば、詳細度の説明を練習していて、次のフォローアップが「もし `!important` がすでにコードベースに入っていたら、どうしますか？」だった場合でも、Verve AI Interview Copilot は一般的なテンプレートではなく、あなたが直前に言った内容に基づいて次の答えの層を提示します。練習セッションは、ライブ面接の圧力をそのまま再現します。質問、あなたの回答、その境界を試すフォローアップ、という流れです。Verve AI Interview Copilot はその間、見えないままで動くので、体験は本物の面接環境と区別がつきません。CSS対策に限って言えば、ボックスモデル、flexのoverflow、stacking context の説明を、定義ではなく判断として聞こえるまで繰り返し練習できるということです。面接官が本当に聞いているのはまさにそこです。
まとめ
強いCSS面接回答は、定義ではなく判断です。技術面接を通過する候補者は、すべてのプロパティを暗唱できる人ではありません。「このレイアウトは一次元だったのでflexboxを選び、単一軸に沿ってアイテムへ余白を配分する必要がありました。もしoverflowし始めたら、私はここを見ます」と言える人です。それが判断です。理由があり、失敗パターンがあり、代替案があります。
次の面接前には、特に3つのセクションを見直してください。詳細度のセクションです。CSSの質問は最終的にすべて詳細度の質問になるからです。flexboxとgridのセクションです。比較はほぼ確実に出るからです。そしてレスポンシブとアクセシビリティのセクションです。`prefers-reduced-motion` や `:focus-visible` をこちらから触れられると、ミッドレベル候補者とジュニア候補者を分けるシグナルになるからです。それ以外は復習です。これら3つは、力のあるポイントです。
Cameron Wu
アーカイブ