📑

リセットCSS

2023/11/27に公開

CSS

※Windowsを使用しています

https://youtu.be/BrfUMagoulI

リセットCSSとは

ブラウザごとでデフォルトで持っているCSSを上書きして差異をなくすためのもの

Chrome, Opera→Chromium UA stylesheet
Firefox→Mozilla UA stylesheet
Safari→WebKit UA stylesheet

例えば以下をリセットCSSを使用しないで記述

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>DISCOVER TRAVEL株式会社</title>
</head>

<body>
  <div id="wrap">
    <header>
      <h1>
        DISCOVER TRAVEL
      </h1>
      <p>練習用の架空のサイトです</p>
      <nav>
        <ul>
          <li><a href="index.html">ホーム</a></li>
          <li><a href="#">オススメ</a></li>
        </ul>
      </nav>
      <img src="image/top.jpg" alt="チェスキークルムロフ" class="top_image" />
    </header>
    <main>
      <article>
        <h2>新着情報</h2>
        <dl>
          <dt>2018年10月14日</dt>
          <dd>エールフランス、ルフトハンザ航空のヨーロッパ行きが最大10,000円キャッシュバック！</dd>
        </dl>
      </article>
      <section>
        <h2>お問い合わせ</h2>
        <form method="post" action="">
          <table>
            <tr>
              <th>お名前(必須)</th>
              <td><input type="text" name="name" plaaceholder="山田太郎" /></td>
            </tr>
            <tr>
              <th>お問い合わせ内容(必須)</th>
              <td><textarea name="inquiry" rows="5" cols="40"></textarea></td>
            </tr>
          </table>
          <p class="btn">
            <input type="submit" value="送信する" />
          </p>
        </form>
      </section>
    </main>
    <footer>
      <p>
        <small>Copyright &copy; 2018 DISCOVER TRAVEL, Inc. All Rights Reserved. </small>
      </p>
    </footer>
  </div>
</body>
</html>

Google Chromeで表示した場合

FireFoxで表示した場合

リセットCSSの適用の仕方

linkタグのhref属性にURLを記述(CDNと呼ばれる)
ファイルをWebサイトなどからダウンロード、もしくは任意の名前でCSSファイルを作成し、コードをコピーして貼り付け、HTMLに読み込む記述をする
CSSの読み込みの記述の一番最初に記述し、その次に適用したい自作のCSSを記述する

■記述例

<!-- リセットCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
<!-- 適用したい自作のCSS -->
<link rel="stylesheet" href="style.css">

主なリセットCSSの種類

destyle.css

2019年公開
ほぼ全てのスタイルがリセットされているので1からCSSを書きたい方向け
＜dt＞、＜th＞は太字になっている
テキストボックスの枠が表示されていないので自分で記述する必要がある

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">

Google Chromeでの表示

The New CSS Reset

2021年公開
displayプロパティ以外の全てのCSSプロパティの値がリセットされているので1からCSSを書きたい方向け
テキストボックスの枠が表示されていないので自分で記述する必要がある

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/the-new-css-reset@1.11.2/css/reset.min.css">

Google Chromeでの表示

Normalize.css

2012年公開
ブラウザのデフォルト設定を活かしているCSSとして登場した

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">

Google Chromeでの表示

sanitize.css

2015年公開
ブラウザのデフォルト設定を活かしているCSS
ノーマライズをレスポンシブデザインに対応させたCSS
box-sizing: border-box;(paddingとborderを要素のwidthとheightに含む)を定義
navタグの中にあるul、olタグに対してリストマーカーが非表示になる

<link rel="stylesheet" href="https://cdn.skypack.dev/sanitize.css">

Google Chromeでの表示

A Modern CSS Reset

2019年公開
ブラウザのデフォルト設定を活かしているCSS
全ての要素と疑似要素にbox-sizing: border-box;(paddingとborderを要素のwidthとheightに含む)を定義
bodyやhなどの見出しタグ、pやfigureなどに対してmargin:0の設定がある

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

Google Chromeでの表示

※2023年に「A (more) Modern CSS Reset」が登場している(CDNはなし)
古いリセットCSSからはもう卒業！モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset

どれを使えば良いのか

個人的には、以下を考慮すると良いのではないかと思いました

1からCSSを書くのか、ブラウザのデフォルト設定を活かすのか
リセットCSSのコードを読んで自分が管理できるもの
自分がWebサイトを作る上でよく使うリセットの設定が記述してあるもの
納期などWebサイト作成に費やせる時間など

本格的なWEBサイトを作ったことのないあなた！作ってみませんか？

Udemyで講座を公開中！

リセットCSSとは

Google Chromeで表示した場合

FireFoxで表示した場合

リセットCSSの適用の仕方

主なリセットCSSの種類

destyle.css

The New CSS Reset

Normalize.css

sanitize.css

A Modern CSS Reset

どれを使えば良いのか

Discussion