- 09/07/10
CSSのリセットとかの話とか
体長不良により、フラフラで皆様に迷惑をかけているナンバです。
また、コーディングの話ですが、
デザイン上・マークアップ正当性上・納品後のメンテナンス上・ユーザビリティ上どうしてもcssでレイアウトしていますが。(まっ未だに『tableレイアウトです』なんてコーダーと名乗ってはいけない方は無視します。)
んで、誰しもがそうだと思いますが、共通部分(header、sidenavi、footer)があるデザインの場合は共通スタイルシートなどを使いますよね?
クロスブラウジングを心掛けている世のコーダーたちは、その時にリセットも行うと思いますが、どのようにされているのが多いのでしょうか?
非常にメジャーになっている
* YUI(http://developer.yahoo.com/yui/reset/)
* Blueprint(http://code.google.com/p/blueprintcss/)
* YAML(http://www.yaml.de/en/home.html)
* Tripoli(http://devkick.com/lab/tripoli/)
* meyerweb(http://meyerweb.com/eric/tools/css/reset/)
等を、その案件ごとにカスタムしてるとかでしょうかね?
ちなみに自分は
body{text-align:center;}
*{margin:0; padding:0; text-align:left;}
img{border:none; vertical-align:bottom;}
p{line-height:1.6;}
table{border-collapse:collapse;}
hr{display: none;}
/*\*/ a { overflow: hidden; }/**/
.clear{zoom: 100%;}
.clear:after{content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;}
いつも使うのは、この程度でしょうか?
bodyのtext-alignは、xml宣言を入れただけで後方互換モードになってしまう、おバカなie6のために入れてます。margin:0 auto;とかが効かなくなっちゃうから。
全称セレクタによる弊害などを、よく目にはしますが、form関係や、ul,olなどのリストマークなどは個別にstyleを当てているので普通に使っています。
imgについても主にie対策として入れてますね。
pやtableについてはケースバイケースでイロイロ追加してます。
hrは基本デフォルトで使う事がないので消してます。
/*\*/ a { overflow: hidden; }/**/はFireFox対策です。あまり使うことないですが画像置換など使った場合のリンク線が左にビヨ~ンってなるのが気味悪いので...
.clearはお馴染みのclearfixですね。これがないと面倒でしょうがないっす。
やはり自分でゼロから組んだモノが一番、ハマった時に苦労しないと思いますし何が正解で何が不正解って話ではないのですが、今のところ困ったことはないのでこの程度しか使っていません。
んで自分以外のコーダーの方が使っているリセットCSSってどんな感じなんだろうと思い
イロイロなサイトを覗いてみると、世界的にも有名な企業サイトに限って、かなり笑えるcssが多くて...当初の目的を忘れて
ついでなのでhttp://www.esitenet.com/htmllint/htmllint.htmlなどもしてみたり...
常により良いソースを書くことに日夜努力している事がアホらしくなるほど
どこもかしこもW3Cに準拠してないという事実を知りました。
ちなみにコーダーが嫌いなワードランキング(個人的見解)
1.ie6
2.角丸
3.グラデ背景多用デザイン
4.細かい横並びレイアウト
5.横並びレイアウトの子要素の下合わせデザイン
とまあ毎回ですが、ほぼ愚痴的なエントリでした。
南葉 弘樹 | 09/07/10 16:51 | トラックバック(0)
トラックバック(0)
このエントリーのトラックバックURL:
http://www.weboss.co.jp/mt/mt-tb.cgi/5426























































