みなさんこんにちは！おさかなです！
今回は「【CSS】デザイン崩れを防ぐ？！「リセットCSS」の使い方をわかりやすく解説！」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・ブラウザごとのデザイン崩れにお悩みの方
・CSSのデフォルト設定をなくしたい方
・HTML/CSSを学習中の方
リセットCSSとは？
ナビまる！！！助けてえええ😭
せっかくCSS書いたのに！ブラウザによって表示が違うよ～！
も～う！しょうがないなあ…。必殺リセットCSSを使うぞ！
なに？？リセットCSS？
実はそれぞれのブラウザには、デフォルトでCSSの値が指定されています。そのため、ブラウザを変えて表示するとCSSのデザイン崩れが起こってしまうのです😭
(なんだってー！？)
そこでリセットCSSの登場です！
リセットCSSとは、ブラウザに元々指定されているCSSを一旦「リセット」することで、デザイン崩れを予防する効果があります！(すごい✨)
参考にした書籍：1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
読み込んでみよう！
それでは、早速準備をしていきましょう！
(実は自分でも作れるのですが…)今回はGithubで公開されている「ress.css」というファイルを使用します。
まずは、上記のサイトにアクセスします！(よく見るGithubのリポジトリですね☆)
スクロールしていくと「CDN」という項目を発見できると思います。
CDNの中の「unpkg」にあるリンクをコピーします！
次にHTMLファイルの<head>内に、<link>タグとして貼り付けます。
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
さあ！これで準備は完了です！(おつかれさまでした☕)
最後にCSSがリセットされているか、チェックしていきましょう！
表示チェック！
それでは、リセットCSSの効果をチェックしてみましょう！
↓これが普通の状態
↓これがリセットCSS適用後です。不要な余白がなくなってます！(やった～！)
これで全ての設定は完了です！(いえ～い！)
おつかれさまでした☕
いかがだったでしょうか？
おさかなびではプログラミング学習中の人や、IT初心者に向けて「デジタル時代を楽しむためのミニ知識」をご紹介しています！
ぜひ他のページも覗いてみてください…！
それでは今回はこの辺で！
ここまで読んでくださり、ありがとうございました！
おさかなでした！
