HTML内の構造
ヘッダー内
修正版の順番例 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CS</title> <!-- ? リセットCSSを最初に --> <link rel="stylesheet" href="./reset.css"> <!-- ? Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet"> <!-- ? sanitize.css(リセットに少し上書き) --> <link rel="stylesheet" href="https://unpkg.com/sanitize.css"> <!-- ? 独自スタイル(最優先で上書き可能) --> <link rel="stylesheet" href="./style.css"></head>
CSSリセット(CSS Reset)で過去のCSSの影響を受けずに、新たなファイルで実行する
reset.css は、全てのブラウザのデフォルトスタイルを強制的に「ゼロ(初期化)」に近づけることを目的としたスタイルシートです。装飾なども完全に消えるため、自分で全部スタイルを書く必要あり
CSSノーマライズ(CSS Normalization)・サニタイズCSS / Sanitize.cssこれらとは違います
? 実例reset.css(外部ファイル)、このページではstyleタグ内に記述/* Eric Meyer's Reset CSS v2.0 - http://meyerweb.com/eric/tools/css/reset/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }