【CSS】デザイン崩れを防ぐ?!「リセットCSS」の使い方をわかりやすく解説!

HTML/CSS

みなさんこんにちは!おさかなです!

今回は「【CSS】デザイン崩れを防ぐ?!「リセットCSS」の使い方をわかりやすく解説!」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・ブラウザごとのデザイン崩れにお悩みの方
・CSSのデフォルト設定をなくしたい方
・HTML/CSSを学習中の方

リセットCSSとは?

おさかな
おさかな

ナビまる!!!助けてえええ😭
せっかくCSS書いたのに!ブラウザによって表示が違うよ~!

ナビまる
ナビまる

も~う!しょうがないなあ…。必殺リセットCSSを使うぞ!

おさかな
おさかな

なに??リセットCSS?

実はそれぞれのブラウザには、デフォルトでCSSの値が指定されています。そのため、ブラウザを変えて表示するとCSSのデザイン崩れが起こってしまうのです😭
(なんだってー!?)

 

そこでリセットCSSの登場です!
リセットCSSとは、ブラウザに元々指定されているCSSを一旦「リセット」することで、デザイン崩れを予防する効果があります!(すごい✨)

 

参考にした書籍:1冊ですべて身につくHTML & CSSとWebデザイン入門講座

読み込んでみよう!

それでは、早速準備をしていきましょう!
(実は自分でも作れるのですが…)今回はGithubで公開されている「ress.css」というファイルを使用します。

filipelinhares/ress
🚿 A modern CSS reset. Contribute to filipelinhares/ress development by creating an account on GitHub.

まずは、上記のサイトにアクセスします!(よく見るGithubのリポジトリですね☆)

スクロールしていくと「CDN」という項目を発見できると思います。

CDNの中の「unpkg」にあるリンクをコピーします!

 

次にHTMLファイルの<head>内に、<link>タグとして貼り付けます。

このとき必ずCSSファイルを読み込む前に、リセットCSSを読み込んでください!
↓念のため<link>タグも載せておきます~♪
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">

 

さあ!これで準備は完了です!(おつかれさまでした☕)
最後にCSSがリセットされているか、チェックしていきましょう!

表示チェック!

それでは、リセットCSSの効果をチェックしてみましょう!

↓これが普通の状態

 

↓これがリセットCSS適用後です。不要な余白がなくなってます!(やった~!)

これで全ての設定は完了です!(いえ~い!)
おつかれさまでした☕

 

いかがだったでしょうか?

おさかなびではプログラミング学習中の人や、IT初心者に向けて「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

この記事は役に立ちましたか?

タイトルとURLをコピーしました