この記事は、リセットCSSを「コピペで使いたい人」向けの記事ですが、
Webに詳しくない事業者の方が「よく分からないまま使ってしまう」ことで
起きがちなトラブルを防ぐ目的でも書いています。
新人
Webデザイナー
指定してもないのにブラウザに余計な余白ができている
ホームページ制作を始めて間もない時に、こんな場面に遭遇したことがあると思います。
それは、各ブラウザがデフォルトで持っているCSSの指定の影響です。
また、それ知ってるよという人もいるかと思います。
原因をわからない人も、知ってるよって人も本記事でご紹介する新しいリセットCSSを使い、原因の解消または、リセットCSSを新しいものにしませんか？
リセットCSS（reset.css）
下記CSSをコピペし、お使いのエディタに貼り付けてreset.cssを作成し、これから新規で作成するホームページで読み込ませてください。
reset.css
/*
* ============================================================
* Reset CSS 2026 — Integrated & Optimized
* 対応: Chrome / Edge / Firefox / Safari / Samsung Browser
* iOS Safari / Android Chrome / Opera / Arc
* ============================================================
*/
/* ============================================================
1. ドキュメント・ルート
============================================================ */
/*
* 全要素の余白・ボーダーを除去。
* min-width: 0 はフレックス・グリッド子要素の意図しないはみ出しを防ぐ。
*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
min-width: 0;
border: 0;
box-sizing: border-box;
}
/*
* color-scheme: ブラウザUIをダーク/ライトに自動追従。
* text-size-adjust: モバイル横向き時の自動フォント拡大を抑制。
* hanging-punctuation: 日本語の約物（句読点など）を行頭・行末でぶら下げ処理。
*/
:root {
color-scheme: light dark;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
tab-size: 2;
hanging-punctuation: first last;
}
html {
height: 100%;
scroll-behavior: smooth;
overflow-wrap: break-word;
word-break: normal;
}
body {
min-height: 100%;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed;
}
/* ============================================================
2. セマンティック要素
============================================================ */
/*
* 旧ブラウザ向けにセマンティック要素をブロックとして明示。
* モダンブラウザでは不要だが、一部の組み込みブラウザで有効。
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/* ============================================================
3. ブロック要素
============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
p,
blockquote,
dl,
dd,
figure {
display: block;
}
/*
* 引用符をブラウザデフォルトから除去。
*/
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: none;
}
hr {
height: 0;
border-top: 1px solid currentColor;
color: inherit;
overflow: visible;
}
/* ============================================================
4. インライン・テキスト
============================================================ */
/*
* 旧来の装飾タグ・セマンティックタグのスタイルをリセット。
* デザインシステム側でスタイルを明示的に付与できる状態にする。
*/
address,
cite,
dfn,
em,
var,
i,
b,
strong {
font-style: normal;
font-weight: inherit;
}
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
* mark はブラウザデフォルトの黄色背景を除去。
* スタイルはプロジェクト側で定義する。
*/
mark {
background: transparent;
color: inherit;
}
del,
ins {
text-decoration: none;
}
/* ============================================================
5. リンク
============================================================ */
/*
* color: inherit により親のテキスト色を継承。
* -webkit-tap-highlight-color: モバイルタップ時のフラッシュを除去。
*/
a {
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
/* ============================================================
6. メディア・埋め込み要素
============================================================ */
/*
* display: block によりインライン隙間を除去。
* max-width: 100% でコンテナからのはみ出しを防止。
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object,
picture {
display: block;
max-width: 100%;
height: auto;
}
/*
* border-style: none は IE向けの名残だが、互換性のため残す。
* font-style: italic は alt テキストをイタリック表示にする（アクセシビリティ補助）。
* ※ display: block 指定済みのため vertical-align は不要。
*/
img {
border-style: none;
font-style: italic;
}
video {
object-fit: cover;
}
/*
* fill: currentColor により、SVGの色を親要素の color に連動させる。
*/
svg {
overflow: visible;
fill: currentColor;
}
iframe {
border: 0;
}
/* ============================================================
7. リスト
============================================================ */
ol,
ul,
menu {
list-style: none;
}
/* ============================================================
8. フォーム要素
============================================================ */
/*
* font: inherit によりフォントプロパティをすべて親から継承。
* appearance: none でOSネイティブUIを除去し、クロスブラウザで統一。
*/
input,
button,
textarea,
select,
optgroup {
font: inherit;
color: inherit;
background: transparent;
border-radius: 0;
appearance: none;
-webkit-appearance: none;
}
/*
* iOS Safari は 16px 未満のフォントサイズでフォーカス時にズームが発生する。
* フォーム要素に 16px を明示することで防止する。
*/
input,
textarea,
select {
font-size: 16px;
}
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
cursor: not-allowed;
pointer-events: none;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea {
width: 100%;
outline: none;
}
/*
* Firefox の number 入力のスピンボタンを除去。
*/
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* checkbox / radio は width を auto にして
* 全称セレクタの min-width: 0 の影響を回避。
*/
input[type="checkbox"],
input[type="radio"] {
width: auto;
height: auto;
}
/*
* resize: vertical により、縦方向のリサイズのみ許可。
* vertical-align: top でインライン配置時のずれを防止。
*/
textarea {
resize: vertical;
vertical-align: top;
}
/*
* IE の select の矢印を非表示にする。
*/
select::-ms-expand {
display: none;
}
fieldset {
border: 0;
}
legend {
padding: 0;
}
label {
cursor: pointer;
}
progress {
vertical-align: baseline;
}
[type="file"]::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
/* ============================================================
9. テーブル
============================================================ */
/*
* font-family: inherit はブラウザが table のフォントを継承しない問題への対応。
*/
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-family: inherit;
}
th {
font-weight: inherit;
text-align: left;
}
td,
th {
vertical-align: top;
}
/* ============================================================
10. インタラクティブ要素
============================================================ */
summary {
display: list-item;
cursor: pointer;
}
details > summary::-webkit-details-marker {
display: none;
}
/*
* dialog 要素のブラウザデフォルトスタイルを除去。
* 表示・非表示制御は open 属性または JS で行う。
*/
dialog {
display: block;
width: fit-content;
max-width: calc(100% - 6px);
max-height: calc(100% - 6px);
color: inherit;
background: transparent;
overflow: auto;
}
dialog:not([open]) {
display: none;
}
dialog::backdrop {
background: transparent;
}
/* ============================================================
11. アクセシビリティ
============================================================ */
/*
* マウス操作時はアウトラインを非表示にし、
* キーボード操作時のみ focus-visible で表示する。
*/
*:focus {
outline: none;
}
*:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
/*
* スクリーンリーダー専用テキスト。
* 視覚的には非表示だが、支援技術からは読み取れる状態を維持する。
*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
[hidden] {
display: none !important;
}
[disabled] {
pointer-events: none;
}
/*
* inert 属性: フォーカス・クリック・支援技術からも除外する。
*/
[inert] {
pointer-events: none;
user-select: none;
}
[aria-disabled="true"] {
cursor: not-allowed;
pointer-events: none;
}
/* ============================================================
12. モーション・アニメーション
============================================================ */
/*
* prefers-reduced-motion: ユーザーがOSでアニメーション軽減を設定している場合、
* すべてのアニメーションとトランジションを即時完了させる。
* view-transition-name も無効化し、ページ遷移アニメーションも止める。
*/
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
view-transition-name: none !important;
}
}
/* ============================================================
13. View Transitions API（2026 標準対応）
============================================================ */
/*
* @view-transition: ページ間のトランジションをブラウザ標準で有効化。
* Chrome 111+ / Safari 18+ 対応。
* デフォルトアニメーションはプロジェクト側で定義するためここでリセット。
*/
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
/* ============================================================
14. プリント
============================================================ */
@media print {
*,
*::before,
*::after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
img {
page-break-inside: avoid;
}
@page {
margin: 2cm;
}
}
下記のように任意のフォルダに保存し、読み込ませてください。
<link href="css/reset.css"rel="stylesheet" type="text/css" >ここではcssフォルダの中にあるreset.cssを読み込ませるよう指定しています。
コピペでリセットCSSを作成しよう！まとめ
本記事で紹介したreset.cssをそのままコピペして使っていただいてもいいですが、これから制作するホームページに合わせて、記述を追加したり削除して使ってください。
2026年3月現在、このreset.cssで問題ないかと思いますが、この先新たなプロパティなど追加された場合、レイアウトが崩れる可能性もありますので、本サイトでも随時見直しを行い、最適なreset.cssを提供できるよう管理していきます。
CSSでおすすめの本
