コーディングを始める前に必ず必要になってくるCSSがあります。

実際現場で使って見たり学ばなければ発見できない!しかしかなり重要なCSSがあります。

知ってる方はすいません!だけど知らない方は必ず知っておくべき

超基本的なCSSテクニックですのでしっかりよんでいただければ最高です。

 

リセットCSS

このCSSは文字通りリセットしてくれます

もともと、デフォルトのHTMLには見えないデフォルトCSSが張り付いています。

そのCSSは思い通りにコーディングしたい時にすごーく邪魔になります。

なぜかDivとDivの間に隙間が…みたいな。

コーディングを始める前には下記のリセット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;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
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;
}

General Purpose CSS

このCSSは非常に便利!

簡単に言うとフロートやパディング、マージンを簡易クラスを付けてあげる事で

サックリ実装してくれるCSSです。

たとえば

.mt40{margin-top:40px;}

がCSS内にあった場合

<div class=”mt40″></div>

のようにサックリ簡単に実装する事が出来ます。

つまりこのmt40のようなCSSのライブラリーってわけです!

微調整が非常に多い場合、重宝しそうです。

下記のボタンからダウンロードしちゃってください!

[button color=”orange” size=”small” link=”https://double-factory.com/wp-content/uploads/generalpurpose.css” target=””]ダウンロードはこちら[/button]

 

ClearFix CSS

このCSSは100%で使います。使わない時は無いくらいです!

簡単に使う意味と用途を説明します。

_r2_c2

 

上記の図でDiv内に2つのDivを用意し、Widthを指定し左右にフロートさせた場合

Clearfixが入っているのと入っていない大枠のDivの高さが違いますよね?

つまりClearfixを入れると、フロートで浮き上がってしまった箱の高さを認識させる

と言う意味があります。

ただし、サイトの一番大枠にClearfixを書いてしまうと

FireFoxで上下に余白が出てしまうというバグがあります。

なのでフロートをくくる際はコレ!と体で覚えちゃってください。