CSS

作成日時：2024-08-01以前
更新日時：2024-08-25

BEM記法

block__element--modifier:{}
search-form__button--disabled:{}

Padding単位の比較

1. px (ピクセル)

特徴

• 固定的な単位
• デバイスに依存
• 精密な制御が可能

使用すべき場面

• 厳密なレイアウト制御が必要な場合
• 小さな要素や細かい調整
• デバイスの解像度に関係なく一定のサイズを保ちたい場合

例

.button {
  padding: 10px 20px;
}

2. rem (ルート要素のフォントサイズに対する相対値)

特徴

• ルート要素（通常は）のフォントサイズに基づく
• レスポンシブデザインに適している
• アクセシビリティに優れている

使用すべき場面

• レスポンシブデザイン
• 全体的な一貫性を保ちたい場合
• テキストサイズの変更に合わせてレイアウトを調整したい場合

例

html {
  font-size: 16px;
}
.container {
  padding: 1rem 2rem;
}

3. % (パーセント)

特徴

• 親要素に対する相対的なサイズ
• 流動的なレイアウトに適している
• コンテナのサイズに応じて変化する

使用すべき場面

• 親要素に対して相対的なサイズを設定したい場合
• 流動的なレイアウト
• 横幅いっぱいに広がる要素のパディング

例

.parent {
  width: 300px;
}
.child {
  padding: 5% 10%;
}

推奨される使用方法

1. 基本的には rem を使用
   • レスポンシブデザインとアクセシビリティの観点から優れている
   • 例: padding: 1rem 1.5rem;
2. 親要素に対する相対的なサイズが必要な場合は % を使用
   • 特に水平方向のパディングに適している
   • 例: padding: 20px 5%;
3. 精密な調整が必要な小さな要素には px を使用
   • ボタンやアイコンなどの小さなUI要素に適している
   • 例: padding: 5px 10px;
4. 複数の単位を組み合わせて使用することも可能
   • 例: padding: 1rem 5%;

最終的には、プロジェクトの要件、対象デバイス、デザインの一貫性を考慮して、適切な単位を選択することが重要。

env()

env() - CSS: カスケーディングスタイルシート | MDN