0
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

リセットCSSとは、種類や使い方

Last updated at Posted at 2020-02-29

##リセットCSSとは
理解するために復習します
各ブラウザごとに(Google ChromeやSafariなど)固有のCSSをもっていて、自分で記述したCSSが本来とは違う表示になることです。(全体の横幅が大きくなったり、スペースが空いてしまったりなど)
##リセットCSSの種類(今回は2つのみ)
調べた中で使えそうなリセットCSSを載せておきます

HTML5 Doctor Reset CSS 2.0
sanitize.css```

HTML5 Doctor Reset CSS 2.0は初学者向きで、全ての余白が消えたり、文字サイズは全て統一され、文字の太さはリセットされないなどの特徴がある
[HTML5 Doctor Reset CSS 2.0](http://html5doctor.com/html-5-reset-stylesheet/)

sanitize.cssはブラウザ周りの余白はリセットし、見出しなどの要素の上下の余白はリセットはしない。また文字のサイズと太さはリセットしていなく、スマホなどのモバイルに対応しているなどの特徴がある
[sanitize.css](https://csstools.github.io/sanitize.css/)

調べた中で使えそうな2つを載せました。他にも種類があり、オリジナルでも作れます(まだ私には難しいので作れないですが、、、)
##リセットCSSの使い方
自身のスタイルシートの一番上に貼り付ける
リセットCSSとメインのスタイルシートは分けて管理する必要がある
つまり```app/assets/stylesheets/```の中にreset.scssのファイルを作ればいい

参考にした記事
https://web-camp.io/magazine/archives/30817

0
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?