自作リセットCSSの作り方——GitHub + jsDelivr CDNで自分だけのCDN URLを手に入れる

自作リセットCSSとは、既存のリセットCSSライブラリに頼らず、自分のプロジェクトに必要な最小限のリセットだけを書いた自前のスタイルシートのことです。GitHubに公開してjsDelivr CDNで読み込めば、どのプロジェクトでもURLひとつで使い回せます。

リセットCSSは定番ライブラリを使うのが一般的ですが、「どの行が何をしているか分からないまま使っている」人も多いのではないでしょうか。自分で1行ずつ書いてみると、なぜその指定が必要なのかが体感で分かります。

この記事では、20行程度のミニマルなリセットCSSを一緒に作り、GitHubにpushしてjsDelivr CDNで読み込むところまでを実践します。所要時間は約30分。完成すれば、自分だけのCDN URLが手に入ります。

なぜ自作するのか——既製品との違い

destyle.cssやNormalize.cssなどのdestyle.cssやNormalize.cssなどのリセットCSSライブラリは、あらゆるプロジェクトで使えるように設計されています。そのため、自分のプロジェクトでは使わないリセット指定も多く含まれています。

自作リセットCSSのメリットは3つあります。

1. すべての行の意味が分かる — 自分で書いたコードなので、何をリセットしていて何をリセットしていないかが明確
2. 不要なコードがゼロ — プロジェクトに必要な指定だけを含むため、ファイルサイズが最小限
3. CSSの理解が深まる — ブラウザのデフォルトスタイルを知ることで、CSSの仕組み自体への理解が進む

実務では定番ライブラリを使うのがベストプラクティスです。ただ、一度自分で作ってみると「なぜこのリセットが必要なのか」が腹落ちし、ライブラリを選ぶときの判断力も上がります。

自作リセットCSSを作る——7つの指定を理解する

ここから実際にリセットCSSを書いていきます。各指定が「なぜ必要か」を解説するので、自分のプロジェクトに合わせて取捨選択してください。

1. box-sizingの統一

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

ブラウザのデフォルトでは box-sizing: content-box が適用されており、paddingとborderが要素の幅に加算されます。border-box に変更すると、widthで指定した値がpadding・borderを含んだ最終的な幅になります。現代のCSS設計ではほぼ必須の指定です。

2. marginのリセット

body,
h1, h2, h3, h4, h5, h6,
p,
ul, ol,
figure,
blockquote {
  margin: 0;
}

ブラウザは見出し・段落・リストなどに独自のmarginを付けています。これをリセットして、自分でmarginを設計することで意図しない余白を防ぎます。* { margin: 0; } で全要素に指定する方法もありますが、パフォーマンスへの影響を避けるため、対象要素を明示する方法をおすすめします。

3. リストスタイルのリセット

ul, ol {
  padding: 0;
  list-style: none;
}

ナビゲーションやカード一覧など、リスト要素をレイアウト目的で使う場面が多いため、デフォルトのpaddingとbullet（・）を外しておきます。文章中のリストで箇条書きが必要な場合は、そのコンポーネントのCSSで個別に list-style: disc を指定します。

4. 画像のレスポンシブ対応

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

画像はデフォルトでインライン要素のため、下に数ピクセルの隙間が生まれます。display: block でこれを解消し、max-width: 100% で親要素からはみ出さないようにします。レスポンシブデザインでは必須の指定です。

5. フォントの継承設定

input,
button,
textarea,
select {
  font: inherit;
}

フォーム要素はbodyに指定したfont-familyやfont-sizeを継承しません。ブラウザ独自のフォント設定が適用されるため、font: inherit で親要素の設定を引き継ぐようにします。これを忘れると、ボタンだけフォントが違う、入力欄の文字サイズが小さいといった問題が起きます。

6. bodyの基本設定

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

ブラウザデフォルトの line-height は約1.2で、本文テキストには窮屈です。1.5〜1.8に設定すると読みやすくなります。-webkit-font-smoothing: antialiased はmacOS/iOSでのフォントレンダリングを滑らかにする指定で、Josh Comeau氏のCustom CSS Resetでも採用されています。

7. アンカーリンクの色リセット

a {
  color: inherit;
  text-decoration: none;
}

リンクのデフォルト色（青）と下線を外し、デザインに合わせてコンポーネントごとにスタイルを指定できるようにします。ただし、アクセシビリティの観点から、本文中のリンクには必ず視覚的な区別（色の変更や下線）を別途付けてください。

完成コード——ミニマル自作リセットCSS

ここまでの7つの指定をまとめると、以下のようになります。ファイル名は reset.css として保存してください。

/* ========================================
   My Reset CSS
   ======================================== */

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

body,
h1, h2, h3, h4, h5, h6,
p,
ul, ol,
figure,
blockquote {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

ul, ol {
  padding: 0;
  list-style: none;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

わずか30行程度ですが、実際のWebサイト制作で困らないレベルのリセットが揃っています。これをベースに、プロジェクトごとに必要な指定を追加・削除して育てていきましょう。

GitHubにpushする

作ったリセットCSSをGitHubにアップロードすると、jsDelivr経由でCDNとして配信できるようになります。以下の手順で進めてください。

ステップ1：GitHubでリポジトリを作成

1. GitHubにログインし、右上の「+」→「New repository」をクリック
2. Repository nameに my-reset-css（好きな名前でOK）を入力
3. Publicを選択（jsDelivrで配信するにはPublicリポジトリが必要）
4. 「Add a README file」にチェック
5. 「Create repository」をクリック

ステップ2：reset.cssをアップロード

Gitに慣れている方はターミナルからpushしてください。ここではブラウザだけでできる方法を紹介します。

1. 作成したリポジトリのページで「Add file」→「Create new file」をクリック
2. ファイル名に reset.css と入力
3. エディタに先ほど作成したリセットCSSのコードを貼り付け
4. 下部の「Commit changes」で「Commit directly to the main branch」を選択してコミット

ターミナルからpushする場合は以下のコマンドです。

git init my-reset-css
cd my-reset-css
# reset.cssをこのフォルダに作成済みとして
git add reset.css
git commit -m "Add reset.css"
git remote add origin https://github.com/あなたのユーザー名/my-reset-css.git
git branch -M main
git push -u origin main

ステップ3：バージョンタグをつける

jsDelivrではバージョンを指定してファイルを配信できます。タグをつけておくと、特定バージョンを固定して読み込めるようになります。

ブラウザからの場合：

1. リポジトリページの右サイドバー「Releases」→「Create a new release」
2. 「Choose a tag」に v1.0.0 と入力し「Create new tag」
3. Release titleに v1.0.0 と入力
4. 「Publish release」をクリック

ターミナルからの場合：

git tag v1.0.0
git push origin v1.0.0

jsDelivr CDNで読み込む

jsDelivrは、GitHubリポジトリのファイルをCDN経由で配信してくれる無料サービスです。npmパッケージとして公開しなくても、GitHubにpushするだけでCDN URLが使えます。

CDN URLの構造

https://cdn.jsdelivr.net/gh/ユーザー名/リポジトリ名@バージョン/ファイルパス

例えば、GitHubユーザー名が tanaka、リポジトリが my-reset-css、タグが v1.0.0 の場合：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tanaka/my-reset-css@v1.0.0/reset.css">

このURLをHTMLの <head> 内に書くだけで、自作リセットCSSが読み込まれます。

バージョン指定のパターン

本番環境ではバージョン固定（@v1.0.0）を使いましょう。開発中は @main で最新を追いかけると便利です。

動作確認——実際に使ってみる

CDN URLが手に入ったら、実際のHTMLファイルで試してみましょう。ブラウザのコーディング環境を使えば、ファイルを作らずにすぐ試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 自作リセットCSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/あなたのユーザー名/my-reset-css@v1.0.0/reset.css">
  <title>リセットCSS動作確認</title>
</head>
<body>
  <h1>見出し1</h1>
  <p>段落テキスト。marginがリセットされているか確認。</p>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
  </ul>
  <img src="https://via.placeholder.com/800x400" alt="テスト画像">
  <button>ボタン（フォント継承の確認）</button>
</body>
</html>

確認するポイントは以下の4つです。

• h1やpの上下に余白がないこと（marginリセット）
• リストにbullet（・）がないこと（list-styleリセット）
• 画像が親要素の幅を超えないこと（max-width: 100%）
• ボタンのフォントがbodyと同じであること（font: inherit）

カスタマイズのヒント

ベースのリセットCSSを作ったら、プロジェクトに合わせて拡張していきましょう。以下はよく追加される指定です。

/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

/* テキストの折り返し改善 */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* テーブルのボーダー統合 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* アニメーション無効化（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

リセットCSSに何を含めるかに正解はありません。大切なのは「なぜこの指定が必要か」を自分の言葉で説明できることです。追加するたびにGitHubにpushしてバージョンタグを更新すれば、CDN経由で常に最新版が使えます。

よくある質問

Q. 自作リセットCSSは実務でも使えますか？

個人プロジェクトや小規模サイトでは十分に使えます。チーム開発では、メンバー全員がリセット内容を理解・合意している必要があるため、destyle.cssやNormalize.cssなどの定番ライブラリの方が運用しやすいケースが多いです。

Q. jsDelivrは無料で使えますか？

はい、jsDelivrはオープンソースプロジェクト向けの無料CDNです。GitHubのPublicリポジトリであれば、登録不要・設定不要で使えます。商用プロジェクトでの利用も無料です。

Q. GitHubのリポジトリをPrivateにしてもCDNで使えますか？

いいえ、jsDelivrはPublicリポジトリのファイルのみ配信します。Privateリポジトリのファイルをcssとして読み込みたい場合は、ビルドツールでバンドルするか、ファイルを直接プロジェクトにコピーしてください。

Q. リセットCSSとNormalize CSSの違いは？

リセットCSSはブラウザのデフォルトスタイルをすべて取り除くアプローチです。Normalize CSSはデフォルトスタイルを残しつつ、ブラウザ間の差異だけを統一するアプローチです。自作する場合はどちらの方針で作るかを最初に決めておくと、指定がブレにくくなります。詳しくはリセットCSSおすすめ5選比較で解説しています。

Q. @layerを使ったリセットCSSの読み込み方法は？

CSSカスケードレイヤー（@layer）を使うと、リセットCSSの優先順位を明確にコントロールできます。@layer reset { ... } でリセットを囲み、@layer reset, components, utilities; のようにレイヤー順序を宣言します。これにより、リセットのスタイルがコンポーネントのスタイルを意図せず上書きする問題を防げます。

まとめ

自作リセットCSSは、CSSの基礎を理解するための最良の教材のひとつです。box-sizing、margin、list-style、画像のレスポンシブ対応、フォーム要素のフォント継承——ひとつひとつの指定を自分で書いてみることで、「なぜ定番のリセットCSSにこの記述があるのか」が分かるようになります。

作ったリセットCSSをGitHubにpushしてjsDelivr CDNで配信すれば、どのプロジェクトでもURLひとつで読み込めます。初めてのOSS公開体験にもなるので、ぜひ挑戦してみてください。

定番のリセットCSSライブラリと比較して選びたい方は、リセットCSSおすすめ5選比較【2026年】もあわせてご覧ください。また、CSSの実践力を上げたい方はCSS実装テクニック集や模写コーディング一覧で手を動かしてみましょう。