-
良くデフォルトで使用する(流用)CSSを教えてくださいとの声を聞きます。
趣味でサイトを作ってる人は必要ないかもしれませんが、プロの世界では複数サイトを制作するので必要になってくるものです。
今回はHISABOが使用するCSS共通定義、common.cssを内緒で教えます。
まずはブラウザのリセット。
これは各ブラウザによってデフォルトのCSSが定義されてます。
余白だったり文字サイズだったりブラウザ間でその定義は結構違うものです。
それを先ずリセットします。
-
common.css ブラウザリセット
/*-----------------------------------------------
Browser Reset
-----------------------------------------------*/
body {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,pre,address,em,strong,th,ins {
font-size:100%;
font-style:normal;
}
h1,h2,h3,h4,h5,h6,pre,address,ul,ol,li,dl,dt,dd,form,legend,p {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border:0;
}
th {
text-align:left;
}
input,select,textarea {
vertical-align:middle;
}
img {
border:0;
vertical-align:middle;
}
ins, a {
text-decoration:none;
}
ul {
list-style:none;
}
br {
letter-spacing: 0;
}
以上でブラウザリセット終了です。
次に良く使う共通セレクタを定義していきます。
フォント関連
/*---------------------------------------
font
---------------------------------------*/
/* font size -----------------------*/
.fs-s {
font-size:80%;
}
* html .fs-s {/*IE用*/
font-size:75%;
}
/* font style -----------------------*/
.b {
font-weight:bold;
}
.i {
font-style:italic;
}
.u {
text-decoration:underline;
}
.d {
text-decoration:line-through;
}
次に回り込みや解除、テキストの寄せを定義します
/*---------------------------------------
float
---------------------------------------*/
.left {
float:left;
}
.right {
float:right;
}
img.left {
margin:0 15px 8px 0;
}
img.right {
margin:0 0 15px 8px;
}
/*---------------------------------------
clear float
---------------------------------------*/
.cl {
clear:both;
}
hr {
clear:both;
border:0;
}
/*---------------------------------------
text align
---------------------------------------*/
.txt-l {
text-align:left;
}
.txt-c {
text-align:center;
}
.txt-r {
text-align:right;
}
こんな感じ。
実際はもう少し使いまわしの利くのを定義してるけどね。
セレクタ名はクライアントからの指示がない限りコーダーが命名するけどなるべくわかり易いように。
セレクタ名の名づけが実はコーディングの中で最も難しいということはコーダー意外あまり知られてない。。。。
上記のcommon.cssは下記よりダウンロードできます。
common.cssのダウンロード