#freeze
#ls
*css tips [#zcce0922]
#contents
**ボックスから文字がはみ出す場合の対処 [#u432d930]
-overflowを使う
|visible|はみ出した内容を指定された幅や高さの内容領域からあふれて表示する|
|hidden|内容領域を超えるものは切り取られ、スクロールバーをつけない|
|scroll|内容領域を超える・超えないにかかわらず、常にスクロールバーをつける|
|auto|UAに依存、内容領域を超える場合はスクロールバーをつける|
＊autoが一番便利そう（スクロールバーを着けると見た目がよくない場合もあるので、はみ出した場合とどちらが良いか要検討）
-word-break（ＩＥ限定）
|normal|半角英数字のみ単語の切れ目で改行する|
|break-all|半角英数字、日本語共に単語の途中でも改行する|
|keep-all|半角英数字、日本語共に単語の切れ目で改行する|
**ボックスの配置 [#xf9c7f95]
-センタリング
margin:0 auto;
-右寄せ
margin-left: auto;
-左寄せ
margin-right: auto;
**ブラウザの規定のcssを初期化する [#ldcb8921]
-下記のコードを貼り付ける
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
img {
border:0;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
-以下のコード（全称セレクタの利用）だとレンダリングが遅くなるらしいので使わない。
*{
margin:0;
padding:0;
}
-[[Yahoo! UI Library: Reset CSS>http://developer.yahoo.com/yui/reset/]]とかもyahooのサイトから読み込んでくるオーバヘッドを考慮して使わない。
**Fontの指定 [#hb04dd29]
-比較的多くのブラウザで便利そう
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}
-参考元：http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html
**Fontサイズの指定 [#c19de32f]
-多くのブラウザでデフォルトサイズは16pxとなっている。
-px等で指定すると古いブラウザ等では可変できないらしい。&br;
したがってfont-sizeはキーワードで指定しておいた方が良い。
|キーワード|パーセント|em|
|xx-large|172.8%|1.728em|
|x-large|144%|1.44em|
|large|120%|1.2em|
|medium|100%|1.0em|
|small|80%|0.8em|
|x-small|64%|0.64em|
|xx-small|51.2%|0.512em|
**行間（line-height）の指定 [#f64d6a77]
-日本語だと1.5くらいがバランスよさげ
line-height: 1.5
-ちなみにemや%の単位はつけない方がいいらしい&br;
参考元：http://www.lucky-bag.com/archives/2006/04/unitless-line-heights.html
**コメント [#d7c7c2e5]
#comment
