記事を検索

Reset CSS

まずは 個人的に採用している Reset CSS について紹介します。

@layer reset {
*,
::before,
::after {
box-sizing: border-box;
}
* {
margin: 0;
}
/* ------------------------------------------------------------
Texts
------------------------------------------------------------ */
/* テキストのオーバーフローを回避 */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/* ルビサイズのブラウザ差異をなくす */
rt {
font-size: 50%;
}
/* ------------------------------------------------------------
Medias
------------------------------------------------------------ */
/* 親要素をはみ出さないようにする */
img,
video {
max-inline-size: 100%;
block-size: auto;
}
/* 隙間ができるのを防ぐ。( display はいじらない。) */
svg,
img,
video,
audio {
vertical-align: middle;
}
/* iframe は display block */
iframe {
display: block;
border: none;
}
/* ------------------------------------------------------------
Form fields
- 基本要素のフォントとカラーをリセット
- テキストエリアの水平リサイズを無効に
- カーソルのセット
------------------------------------------------------------ */
input,
button,
textarea,
select {
font: inherit;
color: inherit;
text-transform: none;
}
/* テキストエリアの水平リサイズを無効に */
textarea {
resize: vertical;
}
/* ------------------------------------------------------------
cursor 初期セット
------------------------------------------------------------ */
button,
label,
select,
summary,
[type='radio'],
[type='checkbox'] {
cursor: pointer;
}
:disabled {
cursor: not-allowed;
}
}

できるだけブラウザの標準スタイルに従うようにし、非常にシンプルで必要最低限なコードに抑えています。
また、@layerを使って優先度を低くしています。

padding0にリセットせず、ブラウザ標準スタイルのままにしているのが少し珍しいかもしれません。

この reset.css を読み込む方法

このReset CSSは Lism CSS でも採用しています。(layer名だけ異なります)

reset.cssだけを導入することもできるようにしているので、もしよければご活用ください。

<link href="https://cdn.jsdelivr.net/npm/lism-css/dist/css/reset.css" rel="stylesheet" />

当サイトのデモページでも読み込んでいます。

当サイトで紹介するTipsや実装例では、実際の表示が確認できるようにプレビューページを記載しているものが多くなります。

そのプレビューページでも共通して読み込んでいるため、手元で動作確認するためにコードをコピペして試す際には、このReset CSSも読み込むようにしてください。