【初心者向け】destyle.css（リセットCSS）の解説
今回は私が普段使用している、destyle.css というリセットCSSを題材に、「なぜリセットが必要なの？」「どんなことをしているの？」という点を初学者の方にもわかりやすく解説していきます。
CSSを扱う上で「リセットCSS」はほぼ必須アイテムといっても過言ではありません。
ここでは、コードを部分的に抜粋しながら、destyle.css の各ルールが何のために存在するのかを順を追って説明します。
リセットCSSとは
リセットCSSとは、ウェブページのデフォルトスタイルを打ち消し、各ブラウザ間での表示差をなくすためのCSSのことです。
各ブラウザ（Chrome, Firefox, Safariなど）は、HTMLタグに対して初期スタイル（デフォルトスタイル）を持っています。例えば、h1 はデフォルトで大きなフォントサイズになっていたり、ul には点や番号のスタイルが付与されていたりします。
しかし、デフォルトスタイルはブラウザによって異なる場合があり、コーディング作業に影響を与える可能性があります。
リセットCSSを導入することで、ブラウザ間の差をなくし、コーディング作業時にスタイルを変更しやすくなります。
リセットCSSの種類
リセット系CSSは主に2種類あります。
リセット系CSS
リセット系CSSは、フォントサイズや余白などでデフォルトスタイルをほぼリセットして消すようなCSSです。destyle.cssはリセット系CSSに含まれます。
ノーマライズ系CSS
ノーマライズ系CSSは、デフォルトスタイルは残しながらも各ブラウザの違いを無くすことに重きが置かれています。有名なものにNormalize.css、Sanitize.cssなどがあります。
destyle.cssの特徴
destyle.css の公式サイトで次のような特徴を紹介されています。
可能な限りブラウザ間の一貫性を確保します。
ユーザーエージェントのスタイルをリセットする必要性を防ぎます。
必要なものだけを対象にすることで、スタイル・インスペクタの肥大化を防ぎます。
マージンとパディングを削除します。
デフォルトのフォントスタイルを削除し、適切な継承を保証します。
プレゼンテーションとセマンティクスの分離に貢献します。
適切なデフォルトスタイルを設定（ドキュメントを参照）
ユーティリティ・クラス・ライブラリや大規模なコードベースに適しています。
モダンブラウザ専用なのでサイズが小さい(~0.95kb)
destyle.cssはリセット系CSSなので、フォントサイズや余白などもすべて同じ様になっています。
モダンブラウザを対象に設計されていますし、最新バージョンは2024年1月に更新されているので、いまでも十分使えるものだと思います。
destyle.cssをオススメする理由
個人的にdestyle.cssをオススメする理由は次のとおりです。
コーディングするデザインは、ブラウザのデフォルトスタイルを活かしたものはあまりないので、リセットされていたほうがスタイリングしやすい（すでにフォントサイズなどが指定されていると、わざわざ上書きするイメージになる。）
コーディングする中で、思いがけない余白などが発生することがストレスになり、全てリセットされていたほうがコーディングしやすいと感じる
このような理由から、個人的にはリセット系のCSSをオススメしたいと思っています。
ただし、フォーム周りのリセットが少し行き過ぎている感じがあり、もとに戻すためにCSSを書くようなことをしていて二度手間感を感じる場合があります。
destyle.css のセクション構成
ここから、destyle.cssの内容について細かく解説していきます。
基本設定（ボックスモデルのリセットなど）
html要素
セクション要素（body, main など）
縦方向のリズム（マージンリセット）
見出し（Headings）
リスト関連（ul, ol, dl, dt, dd など）
Grouping content（hr, pre, address, figure など）
インライン要素（a, abbr, b, strong, code, small, sub, sup など）
フォーム要素（button, input, select, textarea など）
インタラクティブ要素（details, summary など）
テーブル要素（table, th, td など）
今回は、この流れに沿って主要なコードをピックアップして解説します。
コード解説
基本設定（box-sizing など）
*,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
min-width: 0;
}box-sizing: border-box;
すべての要素の幅・高さを算出するときに、padding や border を含めた計算方式にします。こうすることで、幅や余白の計算がシンプルになり、レスポンシブデザインの制御が楽になります。
border-style: solid; と border-width: 0;
ブラウザによってはテーブルやフォーム要素などにデフォルトの枠線がついている場合があります。これをまとめてリセットしています。
min-width: 0;
一部のブラウザで、要素にデフォルトの最小幅が付いてしまうケースを回避し、レイアウト崩れを防ぐために追加されています。
html 要素
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-webkit-tap-highlight-color: transparent; /* 3*/
}line-height: 1.15;
ブラウザによって 1.2 や 1.5 などのデフォルト値が異なるため、ここでは 1.15 に統一して全ブラウザで共通化しています。
-webkit-text-size-adjust: 100%;
iOS Safari などモバイルブラウザで、デバイスの回転や拡大縮小に合わせてフォントサイズを自動調整する機能を無効にします。ユーザーが意図していない文字の拡大を防ぐためです。
-webkit-tap-highlight-color: transparent;
iOS Safari でリンクをタップした際に現れるグレーのハイライトを透明にして、デザインを損ねないようにします。
セクション要素（body, main など）
body {
margin: 0;
}
main {
display: block;
}body { margin: 0; }
ブラウザによっては body にデフォルトマージンが入っているため、それを0にリセットしています。
main { display: block; }
古いIEなどで main が正しくブロック要素と認識されないケースに対する保険的な指定です。
縦方向のリズム（p, blockquote, figure など）
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}上記の要素にはデフォルトマージンが設定されているので、リセットしておくことで、自由に余白をカスタマイズできるようにしています。
見出し（Headings）
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}ブラウザによって h1 が大きく、h2, h3... は少しずつ小さくなるなどのデフォルトスタイルがあります。ここでは一度、サイズも太字も「継承 (inherit)」としてリセットしています。
リスト関連
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}デフォルトの「点（ディスク）」や「番号（ディシマル）」などのスタイルを削除。margin や padding もリセットしています。
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}dl（定義リスト）内の dt は見出し的な役割なので太字に、dd は余分なインデント（マージン）を削除してシンプルにしています。
Grouping content（hr, pre, address, figure など）
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
}box-sizing: content-box; height: 0;
hr を水平線として扱うときに、ブラウザの独自スタイルが働くのを防ぎ、統一的な線になるようにしています。
overflow: visible;
ブラウザによっては hr まわりに影や立体効果が出る場合があるため、カスタマイズしやすいようにオーバーフローを可視化（visible）に。
border-top-width: 1px;
デフォルトを1pxとして、余計なスタイルを削除しています。
pre {
font-family: monospace, monospace;
font-size: inherit;
}pre要素のデフォルトフォントやサイズをリセットして、他要素との整合性を取りやすくしています。
address {
font-style: inherit;
}address要素はイタリック体などデフォルトのスタイルが入っていることがあるので、リセットしています。
インライン要素（a, abbr, b, strong, code, small, sub, sup など）
a {
background-color: transparent;
text-decoration: none;
color: inherit;
}リンクに付く下線や背景色を一旦リセットし、色も親要素の色を継承させています。
abbr[title] {
text-decoration: underline dotted;
}省略形などを表示する要素に対し、ブラウザ依存の下線装飾を統一するためにドット下線を付与しています。
b,
strong {
font-weight: bolder;
}強調要素を確実に太字にするための指定です。ブラウザによっては「太字」の度合いが少し異なることがあるため、bolder で見た目を明確にしています。
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}small は少し小さい文字サイズに、sub や sup は上下に配置されるための調整がなされています。
line-height: 0; で余計な余白を詰め、position: relative; で上下位置を微調整しています。
フォーム要素（button, input, select, textarea など）
button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none; /* 1 */
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit; /* 2 */
}-webkit-appearance: none; appearance: none;
iOS/Safari 特有のデフォルトの角丸やシャドウ、ボタンのスタイルを削除しています。
text-transform: inherit;
大文字化などが勝手に行われるのを防ぎ、親要素の設定を継承します。
その他にも、color: inherit; font: inherit; により、ボタンや入力欄でも同じフォントと色を使うようにしています。
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}クリックできる要素は cursor: pointer; で手の形のカーソルを表示し、操作感を明確にします。
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
cursor: default;
}disabled状態のボタンは通常の矢印カーソルに指定しています。
option {
padding: 0;
}ブラウザによってoptionにパディングが入る場合があるため、リセットします。
fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
}デフォルトで枠や余白がつく fieldset, legend をリセットしています。
progress {
vertical-align: baseline;
}進捗バー（progress）要素も、テキストと同じラインに揃えるようにしてバランスをとっています。
textarea {
overflow: auto;
}IE などでテキストエリアのデフォルトスクロールバー挙動を調整しています。
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="number"] {
-moz-appearance: textfield; /* Firefoxでのスピンボタンの非表示 */
}数値入力（type="number"）で表示されるスピンボタンをリセットし、不要なUIを削除します。Firefox では -moz-appearance: textfield; を指定して外観をリセットします。
[type="search"] {
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}Safari の検索欄に備わっているボタンや枠線などを削除し、デザインの統一感を損なわないようにします。
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}ファイルアップロードボタンの外観をリセットし、フォントを継承ています。
label[for] {
cursor: pointer;
}入力欄に紐づくlabel をフォーカスできるようにカーソルをポインタにしています。
インタラクティブ要素（details, summary など）
details {
display: block;
}
summary {
display: list-item;
}details や summary は、古いブラウザで適切に描画されない場合があるため、ブロック要素やリストアイテムとして表示されるよう指定しています。
[contenteditable]:focus {
outline: auto;
}contenteditable 属性を持つ要素がフォーカスされたときに枠線を表示。Firefox などでのキーボード操作時の見た目を整えています。
テーブル要素（table, th, td など）
table {
border-color: inherit; /* 1 */
border-collapse: collapse;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}border-color: inherit;
テーブル枠の色を要素の色に合わせ、不要なデフォルトのグレー線を防ぎます。
border-collapse: collapse;
テーブルセル間の境界線を重ねる（隙間を消す）指定です。
td, th { vertical-align: top; padding: 0; }
セル内の余白や縦揃えをリセットして、細かくレイアウトを制御できるようにしています。
th は強調（太字）と左揃えをデフォルトとし、表の見出しとして扱いやすくしています。
まとめ
destyle.css は広範囲にわたってブラウザのデフォルトスタイルをリセットしていることがわかります。
ブラウザのデフォルト余白を削除して、開発者自身のコントロールを優先
フォームやテーブルなど多種多様な要素の外観を統一してリセット
モダンなHTML要素（main, details, summary など）やモバイル環境での独自挙動（iOS Safari など）にも対応
リセットCSSを導入しておくと、実装時にトラブルを減らしコーディングがしやすくなります。
以上がdestyle.css（リセットCSS）の解説でした。
この記事が初学者の方の学習やCSS設計の手助けになれば幸いですので、ぜひご活用ください！