最小限のCSSリセット

投稿日: 2022-04-20 2022-04-20
タグ: css

CSSリセットルールは1マイルの長さである必要はなく、最近のほとんどのブラウザーは基本レイアウトでかなり統一されています。以下に、リセットに適した最小有効量であると私が判断したものを示します。新しいプロジェクトにコピーするだけで、稼働状態になります。

🔖このページをブックマークして、すばやく簡単に参照できるようにします

CSSのリセットは次のとおりです。

html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

注意すべき点がいくつかあります

ご覧のとおり、画像がデフォルトでレスポンシブになるようにルールを含めました。
おそらく、このCSSリセットの最も重要な部分は、box-sizing: border-boxです。これにより、一貫性のある予測可能なサイズ設定が保証されます。 content-box のデフォルト値は、パディングまたは境界線を考慮していません。
リストのデフォルトの箇条書きを維持したい場合は、olおよびulのルールを削除できます。
font-weight: normalを使用すると、デフォルトで見出しは太字になりません。デフォルトの外観を気にしない場合は、それを削除してください。
デフォルトのフォントサイズを16pxに設定しました。それ以外はすべてrem単位で指定でき、その16pxに基づいています。次に、テキストを全体的に少し大きくするためにグローバルに調整する場合は、17または18pxなどの基本ルールを変更できます。

🙈何かが足りないと思いますか？こちらからまでご連絡ください。

getdocs

13036