リセットCSSとは？ 使用する理由とメリットについて

リセットCSSがどのようなものかご存じでしょうか？

CSSにはデフォルトの値というものがあり、ブラウザ（chromeやsafari、edgeなど）で見え方が異なります。

リセットCSSを使用することにより、CSSのデフォルトの値を初期化することができます。

デフォルトの値があって何が悪いの？と疑問に思われる方もいらっしゃるかと思いますので、今回はリセットCSSについて解説いたします。

リセットCSSを使用する理由について

リセットCSSを使用しないことにより、想定しないスタイルが適用されるケースがあります。

<h1>h1タグです</h1>
<h2>h2タグです</h2>
<h3>h3タグです</h3>
<h4>h4タグです</h4>
<h5>h5タグです</h5>
<h6>h6タグです</h6>
<p>pタグです</p>
<a href="#">aタグです</a>
<ul>
  <li>ul-liタグです</li>
  <li>ul-liタグです</li>
  <li>ul-liタグです</li>
</ul>
<ol>
  <li>ol-liタグです</li>
  <li>ol-liタグです</li>
  <li>ol-liタグです</li>
</ol>

こちらはCSSを指定していない状態ですが、各タグで文字の大きさや、文字の下に余白が作成されております。

リストに関しては先頭に・がついていたり、番号がついていたりといった状態です。

リセットCSSを適用した場合の違い

リセットCSSを適用することによって、デフォルトのスタイルが初期化されるため、以下のような状態になります。

フォントサイズが統一され、余白も削除されております。

また、リストに関しては先頭の「・」や番号も消えております。

このように初期化をして、０からCSSを適用することで、想定外の動作や表示を防ぐことが可能です。

リセットCSSの適用方法

リセットCSSの適用

リセットCSSにはさまざまな種類がありますが、「これを使用しないといけない」といった決まりもありません。

私の場合は、destyle.cssを使用しております。

destyle.cssはダウンロード版とCDN版があり、容量も軽く使いやすいです。

destyle.cssの公式サイトはこちらから

CDN（Contents Delivery Network）とは、簡単に説明すると、インターネット上に保管されているファイルを読み込むことを指します。

適用方法はstyle.cssの記載方法と同じで、headタグの中にlinkタグで指定します。

<!-- ファイルをダウンロードして使用する場合 -->
<link rel="stylesheet" href="destyle.css">

<!-- CDNを使用する場合 -->
<link rel="stylesheet" href="https://unpkg.com/browse/destyle.css@4.0.0/destyle.min.css">

もしCSSの適用方法がわからないといった方は、下記記事にて解説しておりますので、ご参考にしていただければ幸いです。

あわせて読みたい

CSSはどうやって適用させる？基本的な適用方法について解説！ CSSを学習する際に、どうやってCSSを記載するんだろうと悩まれている方もいらっしゃるかと思います。そんな方に向けて、作成したHTMLファイルに対して、どのようにCSSを…

destyle.cssの特徴

Destyle.css 公式サイトより一部抜粋して引用しております。

適用する際の注意点

<!-- 良い例 -->  
<link rel="stylesheet" href="destyle.css">   <!-- 先に読み込む -->
<link rel="stylesheet" href="style.css">

実際に適用する場合は、こちらのように初期化用のCSSファイルを読み込んだ後に、style.cssを読み込みます。

<!-- 悪い例 -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="destyle.css">  <!-- この記載で初期化してしまう -->

これがもし上記のように逆転していた場合、style.cssに記載している内容が初期化され、うまく反映しなくなります。

これは上に記載しているものから順番に読み込まれるのが起因しています。

CSSに限った話ではないのですが、このように記載の順番によって想定している動作にならない場合があります。

もしCSSがぜんぜん反映しないな、といった場合は上記の可能性もありますので確認するようにしましょう。

さいごに

リセットCSSを使用することによって、想定外の表示を防ぐことができるため、Web制作の際には必ず使用します。

リセットCSSと検索すると、色々な種類のリセットCSSが表示されますが、その中でもdestyle.cssは使いやすくおすすめです。

Web制作を行われている方で、もしリセットCSSを使用されていない場合は、ぜひ使用してみてください！