モダンなCSSリセット（ジェネレーター）

ルールにチェックを入れてください。それぞれに修正内容を説明する短いコメントが付くので、鵜呑みにコピーせず、理解して調整できます。

すべてのサイトの先頭に置くCSS

利用できる言語:

モダンなCSSリセット（ジェネレーター）: 用途

どのプロジェクトも、同じことの修正から始まります。デフォルトのマージン、box-sizing、レイアウトからはみ出す画像、別のフォントのフォーム欄、スマホの画面を崩す長い単語などです。

必要なルールにチェックを入れて、コメント付きの短いリセットをコピーしてください。box-sizing border-box、dvh での最小高さ、レスポンシブなメディア、フォームの font: inherit、overflow-wrap、見出しと段落の text-wrap balance と pretty、動きの低減を求めていない人だけへのスムーズスクロール、求めた人向けのアニメーション停止を含みます。

使い方

使いたいルールにチェックを入れます。
それぞれのコメントを読みます。
reset.css をコピーまたはダウンロードして、CSS の先頭に置きます。

使うタイミング

サイトを最初から作り始める。
チームのプロジェクトを統一する。
各リセットルールの働きを理解する。

よくある質問

CSSリセットとは何ですか？

CSS の先頭に置く短いルール集で、ブラウザごとの違いや厄介な初期値（body のマージン、レイアウトからはみ出す画像、別のフォントになるフォーム欄など）を取り除きます。残りの CSS を書きやすくします。

リセットとノーマライズのどちらですか？

normalize.css はデフォルトのスタイルを残してブラウザ間の差だけを直します。モダンなリセットはもう少し進んで、ほぼ必ず上書きされるものを取り除きます。最近のブラウザは以前よりずっと似てきたため、このような短いリセットが主流になりました。

スムーズスクロールがメディアクエリの中にあるのはなぜですか？

アニメーションするスクロールは、動きに敏感な人に不快感を与えることがあります。prefers-reduced-motion: no-preference の中に入れると、システムで動きの低減を求めていない人にだけ有効になります。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。