【リセットCSS】cssの便利コード紹介【初心者向け】

こんにちは、だいちゃんです。

今日は勉強がてらサイトのコードを見て回ってたら
とても良い記述があったので、紹介します。

CSSに慣れている方なら
「この程度のコード当たり前だろう」って思うような
コードだと思いますのであしからず・・。

俗にいう「リセットCSS」の中身の一部です。

 

ソースコード


html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption,
tbody,
tfoot,
thead,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0; padding: 0; border: 0;
}

 

解説

内容は簡単、よく使いそうなタグの余白をすべてなくすというコードです。

HTML/CSSコーディングって何かを実装したとき
勝手に余白がつくのですが、
それを鬱陶しいと感じる人多いと思います。
私もそうです。
その鬱陶しいを解決してくれます。

このコードだけ記載したCSSファイルを作って
読み込ませるだけですべてのプロジェクトを
余白なしでスタートすることが出来ます。
そしてそのCSSファイルに他にも便利な機能を追加していくと
自分用のライブラリが作れるというわけです。

意外とこういうの思いつかないですよね。

 

効率のいいコーディングを!

こうやってライブラリを作っておくことで
これから作るプロジェクトすべてに同じ記載をする必要がなくなります。

皆さんもぜひ作ってみてください(`・ω・´)