BLOG

このブログは間もなく「Webis Tech LABO.」に移設予定です。
Webis Tech LABO.はこちら

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のコーディングをすることができるので、かなり開発がしやすくなる！

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

上記の画像は

<h2>リセットCSSコピペ</h2>

1	<h2>リセットCSSコピペ</h2>

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

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

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

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

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

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

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

リセットCSSの紹介

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

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;
}

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;

word-wrap: break-word;

}

img {

max-width: 100%;

height: auto;

vertical-align: bottom;

}

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

1〜21行目までの解説

margin: 0;
padding: 0;
→デフォルトで入っている余白を消す

border: 0;
→デフォルトで入っている線を消す

font-size: 100%;
→「％」指定でフォントサイズを指定しておくと、ブラウザのデフォルトのフォントサイズ（通常は 16px = 12pt）や、ユーザが設定したフォントサイズが正しく反映される。

font: inherit;
→フォントは親要素から継承される。

font-weight: normal;
→フォントの濃さを全て統一にします

vertical-align: baseline;
→要素を下のラインに揃えます。

margin: 0;

padding: 0;

→デフォルトで入っている余白を消す

border: 0;

→デフォルトで入っている線を消す

font-size: 100%;

→「％」指定でフォントサイズを指定しておくと、ブラウザのデフォルトのフォントサイズ（通常は 16px = 12pt）や、ユーザが設定したフォントサイズが正しく反映される。

font: inherit;

→フォントは親要素から継承される。

font-weight: normal;

→フォントの濃さを全て統一にします

vertical-align: baseline;

→要素を下のラインに揃えます。

22~25行目

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

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

26~28行目

body {
	line-height: 1;
}

body {

line-height: 1;

}

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

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

29~31行目

ol, ul {
	list-style: none;
}

ol, ul {

list-style: none;

}

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

32~34行目

blockquote, q {
	quotes: none;
}

blockquote, q {

quotes: none;

}

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

35~39行目

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

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

40~43行目

table {
	border-collapse: collapse;
	border-spacing: 0;
}

table {

border-collapse: collapse;

border-spacing: 0;

}

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

44~46行目

a {
	text-decoration: none;
}

a {

text-decoration: none;

}

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

47~51行目

*,*::after,*::before {
box-sizing: border-box;
box-sizing: border-box;
→全ての要素が内側に入るようにします。これを設定することで「padding」や「border」が100％からはみ出ないようになる。

word-wrap: break-word;
→可能な限り、単語途中での改行を避けることが出来ます。特に英文字を表示したい時に単語の途中で改行されないのは便利。
}

*,*::after,*::before {

box-sizing: border-box;

→全ての要素が内側に入るようにします。これを設定することで「padding」や「border」が100％からはみ出ないようになる。

word-wrap: break-word;

→可能な限り、単語途中での改行を避けることが出来ます。特に英文字を表示したい時に単語の途中で改行されないのは便利。

}

53~58行目

img {
    max-width: 100%;
　　→画像がブラウザ幅からはみ出さないようにする

    height: auto;
　　→高さはautoにして自動調整されるようにする

    vertical-align: bottom;
　　→こちらを指定することで、画像の下に出来る「謎の余白」を消すことが出来る。
}

img {

max-width: 100%;

　　→画像がブラウザ幅からはみ出さないようにする

height: auto;

　　→高さはautoにして自動調整されるようにする

vertical-align: bottom;

　　→こちらを指定することで、画像の下に出来る「謎の余白」を消すことが出来る。

}

まとめ

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

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

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

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

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

BLOG LIST

CONTACT
RECRUIT

CONTACT

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

RECRUIT

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