Webデザイナーのblog : -2ページ目

CSSのメモ

memo


1)セレクタに対してwidthとpaddingを同時に指定しない。
これは、Windows IE6(後方互換モード)対策。


2)横幅をピクセルで固定したいときにはwidthとpadding (left or right) を同時に指定しない。

これを覚えておくとトラブルに巻き込まれることがグッと減る。

余白が欲しいときには、それよりも下位の要素にpaddingかmarginを指定する。

どうしようもなければdivをもう一度かましてそれに指定する。


3)ピクセル単位であわせなければならない場所にはborderを使わない。
これも、Windows IE6(後方互換モード)対策。

これを覚えておくとトラブルに巻き込まれることがグッと減る。

borderを使いたいときには、横着せず背景画像を用意すること。

見た目もよくなるし。

UTF-8 submitボタンの高さを合わせる

UTF-8のsubmitボタンのbottomに、変な余白があり気になってしまう。


それを解決すつには、input等にfont-familyを追加する。

他に良い方法があればいいのだが、今のところの解決策としてメモ。


input {

font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";

}

入れ子になった時に、文字の大きさを元に戻す。

li li,
li p,
li pre,
li dt,
li dd,
dd li,
dd p,
dd pre,
dd dt,
dd dd {
font-size:100%;
}

Pタグ で 文字を折り返さない

参考アドレス

http://www.tagindex.com/stylesheet/text_font/white_space.html


<STYLE TYPE="text/css">
<!--
P { white-space: nowrap; }
-->
</STYLE>

dt dd を 横並びに表示させる

--css---

body {line-height: 1.6em;}

dl { width: 300px; }

dt { width: 5em;}

dd {margin-left: 5em;margin-top: -1.6em;margin-bottom:10px;}


--html---

<dl>
<dt>定義用語</dt>
<dd>あああああああああああああああああああああああああああああああああ</dd>
<dt>定義用語</dt>
<dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd>
<dt>定義用語</dt>
<dd>うううううううううううううううううううううううううううううううううううううううううううううう</dd>
</dl>