180style wiki
Webサイト制作関連/css tips
をテンプレートにして作成
開始行:
#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,fi...
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.co...
**Fontの指定 [#hb04dd29]
-比較的多くのブラウザで便利そう
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic...
}
-参考元：http://loconet.web2.jp/blog/archives/2007/02/css...
**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/unitles...
**コメント [#d7c7c2e5]
#comment
終了行:
#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,fi...
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.co...
**Fontの指定 [#hb04dd29]
-比較的多くのブラウザで便利そう
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic...
}
-参考元：http://loconet.web2.jp/blog/archives/2007/02/css...
**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/unitles...
**コメント [#d7c7c2e5]
#comment
ページ名:
