【簡単】リセットCSSとは?【現役エンジニアが解説してみた】

「リセットCSSを使いたいけど、どれを使っていいかわからない、、。」

と考えている人に向けて、今回は僕が使っている「リセットCSS」について紹介していきます。

この記事を書いている僕は、現在フロントエンドの開発を行っています。

そして個人でも案件をこなしている。

なので、リセットCSSはしょっちゅう使用します。

リセットCSSを使うことで、かなり開発がスムーズにいくので、是非参考にしてください!

リセットCSSとは?

リセットCSSとは、「ブラウザがデフォルトで持っているCSSを消すCSS」のことを言います。

ブラウザ・・・WEBサイトを閲覧するためのソフトウェアでGoogle ChromeやSafari、Internet Explorerなど様々な種類のものがあります。

リセットCSSを使うと、どうなるのか?

リセットCSSを使うことで、h2やh3タグなどが持っているデフォルトのCSSを打ち消すことが出来ます。

つまりデフォルトのCSSを全て消し、フラットな状態からCSSのコーディングをすることができるので、かなり開発がしやすくなる!

言葉だけだと分かりにくいと思うので、具体例を使って説明していきます。

上記の画像は

このようにコーディングしています。

リセットCSSを使っていないので、<h2>タグがデフォルトで持っているCSSのスタイルが適応されています。

だから文字が大きかったり、変な余白が入っていますよね?

リセットCSSがないと、変な隙間が出来たり、開発しにくくなります。

そこでリセットCSSを適応してみます。

すると、先ほどまで<h2>タグはフォントが大きかったり、余白がありましたが、リセットCSSを使うことで無駄なCSSを排除することが出来ました!

かなりCSSがスッキリしましたね。

リセットCSSの紹介

次に僕が実際の開発で使っている「リセットCSS」の紹介します。

これからリセットCSSのコードについてコメントを入れながら解説していきます!

1〜21行目までの解説

22~25行目

対象要素を、全てブロック要素にします。

26~28行目

bodyの中にある要素は全て、「line-height: 1;」にする。

つまり「line-height」が文字の高さに揃います。

29~31行目

リストを表す時に使われる「olタグ」と「ulタグ」に対して、デフォルトでつく箇条書きの「・」を消す。

32~34行目

「」や『』などの引用符をデフォルトで表示しないようにします。

35~39行目

32~34行目の要素の「擬似クラス」に対しても引用符が付かないようにします。

40~43行目

「tableタグ」を使う際に、線の隙間をなしにします。

44~46行目

リンクを表示できる「aタグ」のデフォルトで表示されるアンダーラインを消します。

47~51行目

53~58行目

まとめ

以上が「リセットCSS」についての紹介でした。

リセットCSSは今回紹介したもの以外にもあります。

リセットCSSごとに特徴があるので、興味ある方は是非調べてみるといいですよ!

最後に参考記事を貼って終わりにします。

https://magazine.krowl.jp/3441/

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事