2020.11.11

【簡単】リセット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/

 

 

 

 

 

CONTACT
RECRUIT

お仕事の依頼・ご相談は
こちらからお問い合わせください。

私たちと働いていただける方を募集しています。