こんにちは、テクニカルインタビューの将来の犠牲者！ 👋
フロントエンドのポジションの面接の準備をしていますか？クールなReactフックやTypeScriptジェネリックについて話すことをすでに想像していますが、インタビュアーが突然inlineとinline-blockの違いは何ですか？」と聞いてきます。そしてあなたは： surprised_pikachu.jpg
はい、2026年でも、ソビエトの面接官は基本を追求するのが大好きです。そして、それは正しいことです。ボックスモデルを理解していないのに仮想DOMを説明しようとする人は、ブレーキペダルの場所を知らないのに量子エンジンについて話すドライバーのようなものだからです。
上級者でさえも面接の前に緊張してググル検索するような質問を解き明かしていきましょう。
1. ブロックモデル（ボックスモデル）— ジャンルの定番
質問： ブロックモデルは何で構成されていますか？
インタビューアーへの回答：
各要素は、次のものからなるレイヤードケーキです。
Content — コンテンツ自体
Padding — 要素内のインデント
Border — フレーム
Margin — 外側のインデント
次に言うべきこと（賢く見えるために）：
「デフォルトでは、widthとheightはコンテンツにのみ適用されます。ただし、box-sizing: border-boxを使用する場合、サイズにはパディングと境界線が含まれます。これにより、予期しないオーバーフローを防ぎ、CSSリセットの標準になっています。
なぜ尋ねるのか：
レイアウトのバグの99％は、マージンやパディングを忘れたときに発生します。または、box-sizingが間違っている場合です。
2. 位置決め：静的、相対的、絶対的、固定、スティッキー
質問： ポジショニングの種類の違いは何ですか？
簡単な回答：
Static — 通常の動作（
positionが全く指定されていないかのように）Relative — 通常の位置からのずれ
Absolute — 近い位置にある親に対する位置
Fixed — ビューポートに対して（スクロール時に固定）
Sticky — relative と fixed のハイブリッド（ポイントに到達したときに固定）
落とし穴：
絶対要素は、position: relative/absolute/fixedを持つ親を探しています。見つからない場合は、<body>に対して配置されます。これが、モーダルが時々宇宙に飛んでいく理由です。
3. Flexbox — すべてのレイアウトデザイナーのお気に入り
質問： divを垂直方向と水平方向にどのように中央に配置しますか？
2026年の回答：
.container {
display: flex;
justify-content: center; /* по горизонтали */
align-items: center; /* по вертикали */
}追加ポイント：place-items: centerのグリッドもありますが、フレックスは単軸レイアウトの方が簡単です。」
面接官がmargin: 0 autoと表について話している場合、彼は2010年に立ち往生しているか、あなたが立ち往生しているかどうかを確認しています。😄
4. グリッド vs フレックスボックス — 永遠の議論
質問： GridとFlexboxはいつ使うべきですか？
正解：
Flexbox — 1 次元レイアウトの場合（行または列）
Grid — 2 次元レイアウトの場合（行と列を同時に）
例：
ナビゲーション、カードを並べる → フレックスボックス
ページ全体のレイアウト、複雑なグリッド→グリッド
5. セレクターの特異性（Specificity）
質問： どのスタイルが適用されますか？
#header .nav li { color: red; }
.nav li { color: blue; }
li { color: green; }回答:
赤色、特異性は (ID、クラス、タグ) としてカウントされるため:
最初のもの：（1、1、1）= 111
2番目：（0、1、1）= 11
3番目：（0、0、1）= 1
ライフハック：!importantはすべてを中断しますが、それを使用することはCAPS LOCKでコードを書くようなものです。技術的には機能しますが、誰もが不審に思うでしょう。
6. セマンティックHTMLは単なる流行語ではありません
質問： セマンティックタグが必要な理由
<header>、<nav>、<article>、<section>、<footer>は、単なるスタイリッシュな<div>ではありません。
利点：
SEO — 検索エンジンは構造を理解します
Accessibility —スクリーンリーダーはどこにあるか知っています
コードの可読性 — 何が起こっているのかを素早く理解する
アンチパターン：
<div class="header">
<div class="nav">...</div>
</div>これは、変数に var1、var2 という名前を付けるようなものです。動作しますが、なぜでしょうか？
7.疑似クラスと疑似要素
質問： どんな違いがありますか？
疑似クラス （1つのコロン）：
a:hover { }
li:first-child { }
input:focus { }特定の状態の要素を選択します。
疑似要素 （コロン2つ）：
p::before { content: "👉 "; }
p::after { content: " 👈"; }仮想要素を作成します。
8. Zインデックスとオーバーレイコンテキスト
質問： なぜ私のz-index: 9999の要素はまだ別の要素の下にあるのですか？
回答:z-index は、スタッキングコンテキスト内でのみ動作します。
新しいコンテキストを作成します。
position: absolute/relative/fixed+z-indexopacity < 1transformfilterさらに10の特性
コードにz-index: 99999がある場合、誰かが必死にバグと戦って負けたことを知ってください。
9. 単位: px, em, rem, vh, vw
質問： どんな違いがありますか？
チートシート：
px — 絶対ピクセル
em — 親のフォントサイズに対して（カスケードされます！）
rem — フォントサイズに関して
<html>(カスケードされません)vh/vw — ビューポートの高さ/幅のパーセンテージ
% — 親に関して
remは、最新のレスポンシブレイアウトに最適な選択肢です。HTMLでフォントサイズを変更すると、すべてがスケーリングされます。
10. Display: none vs Visibility: hidden vs Opacity: 0
質問： どのような違いがありますか？
回答:
プロパティ | 場所を占有 | イベントに利用可能 | アニメーション化 |
|---|---|---|---|
| ❌ | ❌ | ❌ |
| ✅ | ❌ | ❌ |
| ✅ | ✅ | ✅ |
何をいつ使うか：
完全に削除する —
display: none場所を保存して非表示にする —
visibility: hiddenスムーズなフェードイン/フェードアウト —
opacity
11. 適応性：メディアクエリ
質問： ウェブサイトをレスポンシブにするにはどうすればよいですか？
基本構文:
/* Mobile first подход */
.container { width: 100%; }
@media (min-width: 768px) {
.container { width: 750px; }
}
@media (min-width: 1200px) {
.container { width: 1170px; }
}現代のトレンド：
スムーズなズームにはclamp()を使用します。
font-size: clamp(1rem, 2vw, 2rem);12. CSS変数（カスタムプロパティ）
質問： CSS変数の仕組み
例：
:root {
--primary-color: #3498db;
--spacing: 16px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}Sass変数を使用する利点：
JavaScriptを介して変更できます
継承をサポート
ブラウザでネイティブに動作します
13. 垂直方向のマージンコラプス
質問： 2つのブロック間でマージンが加算されないのはなぜですか？
回答:
垂直マージンは折りたたまれます（大きい方が取得されます）。これはマージンコラプスと呼ばれます。
例：
.block1 { margin-bottom: 20px; }
.block2 { margin-top: 30px; }
/* Расстояние между ними = 30px, а не 50px */無効にする方法：
Flexbox/グリッドコンテナー
overflow: hidden親paddingまたはborder親
14. Inline vs Inline-block vs Block
質問： どんな違いがありますか？
真理表：
タイプ | 幅/高さ | 新しい行 | マージン/パディングが可能 |
|---|---|---|---|
| ❌ | ❌ | 水平のみ |
| ✅ | ❌ | ✅ すべて |
| ✅ | ✅ | ✅ すべて |
実例：<span> — インライン、<div> — ブロック、そして <button> はデフォルトでインラインブロックです。
15. pseudo-class :nth-child()とその仲間
質問： 3番目の要素を選択するにはどうすればよいですか？
回答:
li:nth-child(3n) { /* Каждый третий */ }
li:nth-child(odd) { /* Нечетные */ }
li:nth-child(even) { /* Четные */ }
li:nth-child(3n+1) { /* 1, 4, 7, 10... */ }落とし穴：:nth-child()は、すべての隣人、さらには異なるタイプの隣人もカウントします。特定のものだけが必要な場合は、:nth-of-type()を使用してください。
🚀 それでは、学習について（退屈なことなし）
さて、あなたはこれらの質問をすべて読み、おそらく何かを書き留めました。しかし、正直に言うと、1週間後には半分が頭から飛び出します。それが私たちの脳の働きです。
問題： 実践なしの理論は、「泳ぎ方を学ぶ」というビデオを見るようなものです。理解できても、溺れないようにしてください。
解決策： 練習、練習、練習。そして単に「エディターを開いて3行書く」だけではなく、体系的に練習します。
ここでは実際に練習することができます。
コディック — プログラミングを学ぶためのモバイルアプリケーション。
理論は少しずつ（過負荷なしで）投与されます
インタラクティブなタスクで即座に練習
電車や待ち時間など、どこでも携帯電話で学習できます
Python、JavaScript、HTML/CSS、その他の技術コース
ポイントは、「flexboxの仕組み」を読むだけでなく、すぐに実際の要素をレイアウトすることです。筋肉記憶が形成され、面接の際には自分の手で構文を思い出すことができます。
ボーナス - TelegramチャンネルKodik — 便利な投稿やライフハックを共有し、言語やフレームワークの新機能について話し合い、何か不明な点があれば理解するのに役立つコミュニティ。
結論：面接で失敗しないためには？
3つの黄金のルール：
答えがわからない場合でも、慌てないでください。 「よくわかりませんが、おそらく…」と正直に言い、論理的に推測する方が、無意味なことを言うよりも良いでしょう。
練習は暗記よりも重要です。 ペットプロジェクトをレイアウトし、お気に入りのサイトをコピーし、壊して修理します。手で作ることで、最もよく覚えられます。
理解 > 記憶。
display: flexが要素をフレックスにすることを知るだけでは十分ではありません。なぜ、いつそれを使用するかを理解することが必要です。
面接がうまくいくように！フレックスがあなたと共にあらんことを。🚀