【簡単】リセットCSSとは？【現役エンジニアが解説してみた】
「リセットCSSを使いたいけど、どれを使っていいかわからない、、。」
と考えている人に向けて、今回は僕が使っている「リセットCSS」について紹介していきます。
この記事を書いている僕は、現在フロントエンドの開発を行っています。
そして個人でも案件をこなしている。
なので、リセットCSSはしょっちゅう使用します。
リセットCSSを使うことで、かなり開発がスムーズにいくので、是非参考にしてください！
リセットCSSとは？
リセットCSSとは、「ブラウザがデフォルトで持っているCSSを消すCSS」のことを言います。
ブラウザ・・・WEBサイトを閲覧するためのソフトウェアでGoogle ChromeやSafari、Internet Explorerなど様々な種類のものがあります。
リセットCSSを使うと、どうなるのか？
リセットCSSを使うことで、h2やh3タグなどが持っているデフォルトのCSSを打ち消すことが出来ます。
つまりデフォルトのCSSを全て消し、フラットな状態からCSSのコーディングをすることができるので、かなり開発がしやすくなる！
言葉だけだと分かりにくいと思うので、具体例を使って説明していきます。
上記の画像は
|
1 |
<h2>リセットCSSコピペ</h2> |
このようにコーディングしています。
リセットCSSを使っていないので、<h2>タグがデフォルトで持っているCSSのスタイルが適応されています。
だから文字が大きかったり、変な余白が入っていますよね？
リセットCSSがないと、変な隙間が出来たり、開発しにくくなります。
そこでリセットCSSを適応してみます。
すると、先ほどまで<h2>タグはフォントが大きかったり、余白がありましたが、リセットCSSを使うことで無駄なCSSを排除することが出来ました！
かなりCSSがスッキリしましたね。
リセットCSSの紹介
次に僕が実際の開発で使っている「リセットCSS」の紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; font-weight: normal; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; } *,*::after,*::before { box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; } img { max-width: 100%; height: auto; vertical-align: bottom; } |
これからリセットCSSのコードについてコメントを入れながら解説していきます！
1〜21行目までの解説
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
margin: 0; padding: 0; →デフォルトで入っている余白を消す border: 0; →デフォルトで入っている線を消す font-size: 100%; →「％」指定でフォントサイズを指定しておくと、ブラウザのデフォルトのフォントサイズ（通常は 16px = 12pt）や、ユーザが設定したフォントサイズが正しく反映される。 font: inherit; →フォントは親要素から継承される。 font-weight: normal; →フォントの濃さを全て統一にします vertical-align: baseline; →要素を下のラインに揃えます。 |
22~25行目
|
1 2 3 4 |
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } |
対象要素を、全てブロック要素にします。
26~28行目
|
1 2 3 |
body { line-height: 1; } |
bodyの中にある要素は全て、「line-height: 1;」にする。
つまり「line-height」が文字の高さに揃います。
29~31行目
|
1 2 3 |
ol, ul { list-style: none; } |
リストを表す時に使われる「olタグ」と「ulタグ」に対して、デフォルトでつく箇条書きの「・」を消す。
32~34行目
|
1 2 3 |
blockquote, q { quotes: none; } |
「」や『』などの引用符をデフォルトで表示しないようにします。
35~39行目
|
1 2 3 4 5 |
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } |
32~34行目の要素の「擬似クラス」に対しても引用符が付かないようにします。
40~43行目
|
1 2 3 4 |
table { border-collapse: collapse; border-spacing: 0; } |
「tableタグ」を使う際に、線の隙間をなしにします。
44~46行目
|
1 2 3 |
a { text-decoration: none; } |
リンクを表示できる「aタグ」のデフォルトで表示されるアンダーラインを消します。
47~51行目
|
1 2 3 4 5 6 7 8 |
*,*::after,*::before { box-sizing: border-box; box-sizing: border-box; →全ての要素が内側に入るようにします。これを設定することで「padding」や「border」が100％からはみ出ないようになる。 word-wrap: break-word; →可能な限り、単語途中での改行を避けることが出来ます。特に英文字を表示したい時に単語の途中で改行されないのは便利。 } |
53~58行目
|
1 2 3 4 5 6 7 8 9 10 |
img { max-width: 100%; →画像がブラウザ幅からはみ出さないようにする height: auto; →高さはautoにして自動調整されるようにする vertical-align: bottom; →こちらを指定することで、画像の下に出来る「謎の余白」を消すことが出来る。 } |
まとめ
以上が「リセットCSS」についての紹介でした。
リセットCSSは今回紹介したもの以外にもあります。
リセットCSSごとに特徴があるので、興味ある方は是非調べてみるといいですよ！
最後に参考記事を貼って終わりにします。
