便利なはずのreset.cssやdefault.cssを使うことによる弊害

reset.cssやdefault.cssなどで
以下のように要素をリセットしておくと、コーディングするとき便利なんですが、
弊害もいろいろあるから困りもの。

div,p, pre, ul, ol, dl, dt, dd, hr,
address, form, blockquote, noscript {
line-height: 1.5em;
text-align: left;
display: block;
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
border: none;
}
em, strong, q, dfn, code, samp,
kbd, var, cite, abbr, acronym {
margin: 0px;
padding: 0px;
font-style: normal;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: bold;
line-height: 1.0;
margin: 0px;
padding: 0px;
}
table {
font-size: 1em;
margin : 0px;
padding: 0px;
empty-cells: show;
border-collapse: collapse;
border-spacing: 0px;
border: none;
text-align:center;
}
caption,th {
text-align:left;
}
fieldset,img {
border: none;
}
img { -ms-interpolation-mode: bicubic; }

ul, li , ol, dl, dt, dd {
list-style-type: none;
}
ul img,
dl img,
ol img,
object, embed {
vertical-align: bottom;
}
hr {
height: 0px;
border: none;
margin: 0.5em auto 0.5em auto;
-moz-float-edge: margin-box;
-moz-box-sizing: border-box;
clear: both;
display: none;
}


困りものその1


Movable TypeやSerene BachといったCMSに落とし込んだとき、
本文入力欄のタグ挿入支援ツールを使い、
右寄せ中央揃えボタンを押した際に、
入力欄やプレビューでは反映されるのに、
実際生成されたhtmlには、左寄せのままで、指定が反映されない(・ε・`)といった現象。

例えば、
挿入ボタンで挿入されるタグが
<p align="right"></p>
だった場合、
pのmarginが、resetやdefaultでmargin-leftもmargin-rightも0に指定されちゃってたりするから、寂しいかなrightは無効になっちゃうっていう罠なんですね。

なので、pに対してmarginは指定しなくて、もはや良かったのでは?
のような。

margin0で、ぴたっとくっついて欲しい#box pとか.box pとかって、そこで個別にmargin0に指定すると思うし。
デフォルトで0にしちゃったがために融通が利かないことがよくあります。
メリットは大してなく、デメリットだけ出てきちゃうなら、むやみに0にするのって、効率悪いんですよね。

コーディング覚え立ては、誰かのcssを参考にしたり、完パクするのも大切ですが、
1サイト任せられて、サイトまるごと構築できるくらいになったら、自分流のcssやデフォルトを持つことになると思います。

でないと、自分の理論上は成立するはずなのに、現実その通りにならない、なんてことが出てきやすいですね。
自分で一から作ったものなら、もう少し柔軟に進められそうです。

もちろん、会社内や、制作チーム内で、ある程度のガイドライン、制作上のルールは、統一化しないとっていう課題もあるんですが・・・
難しい問題です。
バランスが大切ですよね。


htmlやタグをある程度分かっているお客様が、せっかく得た知識を活用してタグを使ったり、ブログ記事でタグボタン使ったりしたとき、
<p align="right"></p>
が効かないサイトなんて、悲しいじゃないですか。

いちいちブログのタグ挿入ボタンから生成されるタグを
<p style="text-align:right"margin:auto;></p>
にカスタマイズする覚悟はあるんですか?て話。

なんて、ちょっと語ってみました。


P.S.困りものその2は・・・?
>ないです。

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://www.otogawa.com/cms/mt-tb.cgi/321
Listed below are links to weblogs that reference
便利なはずのreset.cssやdefault.cssを使うことによる弊害 from px*blog