CSS面接でよく聞かれる質問と回答トップ60（2026年版）
エマ・デイビス
CSS面接の準備はできていますか？基礎知識とそれ以上の知識を磨きましょう。 CSSインタビュー これらの質問により、応募者がデザイン構造とスタイリングのロジックをどの程度理解しているかが明らかになります。
CSS開発のキャリアは、フロントエンドデザインからレスポンシブWebアプリケーションまで、多様な機会への扉を開きます。技術的な経験、専門知識、そして優れた分析スキルを備えたプロフェッショナルは、チームリーダーやマネージャーが重視する高度なスキルセットを発揮できます。これらの質問と回答は、新卒、中堅、そしてシニアレベルの開発者が自信を持って効果的に面接に臨むのに役立ちます。
このガイドでは、技術リーダー、マネージャー、採用専門家など 85 名を超える専門家から得た知見を基に、業界全体で信頼できる面接の実践方法をまとめ、あらゆる経験レベルにおいて正確性、関連性、信頼性を確保しています。
CSS面接でよく聞かれる質問と回答
1) 現代のCSSカスケードについて説明し、 @layer、詳細度、およびソース順序。
カスケードは、複数のルールが同じ要素をターゲットとしている場合に、どのルールが「勝つ」かを決定します。決定は重要度（ !important ）、オリジン（ユーザーエージェント、ユーザー、著者）、そして レイヤーの順序 from @layer、次に詳細度、最後にソース順序が続きます。 @layer リセット、ベース、コンポーネント、ユーティリティといった予測可能な階層を定義することで、セレクタの詳細度を上げることなく、ルールのグループ全体を他のルールにオーバーライドできます。主な利点は保守性です。主な欠点は、レイヤーの順序付けが間違っているとバグが隠れてしまう可能性があることです。詳細度の低いクラスセレクタを優先し、 !important 意図的なポリシーを策定し、アーキテクチャを判読可能な状態に保ちます。
例を挙げて答えなさい
@layer reset, base, components, utilities;
@layer reset { *,*::before,*::after{ box-sizing:border-box } }
@layer base { body{ font:16px/1.5 system-ui } }
@layer components { .btn{ background:var(--brand,#4b6fff); color:#fff } }
@layer utilities { .text-sm{ font-size:.875rem } }
2) コンテナ クエリとメディア クエリの違いは何ですか。また、それぞれをどこで使用しますか。
コンテナクエリは、コンテナのサイズやスタイルに応じて 含む要素コンポーネントを自己認識させ、様々なコンテキストで再利用できるようにします。メディアクエリは ビューポート またはデバイス特性と、グローバルレイアウトシフトの輝き。コンテナクエリは、カード、ウィジェット、ネストされたモジュールをローカルに適応させるのに役立ちます。メディアクエリは、サイト全体のナビゲーションやシェルの変更に最適です。コンテナクエリの利点は、粒度が細かく、グローバルブレークポイントが少ないことです。欠点は、セットアップ経由のセットアップです。 container-type 慎重な境界選択。
違い（比較表）
| 因子 | メディアクエリ | コンテナクエリ |
|---|---|---|
| トリガー | ビューポート機能 | コンテナのサイズまたはスタイル |
| 対象領域 | ページ全体 | コンポーネントローカル |
| 疑問の余地なし | 必要 container-type / オプション名 |
|
| ベスト | グローバルブレークポイント | カードまたはウィジェットのバリエーション |
例を挙げて答えなさい
/* Declare a query container */
.card-grid { container-type: inline-size; }
/* Component-level breakpoint */
@container (min-width: 32rem) {
.card { display:grid; grid-template-columns: 2fr 3fr; gap:1rem; }
}
3) の特徴と利点は何ですか？ :has()、そしてそれはどう比較されるのか :is() の三脚と :where() ?
リレーショナル擬似クラス :has() 子孫または後続のパターンに基づいて要素を選択し、親の状態のスタイル設定を Javaスクリプト。これはフォームの検証グループ、ナビゲーション状態、密度の切り替えなどに有効です。対照的に、 :is() の三脚と :where() 長いセレクターリストを簡素化します。 :where() 特異性はゼロであるが、 :is() 最も具体的な議論の特異性に貢献する。 :has() コンテキストに応じたスタイリングとよりクリーンなマークアップが特長です。ただし、無制限のセレクタと併用した場合、パフォーマンスに問題が生じる可能性があります。スコープを狭く設定し、クラスや属性と組み合わせて予測可能性を高めましょう。
例を挙げて答えなさい
/* Emphasize label when any input inside is invalid */
.form-group:has(input:invalid) label { color:#b00020; }
/* Compact nav if there are many items */
.nav:has(> li:nth-child(n+8)) { font-size:.9rem }
/* Specificity control helpers */
:is(h1,h2,h3){ margin-block:.75em }
where(.prose h1,.prose h2){ line-height:1.2 }
4) テーマ設定のために CSS カスタム プロパティをどこに適用しますか? また、その利点と欠点は何ですか?
CSSカスタムプロパティは、カスケードを通して値を伝達し、自然に継承し、実行時に解決されるため、テーマ、密度モード、デザイントークンに最適です。アセットを再構築することなく、ダークモードの切り替えやカラーシステムの切り替えが可能です。動的な更新、コンポーネントとの共存、互換性などの利点があります。 @layer欠点としては、静的アナライザーの間接参照とフォールバック設計の必要性が挙げられます。グローバルセマンティクスにはルートスコープのトークンを使用し、バリアントにはコンポーネントスコープのトークンを使用し、長期的な保守性を確保するために名前を安定させましょう。
例を挙げて答えなさい
:root { --bg: #fff; --fg: #111; --radius: .5rem; }
@media (prefers-color-scheme: dark){
:root { --bg:#0b0d10; --fg:#e7edf3; }
}
.card { background:var(--bg); color:var(--fg); border-radius:var(--radius); }
5) どのレイアウト システムがどの問題に適していますか: Flexbox、グリッド、サブグリッド?
Flexboxは以下に最適です 1次元 グリッドは、単一の軸に沿った配置と分布に優れています。 二次元 配置と明示的なトラック制御に加え、サブグリッドでは子要素が親グリッドトラックを継承し、ネストされたコンポーネント間で一貫した配置を実現します。適切なシステムを選択することで、オーバーライドが削減され、可読性が向上します。一般的なパターンとしては、ページフレームやダッシュボードにはグリッド、ツールバーやチップリストにはフレックスボックス、カードメタデータなどの内部要素を外側の列に配置するにはサブグリッドを使用します。
種類と違い（比較表）
| Use Case | フレックスボックス | グリッド | サブグリッド |
|---|---|---|---|
| 次元 | 1-D | 2-D | 継承されたトラックによる2D |
| 第３章：濃度 | 配布、配置 | 明示的なエリア、繰り返し可能なトラック | コンポーネント間のアライメント |
| 最小限の | 行/列を定義する | 親グリッドが必要です | |
| 例: | ナビゲーションバー、ピル | ギャラリー、ダッシュボード | カードフッターをページグリッドに揃える |
例を挙げて答えなさい
.layout { display:grid; grid-template-columns: 1fr 3fr; gap:1rem; }
.card-meta { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
6) 論理プロパティは国際化を向上させますか？その利点とトレードオフを説明してください。
論理プロパティは、左や右といった物理的な方向を、インラインやブロックの開始や終了といったフロー相対的な用語に置き換えます。これにより、単一のスタイルシートで、分岐ルールを必要とせずに、右から左に書く言語や縦書きモードに適応できます。メリットとしては、グローバル化の向上、ルールの重複の削減、コンポーネントの堅牢性向上などが挙げられます。トレードオフとしては、導入時の意識改革や、ロングテールプロパティにおける時折のギャップなどが挙げられます。 margin-inline, padding-block, inset-inline-start 間隔と位置を調整して、ロケール間で一貫したレイアウトを実現します。
例を挙げて答えなさい
.alert { padding-inline:1rem; border-inline-start:4px solid currentColor; }
[dir="rtl"] .breadcrumb { float:inline-end; }
7) いつ使うのか clamp() および現代のビューポート単位（ svh, lvh, dvh ) 流体の種類と間隔を指定しますか?
clamp(min, preferred, max) ビューポートの拡大に合わせてスムーズにスケールする値でありながら、適切な上限を超えない値が必要な場合に便利です。これは、タイポグラフィ、パディング、ヒーローセクションに最適です。最新のビューポート単位は、モバイルブラウザのUIクロームに対応し、フルスクリーンセクションの高さを一定に保ちます。これにより、メディアクエリの削減、リズムの一貫性、アクセシビリティの向上といったメリットが得られます。 rem欠点は、視覚的な意図と安全なタップ対象を確認するためにデバイス間でテストする必要があることです。
例を挙げて答えなさい
:root { --step-0: clamp(1rem, 1.2vw + .9rem, 1.25rem); }
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.hero { min-height: 100dvh; padding-block: clamp(1rem, 3vw, 3rem); }
8) スタッキング コンテキストとは何ですか? また、Z インデックスと配置要素によってスタッキング コンテキストがどのように作成または分離されるのですか?
スタッキングコンテキストは、同じコンテキスト内の兄弟要素間でのみZインデックスの比較が行われる、独立した描画スコープです。新しいコンテキストはルート要素から生成され、 z-index 以外の auto、および特定のプロパティなど transform, opacity < 1, filter, position: fixedこれらを理解することで、子要素がコンテキスト外のコンテンツを超えられないというよくある「Zインデックスが機能しない」問題が理解できます。利点はカプセル化ですが、危険性は意図しない分離によって意図しないオーバーレイが妨げられることです。
例を挙げて答えなさい
.header { position:relative; z-index:10; }
.modal { position:fixed; inset:0; z-index:1000; }
.card { transform: translateZ(0); /* new stacking context */ }
9) ネイティブ CSS ネストは本番環境で使用可能ですか? また、プリプロセッサからどのように移行しますか?
ネイティブのネストは広くサポートされており、セレクタを短く保ちながらルール関係を共存させることで繰り返しを削減します。移行では、まずコンポーネントを優先し、深い子孫チェーンを1～2レベルのネストに置き換え、ミックスインなどのプリプロセッサのみの構成要素を削除する必要があります。メリットとしては、バンドルが小さくなり、DevToolsのマッピングが改善されることなどが挙げられます。デメリットとしては、ネストを過剰に行いがちで、詳細度が高まり再利用が妨げられることが挙げられます。ガードレールを確立し、深さを制限し、クラスベースのフックを維持し、 @layer オーバーライド順序を制御します。
例を挙げて答えなさい
.card {
display:grid; gap:.75rem;
& h3 { margin-block:.5rem; }
& .actions { display:flex; gap:.5rem; }
& .actions > button:hover { text-decoration:underline; }
}
10) コンテナ スタイルのクエリを使用できますか? また、その実際的な利点は何ですか?
スタイルクエリを使用すると、コンポーネントは、DOMにクラス名を追加することなく、コンテナの計算済みスタイル（密度トークンやテーマバリアントなど）に適応できます。これにより、デザインシステムはコンテナごとにコンパクトモードとコンフォートモード、または明るいアクセントと暗いアクセントを切り替えることができます。メリットは、コンポーネントの分離と境界の明確化です。デメリットは、トークンの命名、フォールバックのドキュメント化、コンテナの慎重な設定の必要性です。スタイルクエリは、状態を脆弱な構造セレクタではなく、データとして表現するために使用します。
例を挙げて答えなさい
/* Container emits a style signal */
.panel { --density: compact; container-type:inline-size; }
/* Child adapts when the container declares compact density */
@container style(--density: compact) {
.item { padding:.5rem; gap:.5rem; }
}
11) CSS にとって重要なパフォーマンス要因は何ですか? また、レイアウトのスラッシングを回避するにはどうすればよいですか?
CSSのパフォーマンスはブラウザがどのくらいの頻度で再計算するかに左右される 、計算する レイアウト、塗り直したり、 コンポジット レイヤー。レイアウトに影響を与えるプロパティへのインターリーブされた読み取りと書き込みによって、繰り返しのリフローが強制されると、レイアウトのスラッシングが発生します。規律あるアプローチとしては、セレクタの複雑さを最小限に抑え、詳細度を低く抑え、コンポジターに適したプロパティのみをアニメーション化することが挙げられます。DOMの読み取りを書き込み前に一括処理し、コンテインメントを活用して影響範囲を制限します。
例を挙げて答えなさい
- 好む
transformの三脚とopacityアニメーション用。アニメーションを避けるwidth/height/top/left. - Apply
content-visibility: auto画面外のセクションに提供contain-intrinsic-size. -
will-change長時間実行されるアニメーションの場合のみ、レイヤーを控えめにプロモートします。 - スタイルの再計算を減らすために、深い子孫セレクターを単一クラスフックに置き換えます。
.article-preview { content-visibility: auto; contain-intrinsic-size: 600px 400px; }
.fab { transition: transform .25s, opacity .25s; will-change: transform; }
12) すぐに使用できるアクセシビリティをサポートする CSS 機能はどれですか? 利点と例を挙げてください。
CSSはセマンティックHTMLやARIAを置き換えることはできませんが、 焦点の視認性、動きの安全性, 対比戦略を選択します。 :focus-visible 擬似クラスは、キーボード操作が検出されるとフォーカスを表示し、マウスユーザーへの視覚的なノイズを防ぎながら、キーボードユーザーへの手がかりを維持します。 prefers-reduced-motion 適切なフォールバックパターンを許可し、慎重なカラートークン設計により十分なコントラストを確保します。利点は、多様なユーザー設定を網羅する包括的なデフォルト設定です。制限は、セマンティクスとキーボードナビゲーションをマークアップとスクリプトで提供する必要があることです。
例を挙げて答えなさい
:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.parallax, .video-bg { animation: none; transition: none; }
}
13) CSS を組み込むさまざまな方法と、各アプローチの長所と短所。
複数のインクルード戦略が存在し、それぞれがキャッシュ、クリティカルパス、保守性に影響を与える異なる特性を持っています。外部スタイルシートは、関心を分離し、ブラウザのキャッシュを活用します。インライン <style> HTMLで読み込む必要がある重要なルールに適しています。インライン style="" 属性は最優先ですが、再利用性を損ない、詳細度を高めます。適切なタイプを選択することで、ペイロードの重複を減らし、開発者のエルゴノミクスを維持できます。
メリットとデメリット（比較表）
| 方法 | 優位性 | デメリット | 典型的な使用 |
|---|---|---|---|
| 外部スタイルシート | ブラウザキャッシュ（ページ間で共有） | 追加のHTTPリクエスト | グローバルデザインシステム |
列をなして <style> |
リクエストを排除。クリティカルなCSSに最適 | 大規模に管理するのが難しくなる | スクロールせずに見えるスタイル |
列をなして style="" |
即時性と最高の特異性 | 再利用不可、ノイズの多いHTML | 一時的なオーバーライド |
例を挙げて答えなさい
<link rel="stylesheet" href="/ja/assets/app.css" /> <style>/* minimal critical rules for LCP elements */</style> <div class="btn" style="--danger: #b00020">Delete</div>
14) 違いは何ですか? relative, absolute, fixed, sticky ポジショニング?ユースケースのガイダンスを提供します。
配置は、フロー内での要素の配置方法と、スクロールや祖先との相互作用方法を決定します。 relative 自然な流れを維持しながら、視覚的なボックスをオフセットします。アンカーとなるコンテキストを確立するためによく使用されます。 absolute フローから要素を削除し、最も近い位置にある祖先を基準にして配置します。これにより、応答性が犠牲になりますが、精度が向上します。 fixed 要素をビューポートに固定します。これは永続的なバーに最適ですが、画面上のキーボードと安全領域を考慮する必要があります。 sticky スクロールしきい値に応じて静的と固定を切り替え、セクション ヘッダーとページ内インデックスを提供します。
例を挙げて答えなさい
.badge-anchor { position: relative; }
.badge { position: absolute; inset: -6px -6px auto auto; }
.header { position: sticky; top: 0; background: var(--bg); }
.toast { position: fixed; inset: auto 1rem 1rem auto; }
15) 保守可能な CSS アーキテクチャ (BEM、ITCSS、ユーティリティ、レイヤー) を形成する要素は何ですか。また、コンポーネント スタイルのライフサイクルは何ですか。
保守可能なアーキテクチャはバランスをとる 特異性規律、予測可能 重ねる、安定した 命名BEMは明示的なフックを提供し、ITCSSは低レベルのリセットから高レベルのユーティリティまでルールを整理し、ユーティリティファーストのアプローチは制約付きプリミティブによる反復処理を高速化し、 @layer コードベース全体のオーバーライド順序を形式化します。コンポーネントのライフサイクルは通常、トークンの定義から始まり、ベースルールとコンポーネントルールに進み、バリアントと状態を追加し、互換性を破る変更を回避するための非推奨ポリシーで終わります。メリットはチーム間で一貫した動作が保証されることですが、トレードオフは事前の計画とガバナンスです。
例を挙げて答えなさい
- トークンは
:root(間隔、色、半径)。 - コンポーネントを配置
@layer components単一クラスセレクターを使用します。 - わかりやすくするために、データ属性またはコンテナー スタイルのクエリを介したバリアントを使用します。
@layer reset, base, components, utilities;
@layer components { .card { border-radius: var(--radius-2); } }
16) Shadow DOM は CSS スコープにどのように影響しますか? また、パーツにスタイルを設定するさまざまな方法は何ですか?
Shadow DOMはマークアップとスタイルをカプセル化し、偶発的なリークを防ぎ、コンポーネントの安定性を確保します。作成者は意図的にサーフェスを公開することができます。 ::part() コンポーネントによってエクスポートされた名前付きパーツを対象とし、 ::slotted() スロットにライトDOMノードを割り当てたスタイル。利点としては、堅牢なカプセル化と予測可能なテーマ設定サーフェスが挙げられますが、欠点としては、コンポーネント設計者がパーツを提供しない限り内部構造へのアクセスが制限されること、そしてそれらのパーツを利用者向けにドキュメント化する必要があることが挙げられます。
例を挙げて答えなさい
/* Theme an exposed component part */
custom-rating::part(star) { color: gold; }
file-card::slotted(img) { border-radius: .5rem; }
17) CSSボックスモデルの特徴は何ですか？また、なぜ box-sizing: border-box 案件？
ボックスモデルは、要素の合計サイズがどのようにして決まるかを説明します。 コンテンツ、パディング、境界線, マージンデフォルトでは content-box、宣言された width オーバーフローや複雑な計算を引き起こす可能性のあるパディングとボーダーを除外します。 border-box 宣言された幅と高さの範囲内にパディングとボーダーを含めることで、グリッドの計算とコンポーネントのサイズがより予測しやすくなります。メリットは、メンタルモデルがシンプルになり、レイアウトのバグが減ることです。デメリットは、システム内でモデルを混在させると、コントリビューターが混乱する可能性があることです。根本から標準化し、例外はオープンにドキュメント化しましょう。
例を挙げて答えなさい
*, *::before, *::after { box-sizing: border-box; }
.card { width: 22rem; padding: 1rem; border: 1px solid #ddd; }
18) どこで使う？ @supports プログレッシブエンハンスメントについて教えてください。また、そのメリットは何ですか?
@supports CSSの機能検出を可能にし、利用可能な条件付き拡張により、ベースラインをあらゆる場所で機能させることができます。このパターンは、コンテナクエリなどの最新機能を導入する際のリスクを軽減します。 :has()、またはサブグリッド。主な利点は、段階的なデグラデーションとより明確な移行パスです。欠点は、しばらくの間、二重のコードパスを維持する必要があることです。まず基本的な動作を構造化し、次に高度な動作をターゲットにラップします。 @supports レガシー環境が後退しないようにブロックします。
例を挙げて答えなさい
.card { display: block; }
@supports (display: grid) {
.card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}
19) どの CSS ユニットを選択する必要がありますか? また、それらの違いは何ですか?
単位の選択は、スケーリング、読みやすさ、アクセシビリティに影響します。 rem ルート フォント サイズに合わせて拡大縮小されるため、グローバル タイプと間隔に最適です。 em 現在の要素に合わせて拡大縮小されます。これはコンポーネント内では便利ですが、予期せず複合される可能性があります。 ch 「0」グリフの幅を反映しており、測定（線の長さ）に最適です。 px デバイスのピクセルに揃えられており、ヘアラインにも安全ですが、ユーザーの設定には対応していません。 lh の三脚と rlh 間隔をタイポグラフィのグリッドに結び付けることによって、垂直方向のリズムを維持するのに役立ちます。
例を挙げて答えなさい
-
max-width: 65ch読みやすい段落に。 - グローバル間隔を倍数として設定
remユーザーの好みを尊重するため。 -
emフォント サイズに応じて拡大縮小されるアイコン ボタンなどのコンポーネント内部用。
.prose { max-width: 65ch; margin-inline: auto; }
.btn { padding-inline: 1em; }
20) CSS カウンターは構造化コンテンツに役立ちますか? また、そのメリットとデメリットは何ですか?
CSSカウンターは、セマンティックHTMLを変更することなく自動番号付けを行うため、見出し、図、法務文書などで役立ちます。メリットとしては、マークアップが簡潔で、ロケールやセクションをまたいで表示できる柔軟性が挙げられます。デメリットとしては、番号付けによってDOM構造に反映されていない、あるいは支援技術によって読み上げられない重要な意味が伝わってしまう場合、アクセシビリティに問題が生じる可能性があることが挙げられます。カウンターは、表示上の番号付けに使用しますが、その際、基盤となる階層構造が正しく、かつナビゲート可能であることを確認してください。
例を挙げて答えなさい
article { counter-reset: h2; }
h2::before { counter-increment: h2; content: "Section " counter(h2) ". "; }
figure { counter-increment: fig; }
figcaption::before { content: "Figure " counter(fig) ": "; }
21) CSS を使用してアニメーション化する必要があるのはどのような場合ですか。また、パフォーマンスの観点から最も安全なプロパティはどれですか。
アニメーションは、レイアウトや再描画を回避できるコンポジターフレンドリーなプロパティで動作する場合、最も耐久性に優れています。CSSは、ブラウザがフレームスケジュールを最適化できる、宣言的で状態駆動型のトランジションに優れています。最も安全な選択肢は、 transform の三脚と opacityは、通常コンポジタースレッドで実行され、メインスレッドの作業を最小限に抑えます。マイクロインタラクション、ホバートランジション、シンプルなエントランスエフェクトにはCSSを使用します。レイアウトに影響を与えるプロパティのアニメーション化は避けてください。 width, height, top, left レイアウトの再計算をトリガーするためです。ジオメトリの変更が不可欠な場合は、変換ベースのイリュージョンや、穏やかな max-height オーバーフロー管理と慎重なアクセシビリティ フォールバックを備えた遷移。
例を挙げて答えなさい
.dialog { transform: translateY(8px); opacity: 0; }
.dialog[open] {
transform: translateY(0);
opacity: 1;
transition: transform .2s ease, opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
.dialog { transition: none; }
}
22) CSS はレスポンシブな画像を支援できますか? また、それにアプローチするさまざまな方法にはどのようなものがありますか?
HTMLは、画像選択を本質的に備えている。 srcset の三脚と sizesしかし、CSSは装飾画像、背景のアートディレクション、オブジェクトの配置において依然として重要です。 image-set() 背景画像に複数の解像度を提供し、 object-fit の三脚と object-position 置換された要素をボックス内で制御します。コンテナクエリやメディアクエリと組み合わせて、切り抜き、密度、焦点を調整します。メリットは、マークアップの増加なしに正確な視覚制御が可能なことです。デメリットは、CSSの背景画像には固有のサイズ調整機能がないため、支援技術によって通知されないため、コンテンツ画像はHTMLのままにしておく必要があることです。
メリットとデメリット（比較表）
| アプローチ | 特性 | 優位性 | デメリット | 典型的な使用 |
|---|---|---|---|---|
HTML srcset/sizes |
内的選択 | 正しいセマンティクス; 最高のパフォーマンス | マークアップの変更が必要 | コンテンツの画像 |
CSS image-set() |
背景解像度セット | ブレークポイントごとに簡単にスワップ | 固有のサイズ設定なし | 装飾的な背景 |
object-fit / position |
Box 封じ込め制御 | 一貫したトリミング | 背景画像には使用不可 | サムネイル、アバター |
例を挙げて答えなさい
.hero {
background-image: image-set(url(bg-1x.jpg) 1x, url(bg-2x.jpg) 2x);
background-size: cover;
}
.thumb { width: 240px; height: 160px; object-fit: cover; object-position: 50% 40%; }
23）は Javaスクリプト不要のダークモードは実現可能でしょうか？また、それが強力になる要因は何でしょうか？
A Javaスクリプトフリーのダークモードは、カスタムプロパティと prefers-color-scheme メディア特性と、ユーザーによるオーバーライドのためのオプションのHTML属性。ルートでセマンティックトークンを定義し、メディアクエリ内でダークバリアントを提供し、 [data-theme] 明示的なユーザー選択や企業ブランディングを尊重するために、オーバーライドしてください。このアプローチは複雑さを最小限に抑え、ちらつきを減らし、カスケードの権威性を維持します。ただし、明示的なオーバーライドがない場合、システム設定に依存するという制限があります。トークンを文書化し、十分なコントラストを確保し、両方のモードでフォーカスアウトラインと状態をテストしてください。
例を挙げて答えなさい
:root { --bg: #ffffff; --fg: #0b0d10; --accent: #4b6fff; }
@media (prefers-color-scheme: dark) {
:root { --bg:#0b0d10; --fg:#e7edf3; --accent:#8aa4ff; }
}
[data-theme="light"] { --bg:#ffffff; --fg:#0b0d10; }
[data-theme="dark"] { --bg:#0b0d10; --fg:#e7edf3; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }
24) セレクタのネストが深く、詳細度が高いことにはデメリットがありますか。また、詳細度の低いアプローチにはどのような利点がありますか。
深いネストと高い詳細度は、スタイルを脆弱にし、リファクタリングを遅くし、意図しないオーバーライドのリスクを高めます。このようなセレクタはCSSをドキュメント構造に密接に結び付け、マークアップが進化するとメンテナンスコストが増大します。詳細度の低いアプローチは、単一クラスフック、フラットなアーキテクチャ、そして @layer オーバーライドを予測通りに管理するために順序付けを行います。そのメリットとしては、所有権の明確化、マッチングの簡素化によるレンダリングの高速化、チーム間のコンポジションの容易化などが挙げられます。ネストの深さに制限を設け、不要な場合はクラスを要素名で修飾しないようにし、脱出用のハッチのためのユーティリティを用意しましょう。
例を挙げて答えなさい
/* Fragile: structure-dependent */
.main .sidebar .card > h3.title { ... }
/* Resilient: single-class hook, layer-controlled */
@layer components { .card-title { ... } }
25) BEM、ITCSS、ユーティリティ ファーストのどの方法論がさまざまなチームに適していますか。また、それぞれのメリットとデメリットは何ですか。
方法論の選択は、チームの規模、レビュー文化、製品の変動性によって異なります。 BEM 大規模なチームで拡張できる、明示的で読みやすいフックを提供します。 ITCSS 低レベルのリセットからオブジェクトやコンポーネント、ユーティリティに至るまで、カスケードに沿ってコードベースを整理します。 実用性重視 制約されたプリミティブによってデリバリーを高速化し、カスタムセレクタよりもコンポジションを優先します。ハイブリッドが一般的で、順序付けにはITCSS、必要に応じて命名するにはBEM、そして一時的な調整にはユーティリティを使用します。トレードオフとしては、冗長性（BEM）、事前の計画（ITCSS）、そして潜在的なクラス増殖（ユーティリティファースト）が挙げられます。
相違点（比較表）
| 方法 | 特性 | 優位性 | デメリット | ベストフィット |
|---|---|---|---|---|
| BEM | .block__elem–mod の命名 | 予測可能なフック | 冗長セレクタ | 大規模なチーム、デザインシステム |
| ITCSS | 階層化アーキテクチャ | オーバーライド命令をクリアする | 計画オーバーヘッド | 複数チームのモノレポ |
| 実用性重視 | Atomicクラス | スピード、一貫性 | クラス変更リスク | ラピッドプロトタイピング、アプリ |
26) デザインからコードまでのスペースとタイポグラフィのトークンのライフサイクルを例を挙げて説明します。
トークンのライフサイクルは、スケール、比率、アクセシビリティ目標の選択といった設計段階から始まります。これらは、セマンティクスを表す、名前とバージョンが付けられたカスタムプロパティになります。 （例えば、 --space-2, --font-scale-1 生の値ではなく、トークン（ ）を使用します。トークンは基本スタイルに流れ込み、その後コンポーネントやバリアントへと移り、システムの進化に伴い最終的には非推奨となるか、エイリアスを介してリダイレクトされます。メリットとしては、一貫性のあるリズム、差分の減少、クロスプラットフォームの整合性の向上などが挙げられます。デメリットとしては、初期のガバナンスのオーバーヘッドと明確なドキュメントの必要性が挙げられます。トークンをパブリックAPIとして扱い、範囲を定義し、使用ガイドラインにマッピングし、移行に関する注意事項を提供してください。
例を挙げて答えなさい
:root{
--space-1:.25rem; --space-2:.5rem; --space-3:1rem;
--font-0:1rem; --font-1:1.125rem; --font-2:1.25rem;
}
.card{ padding: var(--space-3); }
.card h2{ font-size: var(--font-2); margin-block: var(--space-2); }
/* deprecation alias */
:root{ --space-small: var(--space-2); }
27) どうやって :focus-visible, :focus-within, :target それぞれの違いは何ですか？また、それぞれの利点は何ですか？
これらのセレクターは、異なるインタラクションとナビゲーションの特性に対応します。 :focus-visible 入力方法がキーボード ナビゲーションを示唆している場合にのみフォーカスを表示し、マウス ユーザーの邪魔になるリングを減らしながらアクセシビリティをサポートします。 :focus-within いずれかの子孫にフォーカスがある場合にコンテナーと一致し、フォーム フィールドなどの複合要素のグループ化された強調表示を有効にします。 :target URLフラグメントが参照する要素に一致することで、スクリプトなしでリンクのスキップやページ内ナビゲーションが可能になります。これらを慎重に組み合わせることで、操作性が向上し、認知負荷が軽減され、効率的なキーボード操作が可能になります。
例を挙げて答えなさい
:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
:target { scroll-margin-top: 6rem; }
28) のメリットとデメリットは何ですか？ content-visibility 大きなドキュメントでの CSS の包含はどうですか?
content-visibility: auto 画面外の要素のレンダリング作業をビューポートに近づくまで延期することで、長いフィードの初期レンダリングコストを大幅に削減します。追加のコンテインメント（ contain: layout paint style ）は、サブツリーがページの残りの部分に与える影響を制限し、リフローの範囲を縮小し、繰り返し更新を高速化します。メリットとしては、応答性の向上とメモリ使用量の削減が挙げられます。デメリットとしては、固有のサイズが不明な場合のポップイン効果の可能性や、 Javaスクリプトはサイズを測定する必要があります。 contain-intrinsic-size 必要な場合のみ測定します。
例を挙げて答えなさい
.feed-item{
content-visibility: auto;
contain-intrinsic-size: 600px 400px; /* reserve space to prevent layout shift */
contain: layout paint style;
}
29) ブレークポイントを最小限に抑えたレスポンシブグリッドを構築するにはどうすればいいでしょうか？ minmax() の三脚と auto-fit/auto-fill?
最大幅まで拡張して自動的に折り返す柔軟なトラックを定義することで、弾力性のあるレイアウトを実現できます。 repeat(auto-fit, minmax(min, 1fr)) 収まる限りの列を作成し、不要な隙間を避けるために空のトラックを折り畳みます。これにより、明示的なブレークポイントへの依存を減らしながら、画面サイズを問わず調和のとれた密度を維持できます。このアプローチは、ギャラリー、カード、商品リストに最適です。適切な最小限の列数（例： 16rem ) とギャップの間隔を利用してリズムを維持します。
例を挙げて答えなさい
.gallery{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
30) いつ選択するかを決定する要因 gap 項目間の間隔の余白と比べてどうですか?
gap FlexboxとGridにネイティブに連携するフローを考慮した間隔調整機能で、マージンを崩すエッジケースなしで対称的な間隔を適用します。 コンポーネント内 スペースは、最初/最後の子要素の配置に影響を与えず、右から左へのレイアウトで方向ハックを必要としないため、推奨されます。 外部 コンポーネントの公開APIの一部であるスペース、またはFlex/Grid以外のコンテキストとスペースを連携させる必要がある場合。スコープ、所有権、レイアウトセマンティクスに基づいて選択することで、予期せぬ重複を避け、オーバーライドルールを最小限に抑えることができます。
相違点（比較表）
| 基準 | gap |
マージン |
|---|---|---|
| 対象領域 | レイアウトコンテナ内部 | 兄弟や隣人との外部的な関係 |
| 方向性 | 論理的かつ対称的 | RTL調整が必要になる場合があります |
| 崩壊行動 | 適用されない | マージン崩壊の可能性がある |
| ベストセラー | フレックス/グリッドの子要素の間隔 | コンポーネントの外側の間隔とレイアウトの契約 |
例を挙げて答えなさい
.toolbar{ display:flex; gap:.5rem; } /* internal spacing */
.card{ margin-block: 1rem; } /* external spacing contract */
31) 依存することのデメリットは何ですか？ !important、より安全な代替手段は何でしょうか?
使いすぎ !important カスケードの自然なライフサイクルをバイパスすることで、意図が曖昧になり、正当なオーバーライドがブロックされ、将来の貢献者は詳細度をさらに高めざるを得なくなります。また、ルールが順序付けや変更の影響を受けなくなるため、テスト可能性も低下します。 @layer 戦略。専門家の代替案としては、予測可能なオーバーライドパスを設計することです。セレクタの詳細度を下げる、ポリシーを専用のユーティリティレイヤーに配置する、ソースを並べ替えるなどです。 @layer 宣言を武器にするのではなく。 !important 文書化された脱出口として機能する、高コントラストや強制可視性のユーティリティなどの意図的なユーザー主導のケース。
例を挙げて答えなさい
/* Deliberate, documented utility only */
@layer utilities {
.sr-only { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; }
}
/* Prefer layer order instead of !important */
@layer base, components, utilities;
@layer utilities { .hidden { display:none; } }
32) パフォーマンスや保守性の観点から、どのタイプのセレクターを避けるべきですか? また、その理由は何ですか?
DOM全体にわたって文書の深さや属性に強く結びつくセレクタは危険です。子孫の連鎖が長いとマッチングコストが増加し、マークアップへの脆弱な依存関係が生じます。例えば、 [class*="btn"] or [data-*] スコープ指定のないセレクタは大きなサブツリーをスキャンできます。 ul.nav > li > a.link 再利用性が低下し、オーバーライドが複雑になります。保守性の高いアプローチでは、単一クラスのフック、明確な契約を持つ状態属性（例： [data-state="open"] ）、そして短い関係（ > , + ）をコンポーネント境界内に配置します。これにより可読性が向上し、カスケード競合が軽減され、リファクタリングが高速化されます。
例を挙げて答えなさい
/* Fragile and slow */
.main .sidebar .list .item > a[href*="/products"] { ... }
/* Resilient */
.nav { display:flex; gap:.5rem; }
.nav__link { ... }
[data-state="open"] .nav__link--active { text-decoration: underline; }
33) いつ選ぶべきか @layer ユーティリティとコンポーネントバリアントの違いと、その利点は何でしょうか?
ユーティリティエクスプレス 一度限りの調整 スペース、表示、配置など、詳細度を上げることなく上書きするべき要素。コンポーネントバリアントは 繰り返し可能な状態またはモード コンポーネントAPIに属するもの。ユーティリティは予測可能であり、コンポーネントのスタイルシートを編集する必要がないため、アプリケーションコードの作成時に最も効果的です。バリアントは、同じ状態が繰り返され、デザインシステムの一部として文書化およびテストする必要がある場合に優れています。バランスの取れたアーキテクチャでは、ユーティリティをレイヤーの後ろの方に配置し、コンポーネントバリアントの詳細度をコンポーネントレイヤー内で低く保ちます。
例を挙げて答えなさい
@layer reset, base, components, utilities;
/* Variant: part of the API */
@layer components {
.btn[data-variant="primary"] { background: var(--brand-600); color: #fff; }
}
/* Utility: composition escape hatch */
@layer utilities {
.mt-4 { margin-block-start: 1rem; }
.inline { display:inline; }
}
34) グリッドは Flexbox の使用をすべて置き換えることができますか、それとも両方を維持する違いに基づく理由がありますか?
グリッドとフレックスボックスは、互いに直交する問題を解決します。グリッドは明示的なトラック定義による2次元的な制御を提供し、複雑なページフレーム、ダッシュボード、カードギャラリーを容易に作成できます。フレックスボックスは、単軸配置、主軸に沿った固有のサイズ設定、行または列内の配置に優れており、ツールバー、メニュー、チップなどに最適です。グリッドをあらゆる場所に強制しようとすると、人間工学的な配置動作が犠牲になり、マクロレイアウトにフレックスボックスを強制すると、脆弱なラッパーが生成されます。成熟したシステムでは、両者を意図的に組み合わせ、場合によっては同じコンポーネント内で、問題の特性に合ったエンジンを選択します。
相違点（比較表）
| 基準 | グリッド | フレックスボックス |
|---|---|---|
| 次元 | 2次元トラック | 一次元フロー |
| 第３章：濃度 | 明示的な領域、ギャップ、サブグリッド | 配布、配置、並べ替え |
| ベストセラー | ページフレーム、ダッシュボード | ツールバー、ナビゲーション、チップリスト |
例を挙げて答えなさい
.frame { display:grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
.toolbar { display:flex; align-items:center; gap:.5rem; }
35) 使用することの利点と欠点は何ですか？ aspect-ratio パディングハックとの比較ですか?
aspect-ratio ラッパー要素や疑似要素のハックを使わずに、カード、メディア、サムネイルの形状を維持するための宣言的で自己文書化的な方法を提供します。オブジェクトフィッティングときれいに統合され、グリッドレイアウトやフレックスレイアウトでも予測通りに動作します。主な欠点は、古い環境でのレガシーブラウザとのギャップと、従来のハックベースのCSSの再検討の必要性です。パディングトップのハックは、非常に古いエンジンのフォールバックとして残っていますが、DOMの複雑さを増大させ、明瞭性を損なう可能性があります。 aspect-ratio メンテナンス性を考慮し、 @supports レガシーカバレッジが契約上必要な場合のみ。
例を挙げて答えなさい
.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 1) {
.thumb-wrap { position: relative; }
.thumb-wrap::before { content:""; display:block; padding-top:56.25%; }
.thumb { position:absolute; inset:0; }
}
36) 安全領域とモバイル ビューポートを尊重する、耐久性のある固定ヘッダーをどのように構築しますか?
弾力性のあるヘッダーのバランス position: sticky セクションレベルのアンカーの場合 position: fixed デザイン上、グローバルな持続性が求められる場合にのみ使用します。セーフエリアインセットは、ノッチ付きデバイスでのシステムUIとの重なりを防止し、最新のビューポートユニットは、 dvh ブラウザのクローム表示/非表示時に画面が崩れるのを防ぎます。この戦略には、明確なスタッキングコンテキストの割り当て、レイアウトのずれを防ぐためのスペースの確保、エントランスエフェクトのモーション設定の提供が含まれます。仮想キーボードは適切に処理しないと固定要素を隠してしまう可能性があるため、キーボードの種類や横向きでのテストは非常に重要です。
例を挙げて答えなさい
.header {
position: sticky;
top: 0;
padding-top: env(safe-area-inset-top);
background: var(--bg);
z-index: 100;
box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
main { min-height: 100dvh; scroll-padding-top: 4rem; }
考慮事項（クイックテーブル）
| 因子 | おすすめ |
|---|---|
| 安全なエリア | env(safe-area-inset-*) |
| ビューポート | 好む dvh フルハイト領域用 |
| Zインデックス | オーバーレイスケールを1つ作成し、それを文書化する |
37) コンポーネントの密度スケーリングとサイズスケーリングの違いは何ですか? また、それぞれはいつ使用する必要がありますか?
密度スケーリングは変更します 間隔、ギャップ、行の高さ フォントサイズを一定に保ちながら、書体の階層構造を変えずに、コンパクト、快適、または広々としたバリエーションを作成することができます。サイズスケーリングは、 活字のスケールそのもの見出し、本文、コントロールのスケールを大きくしたり小さくしたりします。情報密度がタスクによって変化するエンタープライズUIには、密度スケーリングを使用します。デバイスからの距離、アクセシビリティのニーズ、ブランド要件に対応するには、サイズスケーリングを使用します。どちらも、ドキュメント化された範囲を持つトークンとして扱うことで、サーフェス全体で一貫性を確保します。
例を挙げて答えなさい
/* Density */
[data-density="compact"] .btn { padding-block: .25rem; gap: .25rem; }
/* Size (type) */
:root { --font-0: 1rem; --font-1: 1.125rem; }
[data-size="lg"] { --font-0: 1.125rem; --font-1: 1.25rem; }
38) 大規模なグローバルリセットによってどのようなデメリットが生じますか? また、より安全な代替手段は何ですか?
積極的なリセットは、フォーカスアウトライン、リストセマンティクス、フォームコントロールのアフォーダンスといった有益なデフォルト設定を意図せず削除してしまう可能性があります。これはアクセシビリティに悪影響を与え、ネイティブ動作の冗長な再実装を強いることになります。より安全な代替案としては、以下のようなものがあります。 現代の標準化 意味を保ちながら矛盾を抑制し、 スコープ付きリセット 適用経由 @layer 本当に白紙の状態が必要なコンポーネントにリセットポリシーを文書化し、次のような重要な機能を明示的に復元します。 :focus-visible、そして、デフォルトで意味を伝える要素をゼロにすることを避ける。例えば、 b, strong, em.
例を挙げて答えなさい
@layer reset {
*,*::before,*::after { box-sizing: border-box; }
:where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Do not remove list semantics unless intentionally restyled */
39) DevTools と最新の CSS 機能を使用して、複雑なカスケードの問題を効果的にデバッグするにはどうすればよいですか?
効果的なデバッグは、DevToolsで要素を分離し、その内容を検査することから始まります。 計算済み 最終的なプロパティ値とそのソースを確認するには、 スタイル ペインのルールの順序と詳細度に注目して、ルールがなぜ勝ったのか理解する。 @layer 順序と、新しいスタッキングまたは包含コンテキストが干渉するかどうか。 Toggl仮説を検証するためのルールを作成し、カスケードレイヤービュー（利用可能な場合）を使用してレイヤーの優先順位を視覚化します。一時的なデバッグアウトラインを追加し、機能フラグを検討します。 @supports 高度なパスを選択的に無効にすることで問題を二分します。
例を挙げて答えなさい
/* Debug helper */
*{ outline: 1px solid rgba(0,128,255,.15); outline-offset:-1px; }
/* Bisect: disable advanced path */
@supports (container-name: card) {
/* move experimental styles here; toggle block in DevTools */
}
40) 印刷スタイルとメディア クエリはプロフェッショナルな CSS パイプラインのどこに適合しますか。また、それぞれのメリットとデメリットは何ですか。
印刷スタイルは、書類の多い製品、請求書、法的文書などには不可欠です。プロフェッショナルなパイプラインには、最小限の @media print 不要なクロームを削除し、読みやすい基準を設定し、グレースケールデバイスでも色の使用が読みやすいようにするセクションです。メリットとしては、アーカイブ品質の向上とユーザーの信頼感の向上が挙げられます。デメリットとしては、メンテナンスの増加と、通常はインタラクティブなコンテンツの監査の必要性が挙げられます。印刷ルールはトークン駆動型とし、ヘッダーとフッターを除いて絶対位置指定を避け、一般的なブラウザとPDFジェネレーターをテストしてページネーションの異常を防止してください。
例を挙げて答えなさい
@media print {
nav, .ads, .controls { display: none !important; }
article { max-width: 80ch; margin: 0 auto; font-size: 11pt; line-height: 1.4; }
a[href]::after { content: " (" attr(href) ")"; }
img { break-inside: avoid; }
}
41) どのような戦略が予測可能なオーバーレイシステムを生み出し、どのように管理すべきか z-index 規模？
予測可能なオーバーレイシステムでは、レイヤリングをアドホックな数値ではなく、文書化された契約として扱います。小さな名前付きスケール（例えば、ベース、レイズド、オーバーレイ、モーダル、トースト）を定義し、変数またはユーティリティクラスを使用してコンポーネントを層に割り当てます。各オーバーレイは、分離が必要な場合にのみ独自のスタッキングコンテキスト内に保持し、偶発的なコンテキストは避けてください。 transform or filter 意図的でない限り、それは起こりません。主な利点は、エンジニアが試行錯誤することなく競合を推論できることです。欠点は、事前に用意できる分類が限られていることです。スケールを設計トークンと組み合わせ、範囲外の値のリント処理を行うことで、ドリフトを防ぎます。
オーバーレイスケール（比較表）
| 段 | 目的 | 分解能 z-index |
Notes |
|---|---|---|---|
| ベース（Base） | 定期コンテンツ | 0 | 新しいコンテキストを作成しないようにする |
| 隆起しました | スティッキーヘッダー、引き出し | 10-100 | シェル内で一貫性を保つ |
| オーバーレイ | 背景幕、スクリム | 900 | 全ページクリックシールド |
| 粒度分布、 | ダイアログ、ピッカー | 1000 | 役職 fixed; トラップフォーカス |
| トースト | お知らせ | 1100 | 非ブロッキング; 時間指定削除 |
例を挙げて答えなさい
:root{
--z-base: 0; --z-raised: 20; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;
}
.header{ position: sticky; top: 0; z-index: var(--z-raised); }
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); }
.scrim{ position: fixed; inset: 0; z-index: var(--z-overlay); }
42) ネイティブ フォーム コントロールは、どのように責任を持ってスタイル設定する必要がありますか? また、一般的な手法の利点と欠点は何ですか?
責任あるフォームスタイル設定は、セマンティクスを尊重しつつ、アフォーダンスを向上させます。まずキーボードとスクリーンリーダーの動作を維持し、次にレイヤーの強化を行います。 accent-color コントロールを置き換えることなく、ブランドに合わせてチェック可能な入力を行うには、 appearance 一貫性のないUIを標準化するために控えめに、そしてアップロードコントロールをターゲットに ::file-selector-button利点は、アクセスしやすく、最小限の操作で一貫した制御ができることです。 Javaスクリプト。デメリットとしては、ブラウザ間の微妙な差異や、コントロールを丸ごと置き換えたくなる誘惑などが挙げられます。アドホックなオーバーライドを避けるため、フォーカス状態、エラー状態、無効状態をコンポーネントAPIの一部としてドキュメント化してください。
例を挙げて答えなさい
/* Brand the native checkbox/radio without replacing it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand, #4b6fff); }
/* Normalize look only when truly necessary */
select, input, textarea { appearance: none; }
/* File input affordance */
input[type="file"]::file-selector-button{
padding: .5rem .75rem; border-radius: .375rem; background: var(--brand);
color: #fff; border: 0; cursor: pointer;
}
43) クリティカル CSS とコード分割にはどのような戦略がありますか? また、その利点と欠点は何ですか?
Critical CSS improves Largest Contentful Paint by inlining rules needed for above-the-fold content, while deferring the rest. Code-splitting divides the stylesheet by route, feature, or component. A measured approach combines a small critical slice with layered external bundles for maintainability. The advantages are faster perceived load and smaller initial payloads; disadvantages include build complexity and the risk of duplication if not deduplicated at compile time. Prefer deterministic layering ( @layer ) と命名規則を使用して、チャンク間でオーバーライドを安定させます。
積載戦略（比較表）
| Strategy | 公式サイト限定 | デメリット | 典型的な使用 |
|---|---|---|---|
インラインクリティカル <style> |
より高速なLCP; リクエストなし | 維持するのが難しい | 折り返し部分のシェル |
| 非同期外部CSS | キャッシュ可能; モジュール式 | スタイル設定されていないコンテンツのフラッシュリスク | アプリルート |
| メディア分割バンドル | 条件付き読み込み | 複雑さ; テストのオーバーヘッド | 印刷、高DPI、ダークモード |
例を挙げて答えなさい
<link rel="preload" href="/ja/css/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/ja/css/app.css"></noscript>
<style>@layer base{ /* small critical rules */ }</style>
44) 最新のCSSカラーオプションとは？（ color-mix、相対的な色の構文、知覚空間）があり、それらはいつ使用すべきでしょうか？
現代のCSSは実行時に色の組み合わせをサポートしています。 color-mix() 相対的なカラー構文を介してコンポーネントを調整することで、プリコンパイルなしで動的なテーマ設定が可能になります。OKLCHやLabなどの知覚色空間は、sRGBよりも均一な明度と彩度の調整を提供し、ランプや状態（ホバー、無効）の一貫性を高めます。主な利点は、テーマ間でのコントラストと色相の変化が予測可能であることです。欠点としては、古いエンジンでの部分的なサポートと、ブランドコンプライアンスの検証の必要性が挙げられます。ホバー状態や強調状態にはランタイムミキシングを使用し、可能な場合は正規トークンを知覚空間に保存し、必要に応じてsRGBにフォールバックします。
例を挙げて答えなさい
:root{
--brand: oklch(60% .15 260);
--brand-hover: color-mix(in oklch, var(--brand), black 12%);
--muted: color-mix(in oklch, var(--brand), white 70%);
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-hover); }
.badge{ background: var(--muted); }
45) 弾力性と応答性に優れたタイポグラフィと垂直方向のリズムを生み出すテクニックは何ですか?
柔軟性のあるタイポグラフィは、読みやすい行の長さ、スケーラブルなサイズ、そして一貫した間隔のバランスをとっています。まずはユーザーの好みを考慮した基本フォントサイズを設定し、その後、 clamp() 感覚的な限界に縛られた流動的なステップを定義する。垂直的なリズムを確立する lh または固定のルート行の高さを設定し、段落を chベースの対策。 text-wrap: balance ブレークをより均等に分散させることで見出しを改善できる一方、 hyphens: auto 言語メタデータにより、ギザギザのエッジが軽減されます。メリットは、ビューポート間の可読性とアクセシビリティです。デメリットは、合字のテストやブランド書体との動作バランスの調整が必要になることです。
例を挙げて答えなさい
:root{ --step-0: clamp(1rem, 1.2vw + .9rem, 1.125rem); line-height: 1.5; }
h1{ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); text-wrap: balance; }
.prose{ max-width: 65ch; }
p{ margin-block: 1lh; hyphens: auto; }
46) スクロール スナップとスクロール パディング/マージンはどのように連携してナビゲーションを改善するのでしょうか?
スクロールスナップは、カルーセルとセクションレイアウトの決定論的な休止位置を作成します。 scroll-padding の三脚と scroll-margin ターゲットが固定ヘッダーの下に正しく配置されていることを確認します。 scroll-snap-type 容器に scroll-snap-align 行動を導くアイテム。その利点は、一貫した操作感とキーボード操作の改善です。 tabindex アンカーとスナップポイントのデメリットは、スナップポイントが強すぎる場合や、タッチデバイスのモメンタムに合わせて調整されていない場合に、フラストレーションが生じる可能性があることです。ビューポートの上部に論理的なパディングを設け、スティッキーUIの下にコンテンツが隠れないようにし、キーボードとポインターの操作で検証してください。
例を挙げて答えなさい
.carousel{ display:flex; overflow:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
.slide{ flex: 0 0 80%; scroll-snap-align: start; margin-inline: .5rem; }
:target{ scroll-margin-top: 5rem; } /* sticky header offset */
47) ツールチップやポップオーバーの耐久性を高めるCSSパターンはどれですか？ Javaスクリプトはまだ必要ですか?
CSSは、次のようなシンプルな方向性のあるツールチップを扱うことができます。 position、論理オフセット、および ::after 矢印、トリガー :hover の三脚と :focus-visible。 使用 inset 正確な配置と @layer Zオーダー用のユーティリティ。複雑なポップオーバー（衝突検出、矢印の再配置、フォーカストラッピングなど）の場合は、Javaスクリプトは依然として必要ですが、CSSは依然としてプレゼンテーショントークンを定義します。CSSファーストパターンの利点は、オーバーヘッドが少なく、Grace Degradation（劣化の許容範囲）が優れていることです。欠点は、ロジックなしではビューポートの端への適応性が限られることです。ツールチップは常にキーボードでアクセス可能であり、重要なコントロールを覆い隠さないようにしてください。
例を挙げて答えなさい
.tip{ position: relative; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity:1; transform: translateY(-4px); }
.tip__bubble{
position:absolute; inset-block-end: 100%; inset-inline-start: 0;
opacity:0; transform: translateY(0); transition: transform .15s, opacity .15s;
z-index: var(--z-raised);
}
48) 複雑な書き換えに頼らずに、応答性に優れ、読みやすいデータ テーブルを設計するにはどうすればよいでしょうか。
レスポンシブテーブルは、セマンティクスを維持しながら、狭い画面でも使いやすい表示を提供します。ヘッダーやリレーションシップの再フローを避けるため、制約のあるラッパー内で水平スクロールから始めましょう。キーと値のペアのデータの場合は、スタックレイアウトに切り替えます。 display: grid 名前付きエリアを用意したり、列の表示設定を追加して段階的に表示したりすることもできます。メリットとしては、アクセシビリティの維持とメンテナンスの容易さが挙げられますが、デメリットとしては、画面領域が限られていることと、オーバーフロー部分のスタイル設定を慎重に行う必要があることが挙げられます。各ブレークポイントで必須の列を文書化し、 text-overflow 長い値にはツールチップが表示されます。
アプローチ（比較表）
| 技術 | 公式サイト限定 | デメリット | 以下のためにベスト |
|---|---|---|---|
| 水平スクロールラッパー | セマンティクスを保持する | オーバーフロースタイルが必要 | 幅広で密集したテーブル |
| 積み重ねられたキーと値のレイアウト | 読みやすい | ネイティブテーブル機能が失われます | モバイルの仕様、請求書 |
| 列切り替え | カスタマイズされた密度 | JS配線が必要 | 管理ダッシュボード |
例を挙げて答えなさい
.table-wrap{ overflow:auto; max-inline-size:100%; }
.table{ min-inline-size: 52rem; border-collapse: collapse; }
.table th, .table td{ padding:.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
49) ブレンド モード、フィルター、マスクが実用的な価値をもたらすのはどのような場合ですか。また、トレードオフは何ですか。
ブレンドモード（ mix-blend-mode, background-blend-mode ）、フィルター（ blur, grayscale, drop-shadow ）、マスク（ mask-image, mask-composite ）は、グラスモフィズム、デュオトーン、非長方形のリビールなどの効果をラスター編集なしで実現します。アートディレクションが重要となるマーケティングサーフェスやデータビジュアライゼーションのアクセントに最適です。メリットは、アセットの拡散を抑え、テーマを動的に設定できることです。デメリットは、低消費電力デバイスでのパフォーマンス低下や、コントラストを下げた場合のアクセシビリティ問題の発生です。重たい効果は重要でないサーフェスに留め、GPUへの影響をテストし、設定値を減らしたフォールバックを用意しましょう。
例を挙げて答えなさい
.hero::before{
content:""; position:absolute; inset:0;
background: radial-gradient(circle at 30% 20%, #fff3, transparent 60%);
mix-blend-mode: screen; filter: blur(20px);
}
50) どのような役割を担うのか color-scheme システム UI テーマ設定は、ブラウザー間で統一されたスタイル設定にどのように役立ちますか?
その color-scheme プロパティは、ユーザーエージェントコンポーネント（フォームコントロール、一部のエンジンではスクロールバー）が背景色とテキスト色を一致させてレンダリングされるように、意図したライトパレットとダークパレットを宣言します。これにより、カスタムコントロールスキンの必要性が軽減され、ダークモードが有効なときに違和感が生じるのを防ぎます。メリットは最小限のコードで一貫性を保てることです。デメリットは、エンジン間の互換性が進化し続けており、カスタムブランディングには依然としてオーバーライドが必要になる可能性があることです。 color-scheme トークンのカスタム プロパティを使用して、ユーザーが選択していないシステム設定に閉じ込められるのを避けるために、明示的なユーザー オーバーライドを許可します。
例を挙げて答えなさい
:root{ color-scheme: light dark; }
body{ background: var(--bg); color: var(--fg); }
/* Controls inherit appropriate UA styling under the declared schemes */
🔍 CSS 面接でよく聞かれる質問と、実際のシナリオと戦略的な回答
1) 違いは何ですか? inline, inline-block, block CSS の要素ですか?
応募者に期待すること: 面接官は、要素の表示プロパティとそれがレイアウトおよびボックス モデルにどのように影響するかについての理解をテストしたいと考えています。
回答例：
「以前の仕事では、ディスプレイの種類の誤解によって生じるレイアウトの不一致によく対処していました。 block 要素は利用可能な全幅を占め、新しい行で始まります。 inline 要素はコンテンツと同じ幅しか占めず、新しい行で始まりません。 inline-block 要素はブロック要素のように幅と高さを設定できますが、テキストのようにインラインで表示されます。これらの違いを理解することで、レスポンシブデザインを微調整し、一貫した配置を維持することができました。
2) 複雑なレイアウトでの CSS の問題のデバッグにはどのようにアプローチしますか?
応募者に期待すること: 面接官は、レイアウトのバグを特定して修正するための体系的なアプローチを知りたいと思っています。
回答例：
以前の職では、CSSのデバッグに構造化されたアプローチを採用していました。ブラウザの開発者ツールを用いて、計算されたスタイルとボックスモデルを検査し、競合するセレクターを特定し、ルールを段階的に無効化していました。また、ブラウザ固有のプレフィックスを使用し、複数のデバイスでテストしました。この体系的なデバッグプロセスにより、フロントエンドのレイアウトに関する問題が大幅に減少しました。
3) CSS カスケードと詳細度がどのように機能するかを説明していただけますか?
応募者に期待すること: 面接官は、ブラウザがどの CSS ルールを優先するかを決定する方法に関する知識を評価したいと考えています。
回答例：
CSSカスケードとは、複数のセレクタが同じ要素をターゲットとした場合に適用されるルールを定義するプロセスです。詳細度によって優先順位が決定され、インラインスタイルが最も高く、次にID、クラス、疑似クラス、そして最後に要素の順になります。詳細度が同じ場合は、ソースコードの順序も重要です。これを理解することで、意図せずスタイルを上書きしてしまうのを防ぎ、よりクリーンなコードを実現できます。
4) フレームワークに大きく依存せずにレスポンシブ デザインを処理する方法について説明してください。
応募者に期待すること: 面接官は、CSS の柔軟性とメディア クエリの使用法に関する理解を確認しています。
回答例：
「前職では、流動的なグリッドや相対的な単位などを使ってレスポンシブなレイアウトをデザインしました。 em の三脚と rem、そしてメディアクエリを使って、様々な画面幅に合わせてレイアウトを調整しました。また、柔軟なレイアウトを実現するために、CSS GridとFlexboxも採用しました。このアプローチにより、フレームワークへの不要な依存を避けながら、デザインのスケーラビリティとメンテナンス性を維持することができました。
5) パフォーマンスと保守性のために CSS をどのように最適化しますか?
応募者に期待すること: 面接官は、スケーラビリティとパフォーマンスに関するベストプラクティスに関するあなたの認識を評価しています。
回答例：
前職では、未使用のスタイルを削除し、HTTPリクエストを削減するためにファイルを結合し、メンテナンス性を高めるためにCSS変数を実装することで、CSSを最適化しました。また、コードを整理し、スケーリングを容易にするために、BEM命名規則を採用しました。さらに、PostCSSやminificationなどの最新ツールを活用してパフォーマンスを向上させました。
6) スタイルの競合を解決するために開発者やデザイナーと協力しなければならなかったときのことを教えてください。
応募者に期待すること: 面接官は、部門横断的な環境におけるチームワークとコミュニケーション スキルを見たいと考えています。
回答例：
以前のプロジェクトでは、動的なフォームのデザイン上の期待と開発者の実装との間に齟齬が生じました。そこで、両者と迅速に連携し、スクリーンショットを用いて視覚的な問題点を提示し、デザインの一貫性を保つためにCSS変数の調整を提案しました。この積極的な連携により、パフォーマンスに影響を与えることなく、視覚的に整合性のある結果を得ることができました。
7) CSS アニメーションやトランジションを実装する際にどのような課題に直面しましたか? また、それをどのように克服しましたか?
応募者に期待すること: 面接官は、パフォーマンスの最適化とブラウザのレンダリングに関する理解度を評価したいと考えています。
回答例：
「あるプロジェクトでは、アニメーションがリフローの問題で表示が不安定になっていました。そこで、次のようなCSSプロパティが問題になっていることを発見しました。 top の三脚と left レイアウトの再計算をトリガーしていました。 transform の三脚と opacityはGPUアクセラレーションを活用し、よりスムーズなトランジションを実現しています。また、アニメーションの長さも最適化し、自然な動きを実現しました。」
8) 大規模なアプリケーションでは CSS をどのように構成しますか?
応募者に期待すること: 面接官は、組織、スケーラビリティ、保守性に対するアプローチを理解したいと考えています。
回答例：
「BEM、SMACSS、CSSモジュールなどのモジュール型アーキテクチャを用いて、スタイルを論理的に構造化します。各コンポーネントには、競合を避けるため、独自のスコープ付きスタイルを設定します。また、スタイルガイドと命名規則を適用することで、チーム間の一貫性を維持し、プロジェクトの拡大に伴うCSSの肥大化を防ぎます。」
9) クライアントから、Internet Explorer 11 でページ レイアウトが崩れるという苦情があったとします。この問題を解決するには、どのような手順を踏みますか?
応募者に期待すること: 面接官は、レガシーブラウザの問題に対する適応能力をテストしたいと考えています。
回答例：
「まず、同じブラウザバージョンを使って問題を再現します。次に、ブラウザ開発ツールを使ってサポートされていないCSS機能を特定し、MDNやCan I Useなどのリソースを使って互換性を確認します。その後、必要に応じてフォールバックやポリフィルを実装します。また、将来のメンテナンスのために修正内容を文書化します。」
10) CSS プロジェクトでクロスブラウザ互換性をどのように確保しますか?
応募者に期待すること: 面接官は、テストと互換性の標準に関するあなたの認識を確認したいと考えています。
回答例：
「BrowserStackなどのツールを用いて、主要ブラウザで早期かつ頻繁にテストを実施することで、クロスブラウザ互換性を確保しています。CSS標準に準拠し、非標準プロパティの使用は避けています。また、ベンダープレフィックスを自動処理するために、PostCSSとAutoprefixerを組み合わせて使用しています。開発中の一貫した検証とテストにより、リリース後の大きな問題を未然に防いでいます。」
