モダンなCSSリセット（解説付き）
モダンなCSSリセット
モダンなCSSリセット：解説とルール作成ツール付き | We.Inc
すべてのルールを解説した短いモダンなCSSリセットです。ルールをオンとオフで切り替え、結果をカスケードレイヤーで包んでコピーできます。リセットとnormalize.cssの違いも解説しています。
モダンなCSSリセットとは、自分のスタイルより前に置く十数個の短いルールのことです。すべての要素へのborder-boxの適用、デフォルトのマージンをゼロに、読みやすい行の高さ、コンテナの幅を上限とするブロック表示の画像、そしてサイトのフォントを継承するフォーム部品です。下で必要なルールを選び、結果をコピーしてください。
主要なルールが解決すること
- ルール
- 置き換えるブラウザーのデフォルト
- 変更する理由
- box-sizing: border-box
- 幅にパディングとボーダーが含まれるようになる
- margin: 0
- body、見出し、p、リストのマージン
- 余白は自分のCSSだけで決まる
- bodyにline-height: 1.5
- normal（約1.2）
- 段落が読みやすくなる
- img { display: block; max-width: 100% }
- インライン、本来の幅
- 画像の下の隙間とはみ出しがなくなる
- 入力欄とボタンにfont: inherit
- 小さなサイズのシステムフォント
- フォームがページの他の部分とそろう
理解していないリセットをコピーすると、自分で選んでいないルールのデバッグに追われることになります。このページでは各行をわかりやすい言葉で説明し、スイッチで自分だけのバージョンを作れるようにしています。貼り付けるファイルは短く、すべての行にちゃんと理由があります。
- 各ルールの横にある説明を読み、オンまたはオフに切り替えます。
- 出力を@layer resetで包むかどうかを選びます。包めば、自分のルールがどれも問題なくリセットに勝ちます。
- 生成されたCSSをコピーし、他のスタイルシートより先に読み込みます。
- リセットはカスケードレイヤーに入れましょう。どのレイヤーにも属さないスタイルは、詳細度に関係なくレイヤー内のスタイルに勝ちます。
- すべてのulでlist-styleをリセットしてはいけません。Tailwindのドキュメントは、スタイルを外したリストをVoiceOverがリストとして読み上げない場合があると注意しています。スタイルを外したリストにはrole="list"を追加しましょう。
- リセットでフォーカスのアウトラインには手を付けないでください。全体で削除するのではなく、コンポーネントごとにスタイルを調整しましょう。
- Tailwindを使っているなら、Preflightというリセットがすでに含まれているため、2つ目のリセットは通常は余計なものを増やすだけです。
よくある質問
CSSリセットとnormalize.cssの違いは何ですか？
リセットはブラウザーのデフォルトを取り除き、ほぼ白紙の状態から始められるようにします。normalize.cssは役に立つデフォルトを残し、ブラウザー間で挙動が異なる箇所だけを修正します。現在のリセットの多くはその中間で、見出しの太字やリストはそのままにしつつ、マージンを取り除き、サイズの計算方法を修正します。
2026年でもCSSリセットは必要ですか？
ブラウザー間の差は以前よりずっと小さくなったため、昔のような巨大なリセットは不要です。それでも短いリセットは用意する価値があります。content-boxでのサイズ計算、bodyのマージン、インラインの画像といったデフォルトは、レイアウトにとって望ましいものではないことがほとんどだからです。
リセットでなぜ:where()を使うのですか？
:where()は詳細度がゼロなので、後に書いたセレクターなら、要素セレクター単体であってもリセットを上書きできます。これにより、リセットのルールがコンポーネントのスタイルに知らないうちに勝ってしまうのを防げます。
リセットはどこに置けばよいですか？
他のどのスタイルシートよりも先に読み込むか、メインのCSSファイルの先頭で@layer resetの中にインポートし、@layer reset, base, componentsでレイヤーの順序を一度だけ宣言しましょう。
box-sizingを最初に置く理由
- デフォルトのcontent-boxでは、幅300pxでパディングが20pxのカードは、最終的に幅340pxになります。border-boxはパディングとボーダーを指定した幅の中に含めるため、多くの人が期待するとおりのサイズになります。
- ::beforeと::afterの疑似要素にも適用しておけば、装飾用の図形と、それが飾るボックスとの間で一貫性が保たれます。
長く使えるテキストのルール
- text-wrap: balanceは短い見出しの各行の長さをそろえ、text-wrap: prettyは段落の最終行に1語だけが残るのを防ぎます。これらの値を知らないブラウザーは単に無視するため、含めても安全です。
- overflow-wrap: break-wordを使えば、長いURLやコードの文字列がスマートフォンでページを横に押し広げず、途中で折り返されます。
リセットがやるべきでないこと
- リセットはデザインシステムではありません。色、フォントファミリー、余白のスケールは自分のベースレイヤーに置き、リセットに触れずに変更できるようにしましょう。
- すべての要素へのoutline: noneや、すべての訪問者に対するアニメーションの全削除など、アクセシビリティを損なうルールは避けましょう。動きに関する設定はprefers-reduced-motionのクエリに入れるべきものです。
リセット、normalize、それとも何もしないか
ブラウザーのデフォルトに対処する3つの方法
- 従来の強力なリセット
- 見出しのサイズを含め、ほぼすべてのデフォルトを取り除く
- 今ではほとんど不要
- デフォルトを残し、ブラウザー間の違いを修正する
- デフォルトの文字組みを生かしたいコンテンツサイト
- 短いモダンなリセット
- サイズ計算、マージン、メディア、フォームだけを修正する
- ほとんどの新しいサイトとアプリ
- フレームワークのリセット（Tailwind Preflight）
- フレームワークに同梱されている
- すでにそのフレームワークを使っているプロジェクト
適用前と適用後
border-boxありとなしのカード
どちらのボックスもwidth: 200pxと指定しています。パディングとボーダーを加えてもその幅を保てるのは、2つ目だけです。
border-boxでのサイズ計算
幅と高さにパディングとボーダーが含まれます。
デフォルトのマージンを削除
余白は自分のルールだけで決まります。
読みやすい本文
行の高さを大きくし、bodyを画面の高さいっぱいにします。
ブロック表示のレスポンシブなメディア
画像の下にベースラインの隙間ができず、はみ出しもありません。
フォームがフォントを継承
入力欄とボタンが周囲のテキストとそろいます。
長い単語を折り返す
長いURLがはみ出さずに折り返されます。
見出しの行をそろえる
短い見出しの各行の長さを均等にします。
最終行の1語だけの行を防ぐ
段落の最終行に1語だけが残るのを避けます。
アプリのルートを分離
新しい重ね合わせコンテキストを作り、アプリ内のz-indexがポータルと競合しないようにします。
アンカーへのスムーズなスクロール
動きを減らす設定をしていない訪問者に対してだけ適用します。
リセット作成ツール
デフォルトの選択内容をカスケードレイヤーで包んだもの：
ルール
@layer resetで包む
{n}個のルール
CSSをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る