CSS-interview
この記事は、CSS面接の準備のための学習ノートであり、主にCSSボックスモデル、配置、フロート、BFC、フロートのクリアなど、核となる概念とよくある面接の質問を網羅しています。
1. CSS ボックスモデル (Box Model)
1.1 CSSボックスモデル
CSSボックスモデルは、Webページ上の要素の表示領域を定義するものです。各要素は、コンテンツ、パディング、ボーダー、マージンの4つの部分で構成されます。
- **content:** 要素の実際のコンテンツ（テキスト、画像など）が表示される領域です。
- **padding:** コンテンツとボーダーの間の余白です。
- **border:** 要素を囲む枠線です。
- **margin:** 要素と他の要素との間の余白です。
box-sizing プロパティは、ボックスモデルの計算方法を指定するために使用されます。デフォルト値は content-box で、これは要素の幅と高さにパディングとボーダーを加えたものが、要素の合計の幅と高さになることを意味します。border-box を指定すると、要素の幅と高さにパディングとボーダーが含まれるようになり、要素の合計の幅と高さは変わりません。
1.2 JSでボックスモデルの幅と高さを設定・取得する方法
JavaScriptを使用して要素の幅と高さを取得および設定するには、次のプロパティとメソッドを使用できます。
| プロパティ/メソッド | 説明 |
|---|---|
offsetWidth |
要素の幅（ボーダーとパディングを含む）をピクセル単位で取得します。 |
offsetHeight |
要素の高さ（ボーダーとパディングを含む）をピクセル単位で取得します。 |
clientWidth |
要素の幅（パディングを含む）をピクセル単位で取得します。 |
clientHeight |
要素の高さ（パディングを含む）をピクセル単位で取得します。 |
style.width |
要素の幅をCSSで設定します。 |
style.height |
要素の高さをCSSで設定します。 |
<div id="myElement"></div>
<script>
const element = document.getElementById('myElement');
// 要素の幅と高さを取得
console.log(element.offsetWidth); // ボーダーとパディングを含む幅
console.log(element.offsetHeight); // ボーダーとパディングを含む高さ
// 要素の幅と高さを設定
element.style.width = '200px';
element.style.height = '100px';
</script>
2. CSS配置 (Positioning)
2.1 CSSの配置メカニズム
CSSには、要素の配置を制御するための5つの配置メカニズムがあります。
- **static:** デフォルトの配置方法です。要素は、ドキュメントの通常のフローに従って配置されます。
- **relative:** 要素は、通常のフロー内の元の位置から相対的に配置されます。
top、right、bottom、leftプロパティを使用して、要素を元の位置からオフセットすることができます。 - **absolute:** 要素は、最も近い位置指定された祖先要素を基準にして配置されます。位置指定された祖先要素がない場合は、ドキュメントのルート要素を基準にして配置されます。
top、right、bottom、leftプロパティを使用して、要素を基準となる要素からオフセットすることができます。 - **fixed:** 要素は、ビューポートを基準にして配置されます。スクロールしても、要素は常に同じ位置に表示されます。
- **sticky:** 要素は、特定のスクロール位置までは通常のフローに従って配置され、その位置を超えると固定された位置に配置されます。
top、right、bottom、leftプロパティを使用して、要素が固定される位置を指定することができます。
2.2 absoluteとrelativeの基準点の違い
- **absolute:** 最も近い位置指定された祖先要素を基準に配置されます。位置指定された祖先要素がない場合は、ドキュメントのルート要素を基準に配置されます。
- **relative:** 要素自身の元の位置を基準に配置されます。
3. CSSフロート (Float)
3.1 CSSのフロート
CSSのフロートは、要素を左または右にフロートさせて、周囲のテキストを回り込ませるために使用されます。フロートされた要素は、通常のフローから外れるため、レイアウトに影響を与える可能性があります。
フロートの特性:
- 要素は、左または右にフロートされます。
- フロートされた要素は、通常のフローから外れます。
- フロートされた要素は、周囲のテキストを回り込ませます。
3.2 フロートのクリア
フロートされた要素は、レイアウトに影響を与える可能性があるため、フロートをクリアする必要があります。フロートをクリアするには、次の方法を使用できます。
- **clearプロパティ:** 要素のどちらの側にフロートされた要素を許可しないかを指定します。
- **BFC (Block Formatting Context) の利用:** フロートされた要素を含む要素をBFCにすることで、フロートされた要素が親要素の外部にはみ出さないようにすることができます。
- **clearfixハック:** フロートされた要素の後に空の要素を追加し、その要素に
clear: bothを指定します。
4. BFC (Block Formatting Context)
4.1 BFC（ブロックフォーマットコンテキスト）
BFCは、要素がどのようにフォーマットされ、他の要素とどのように相互作用するかを定義する領域です。BFCを作成することで、レイアウトの問題を解決することができます。
BFCの形成条件:
- floatの値がnone以外
- positionの値がabsoluteまたはfixed
- displayの値がtable-cell、table-caption、inline-block、flex、またはinline-flex
- overflowの値がvisible以外
BFCの特性:
- BFC内の要素は、垂直方向に積み重ねられます。
- BFCは、フロートされた要素を含むことができます。
- BFCは、マージンの崩壊を防ぐことができます。
5. その他
5.1 CSSセレクタ
CSSセレクタは、HTMLドキュメント内の要素を選択するために使用されます。セレクタを使用して、選択した要素にスタイルを適用することができます。
一般的なCSSセレクタ:
- **タグセレクタ:** 要素のタグ名を選択します。（例:
p） - **クラスセレクタ:** 要素のclass属性値を選択します。（例:
.example） - **IDセレクタ:** 要素のid属性値を選択します。（例:
#myElement） - **属性セレクタ:** 要素の属性値を選択します。（例:
[type="text"]） - **擬似クラスセレクタ:** 要素の状態を選択します。（例:
:hover） - **擬似要素セレクタ:** 要素の一部を選択します。（例:
::before）
参考文献
Q&A
Q1: BFCとは何ですか？
A1: BFC（ブロックフォーマットコンテキスト）は、要素がどのようにフォーマットされ、他の要素とどのように相互作用するかを定義する領域です。BFCを作成することで、レイアウトの問題を解決することができます。
Q2: CSSの配置方法にはどのようなものがありますか？
A2: CSSには、static、relative、absolute、fixed、stickyの5つの配置方法があります。それぞれの配置方法には、独自の特性と用途があります。
Q3: フロートをクリアするにはどうすればよいですか？
A3: フロートをクリアするには、clearプロパティ、BFCの利用、clearfixハックなど、いくつかの方法があります。それぞれの方法には、独自の利点と欠点があります。