使えるCSS活用術
先日から、コーディングコンテストの課題をやったりしてCSSに関して一人盛り上がりをしていたのですが、やっぱりコーディングは奥が深いです。CSSの方も書き方でもっといろいろ工夫できるのではないかなとか、設定をどこからはじめればよいのかななどと、普段適当にやって見た目がよければそれでよしで片付けていたことに改めて目を向けることができました。
ちょうどCrucial Web HostingでCSSの活用術について書かれていたので自分の覚書のために読んでみました。こういうのってリアルタイムっていうのかな。
『CSSコーディング初心者はブラウザのデフォルト設定を理解していないがゆえにミスをします。』そうです、そうです、IE、Firefox、Opera、Safari、など各ブラウザでデフォルトの設定が少しづつ違うので、その調整が一番厄介だったりします。『まずはデフォルトスタイルの設定をリセットすることが必要です』そうだったのか。全くリセットしてしまえば、どのブラウザみても々状態になるはずですよね。
『多くのデザイナーがグローバルなリセットを行うが、問題もあります。FormbuttonやFieldsetなどはリセットできない要素を含んでいます。そのため、それらには要素別にリセットする必要があります。』全てがリセットできるわけではないんですね～。
『基礎となるリセットを行い、そこに自分のスタイルとなるものを加え、自身のスタイルのベースとします。』とりあえず、自分好みにリセットスタイルとベーススタイルを組んでおいてそれをベースにするといいみたい。その上にまた、自分のスタイルを組み上げていく。すごく奥が深いです。
/***** Global Settings *****/
html, body {
border:0;
margin:0;
padding:0;
}
body {
font:100%/1.25 arial, helvetica, sans-serif;
}
/***** Common Formatting *****/
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}
h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font:2em arial, helvetica, sans-serif;
}
h2 {
padding:20px 0;
letter-spacing:-1px;
font:1.5em arial, helvetica, sans-serif;
}
h3 {
font:1em arial, helvetica, sans-serif;
font-weight:bold;
}
p, ul, ol {
margin:0;
padding:0 0 18px 0;
}
blockquote {
margin:22px 40px;
padding:0;
}
ul, ol {
list-style:none;
padding:0 0 18px 40px;
}
small {
font-size:0.85em;
}
img {
border:0;
}
acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}
/***** Links *****/
a, a:visited {
text-decoration:none;
}
/***** Forms *****/
form {
margin:0;
padding:0;
display:inline;
}
input, select, textarea {
font:1em arial, helvetica, sans-serif;
}
textarea {
line-height:1.25;
}
label {
cursor:pointer;
}
/***** Tables *****/
table {
border:0;
margin:0 0 18px 0;
padding:0;
}
table tr td {
padding:2px;
}
/***** Wrapper *****/
#wrap {
width:960px;
margin:0 auto;
}
/***** Global Classes *****/
.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }
.wrap { width:960px;margin:0 auto; }
.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }
.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }
ベースとなるCSSをダウンロードすることもできるので、それをもとに自分の好みのベースCSSを作ってみるとよさそうです。
Leave a Reply