CONTENTS
  1. HOME
  2. Web開発
  3. Reset CSSとは？Webデザインを始めるなら必ず押さえておきたい初期化スタイル+モダンCSS

Reset CSSとは？Webデザインを始めるなら必ず押さえておきたい初期化スタイル+モダンCSS

Web開発
Reset CSSとは？Webデザインを始めるなら必ず押さえておきたい初期化スタイル+モダンCSS

Webサイトをコーディングしていて、「ブラウザによって少し見た目が違うな…？」と感じたことはありませんか？
実はそれ、ブラウザごとに設定されている「初期スタイル（User Agent Stylesheet）」が原因です。

この差をなくし、すべてのブラウザで同じ状態からデザインを始めるために使うのが「Reset CSS（リセットCSS）」です。

リセットCSSの役割・仕組み・具体的なコード例を、初心者にも分かりやすく解説します。
また、授業や個人制作でそのまま使える「WebTraining版 Reset CSS」も紹介します。

Contents

Reset CSSとは？

Reset CSSとは、ブラウザが自動的に設定しているスタイル（余白・文字サイズなど）を一度リセット（初期化）するCSSのことです。

ブラウザはHTMLを表示するとき、自動的に以下のようなスタイルを適用しています。

  • <h1> は大きめの太字
  • <ul> には左の余白（インデント）
  • <p> には上下の余白（margin）

これらはありがたい反面、ブラウザごとに微妙に違うという問題があります。
たとえばChromeとSafari、Firefoxで <h1> の大きさがわずかに異なる、といった現象です。

Reset CSSを最初に読み込むことで、こうした差をすべてゼロにし、デザインを統一した状態からスタートできるようになります。

Normalize.cssとの違い

よく混同されるのが「Normalize.css」です。
どちらも初期スタイルを整える目的がありますが、次のような違いがあります。

項目Reset.cssNormalize.css
目的すべての要素をリセット（ゼロから）各ブラウザの差を調整（整える）
メリット完全に白紙状態でデザイン可能既存の自然な見た目を保ちながら調整
向いているケースLP・オリジナルデザイン制作CMSテーマ開発やUIデザインなど

つまり、「1からデザインを作りたい人はReset.css、自然な見た目を活かしたい人はNormalize.css」と覚えておくとよいでしょう。

Normalize.cssのダウンロードはこちらから

Reset CSSの基本構文

まずは最低限のリセットから始めましょう。
以下のコードを reset.css として保存し、HTMLの最初に読み込みます。

/* reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
ul, ol {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}

これだけでも、余白のズレ・画像の伸び・リンクの下線などが統一され、快適にコーディングできます。

よく使う初期化（見出し・段落・ボタンなど）

デザイン演習では <h1> や <p> に自動的に入る余白を消すことが多いです。
加えて、ボタンやフォームなどのブラウザ差もなくしておくと便利です。

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  font-weight: normal;
}
button {
  cursor: pointer;
  border: none;
  background: none;
}
input, textarea, select, button {
  font: inherit;
  color: inherit;
}

これで、文字の大きさやフォント、余白などが統一されます。

WebTrainingおすすめ：Reset CSS（実践版）

ここでは、授業や講座でそのまま使える「WebTraining推奨リセットCSS」を紹介します。
HTML/CSS演習、Figma→コーディング課題、WordPressテーマ制作などに共通して使えます。

/* ========================================
   WebTraining Reset CSS
   version 1.1 (2025)
   対応: PC16px / SP14px + root変数設定
======================================== */

:root {
  --color-text: #333;
  --color-bg: #fff;
  --font-base: "Noto Sans JP", sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.7;
}

html {
  font-size: 100%; /* PCでは16pxを基準に */
  line-height: var(--line-height-base);
  -webkit-text-size-adjust: 100%; /* スマホでの文字サイズ自動拡大を防止 */
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  html {
    font-size: 87.5%; /* 約14px（16px × 0.875） */
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}

/* ボックスサイズと共通リセット */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 見出し・段落 */
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  font-weight: normal;
}

/* リスト */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 画像・メディア */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  display: block;
}

/* リンク */
a {
  color: inherit;
  text-decoration: none;
}

/* ボタン */
button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

/* テーブル */
table {
  border-collapse: collapse;
}

/* フォーム系 */
input, textarea, select {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

/* フォーカス見た目（教育用に残しておくと◎） */
:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

このリセットCSSは、「見た目を完全にリセットしつつ、日本語フォント環境に最適化」しています。
font-family に "Noto Sans JP" を指定しているため、Google Fonts経由での利用にも適しています。

  • :root に変数を集約しておくことで、後からテーマ変更（例：ダークテーマ／ブランドカラー対応）が容易。
  • font-size: 87.5% によるスマホ時の自動縮小。
  • text-rendering: optimizeSpeed; は描画性能を優先する設定で、Lighthouse評価にも有利。
  • focus-visible によるキーボード操作時のみのアウトライン表示はアクセシビリティ対策に効果的。

root:に関しては、下記のトレーニングを参考にしましょう

あわせて読みたい
画像にキャプションを重ねよう（Gridとアニメーション） figure + figcaption で、画像にキャプションを重ねて表示 GridやFlexを使ってレイアウトを統一させる ::before / ::after を使って見出...

発展編：2025年版 モダンReset CSS

近年は、prefers-color-scheme（ダークモード対応）を活用したモダンReset CSSも主流になっています。

/* ========================================
   2025年版モダンリセットCSS
   WebTraining.jp Recommended
======================================== */

:root {
  /* カラー変数 */
  --color-text: #333;
  --color-bg: #fff;
  --color-link: #005fcc;
  --color-link-hover: #004bb5;
  --color-focus: #005fcc;
  --color-focus-visible: #ffcc00;

  /* フォント・サイズ変数 */
  --font-family: "Noto Sans JP", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --spacing-unit: 1rem;
}

/* ========================================
   基本リセット
======================================== */
html, body, h1, h2, h3, h4, h5, h6, p,
ul, ol, li, figure, blockquote, table, th, td {
  margin: 0;
  padding: 0;
}

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

/* ========================================
   HTML・BODY設定
======================================== */
html {
  font-size: 100%; /* 基本16px */
  line-height: var(--line-height-base);
  -webkit-text-size-adjust: 100%; /* モバイル文字サイズ自動調整防止 */
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  html {
    font-size: 87.5%; /* 約14px */
  }
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/* ========================================
   メディア要素
======================================== */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
video{
filter: drop-shadow(0px 0px #fff);
}
/* ========================================
   テキスト要素
======================================== */
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a:hover {
  color: var(--color-link-hover);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

/* ========================================
   リスト・ナビゲーション
======================================== */
ul, ol, nav ul, nav ol {
  list-style: none;
}

/* ========================================
   フォーム系要素
======================================== */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

textarea {
  resize: none;
}

::placeholder {
  color: #aaa;
  opacity: 1;
}

/* ========================================
   テーブル
======================================== */
table {
  border-collapse: collapse;
  width: 100%;
}

/* ========================================
   フォーカス表示（アクセシビリティ対応）
======================================== */
:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--color-focus-visible);
  outline-offset: 3px;
}

/* ========================================
   ダークモード対応
======================================== */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }

  a {
    color: #90caf9;
  }

  a:hover {
    color: #64b5f6;
  }

  ::placeholder {
    color: #666;
  }
}

このモダンCSSでは、

  • CSS変数でテーマカラー・フォントを一元管理
  • scroll-behavior: smooth; でなめらかなスクロール
  • prefers-color-scheme: dark; によるダークモード対応　など、現代的なサイト設計に必要な初期設定をすべて網羅しています。

Reset CSSの読み込み方法

リセットCSSは、HTMLの <head> の中で 最初に読み込む のが基本です。

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

最初にReset CSSでスタイルを統一し、
その後に style.css でデザインを上書きしていくイメージです。

Reset CSSでデザインの「土台」を整える

Reset CSSは「デザインをきれいにするCSS」ではなく、「デザインを始めるための土台を整えるCSS」です。

  • 各ブラウザのズレをなくす
  • 意図しない余白や文字サイズの違いを防ぐ
  • すべてのデバイスで統一された見た目を実現

Web制作の最初に毎回入れておくことで、デザインの再現性と保守性が格段に向上します。
WebTrainingでは、どの演習でもまずこのReset CSSからスタートするのがおすすめです。
(Webトレーニングでは、簡易版を使っています）

Web開発
  • URLをコピーしました！
Contents