この記事は、リセットCSSを「コピペで使いたい人」向けの記事ですが、
Webに詳しくない事業者の方が「よく分からないまま使ってしまう」ことで
起きがちなトラブルを防ぐ目的でも書いています。
新人
Webデザイナー
指定してもないのにブラウザに余計な余白ができている
ホームページ制作を始めて間もない時に、こんな場面に遭遇したことがあると思います。
それは、各ブラウザがデフォルトで持っているCSSの指定の影響です。
また、それ知ってるよという人もいるかと思います。
原因をわからない人も、知ってるよって人も本記事でご紹介する新しいリセットCSSを使い、原因の解消または、リセットCSSを新しいものにしませんか？
リセットCSS（reset.css）
下記CSSをコピペし、お使いのエディタに貼り付けてreset.cssを作成し、これから新規で作成するホームページで読み込ませてください。
reset.css
/* ============================================================
1. ドキュメント・ルート
============================================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
min-width: 0;
border: 0;
box-sizing: border-box;
}
: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;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
min-height: 100%;
line-height: 1.5;
font-family:
"Noto Sans JP",
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
"Yu Gothic",
YuGothic,
Meiryo,
sans-serif;
-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;
}
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;
}
/* ============================================================
3. リスト
============================================================ */
ol,
ul,
menu {
list-style: none;
}
/* ============================================================
4. インライン・テキスト
============================================================ */
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
b,
strong {
font-weight: bolder;
}
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 {
background: transparent;
color: inherit;
}
del,
ins {
text-decoration: none;
}
/* ============================================================
5. リンク
============================================================ */
a {
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
/* ============================================================
6. メディア・埋め込み要素
============================================================ */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object,
picture {
display: block;
max-width: 100%;
height: auto;
}
img {
border-style: none;
font-style: italic;
}
video {
object-fit: cover;
}
svg {
overflow: visible;
fill: currentColor;
}
iframe {
border: 0;
}
/* ============================================================
7. フォーム要素
============================================================ */
input,
button,
textarea,
select,
optgroup {
font: inherit;
color: inherit;
background: transparent;
border-radius: 0;
appearance: none;
-webkit-appearance: none;
}
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;
}
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;
}
input[type="checkbox"],
input[type="radio"] {
width: auto;
height: auto;
}
textarea {
resize: vertical;
vertical-align: top;
}
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;
}
/* ============================================================
8. テーブル
============================================================ */
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th {
font-weight: inherit;
text-align: left;
}
td,
th {
vertical-align: top;
}
/* ============================================================
9. インタラクティブ要素
============================================================ */
details {
display: block;
}
summary {
display: list-item;
cursor: pointer;
}
details > summary::-webkit-details-marker {
display: none;
}
/* dialog 要素 */
dialog {
display: block;
width: -moz-fit-content;
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;
}
/* ============================================================
10. アクセシビリティ
============================================================ */
/* フォーカスのデフォルトアウトラインを排除し、キーボード時のみ表示 */
*: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] {
pointer-events: none;
user-select: none;
}
[aria-disabled="true"] {
cursor: not-allowed;
pointer-events: none;
}
/* ============================================================
11. モーション・アニメーション
============================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::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;
}
}
/* ============================================================
12. View Transitions API（2026 標準対応）
============================================================ */
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
/* ============================================================
13. プリント
============================================================ */
@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をそのままコピペして使っていただいてもいいですが、これから制作するホームページに合わせて、記述を追加したり削除して使ってください。
2020年現在、このreset.cssで問題ないかと思いますが、この先新たなプロパティなど追加された場合、レイアウトが崩れる可能性もありますので、本サイトでも随時見直しを行い、最適なreset.cssを提供できるよう管理していきます。
CSSでおすすめの本
