EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSS Reset & Atomic CSS

CSS Reset

異なるブラウザには異なるデフォルトスタイルがあります。CSS Resetはこれらの違いを排除し、一貫したレンダリングを実現します。

基本リセット

CSS 
/* 全称リセット */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* bodyの基本スタイル */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* リンクのリセット */
a {
  text-decoration: none;
  color: inherit;
}

/* 画像のレスポンシブ */
img {
  max-width: 100%;
  display: block;
}

Normalize.cssとResetの比較

アプローチ 利点 欠点
Normalize.css 有用なデフォルトを保持し、不一致のみを修正 より複雑
完全Reset クリーンスレート、完全な制御 すべてを再定義する必要がある

推奨： ほとんどのプロジェクトではNormalize.cssを使用してください。

Atomic CSS

各クラスが1つのことを行う——レゴブロックのように：

サンプル

HTML 
<style>
.text-center { text-align: center; }
.text-red { color: red; }
.mt-10 { margin-top: 10px; }
.p-20 { padding: 20px; }
.bg-light { background-color: #f5f5f5; }
.border { border: 1px solid #ddd; }
.rounded { border-radius: 4px; }
</style>
<div class="p-20 bg-light border rounded">
  <h3 class="text-center">カードタイトル</h3>
  <p class="mt-10">カードコンテンツ</p>
</div>
▶ 試してみよう

利点

  1. きめ細かい制御: 各クラスが1つのことを行い、柔軟に組み合わせ可能
  2. 高い再利用性: 1つの.flexがどこでも機能
  3. 小さなCSS: プロパティ宣言の重複なし
  4. 安全な変更: 1つのクラスを変更しても関係のない要素が壊れない

❓ よくある質問

Q Normalize.cssとCSS Reset、どちらを使うべきですか？
A Normalize.cssを推奨します——有用なデフォルト（h1のフォントサイズなど）を保持しながら、ブラウザの不一致のみを修正します。従来のResetはすべてをゼロにし、すべての要素を再定義する必要があるため、作業が増加します。
Q `* { box-sizing: border-box }`はパフォーマンスに影響しますか？
A ほとんど影響ありません。全称セレクターのパフォーマンスオーバーヘッドはモダンブラウザでは無視でき、`box-sizing: border-box`の利点は理論的なパフォーマンス損失をはるかに上回ります。安心して使用してください。
Q アトミッククラスはいつ使うべきですか？
A 大規模プロジェクトや統一デザインシステムに最適です。小さなプロジェクトでは通常のクラスで十分です。Tailwind CSSなどのフレームワークは学習曲線が高く、すべてのプロジェクトに必要なわけではありません。

📖 まとめ

📝 演習

  1. reset.cssファイルを作成してください：全称マージン/パディング/box-sizingリセット、bodyの基本フォント/カラー、リンクスタイルリセット、レスポンシブ画像。
  2. reset.cssに少なくとも10の一般的なアトミッククラスを追加してください（flex、スペーシング、テキスト配置など）。
  3. reset.cssのアトミッククラスのみを使用して、シンプルなカードレイアウト（タイトル、テキスト、画像）のHTMLページを作成してください。
100%