Webサイト制作関連/css tips
Last-modified: 2022-05-05 (木) 09:23:32
css tips†
ボックスから文字がはみ出す場合の対処†
- overflowを使う
visible はみ出した内容を指定された幅や高さの内容領域からあふれて表示する hidden 内容領域を超えるものは切り取られ、スクロールバーをつけない scroll 内容領域を超える・超えないにかかわらず、常にスクロールバーをつける auto UAに依存、内容領域を超える場合はスクロールバーをつける
*autoが一番便利そう(スクロールバーを着けると見た目がよくない場合もあるので、はみ出した場合とどちらが良いか要検討)
- word-break(IE限定)
normal 半角英数字のみ単語の切れ目で改行する break-all 半角英数字、日本語共に単語の途中でも改行する keep-all 半角英数字、日本語共に単語の切れ目で改行する
ボックスの配置†
- センタリング
margin:0 auto;
- 右寄せ
margin-left: auto;
- 左寄せ
margin-right: auto;
ブラウザの規定のcssを初期化する†
- 下記のコードを貼り付ける
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とかもyahooのサイトから読み込んでくるオーバヘッドを考慮して使わない。
Fontの指定†
- 比較的多くのブラウザで便利そう
body { font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif; }
- 参考元:http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html
Fontサイズの指定†
- 多くのブラウザでデフォルトサイズは16pxとなっている。
- px等で指定すると古いブラウザ等では可変できないらしい。
したがって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)の指定†
- 日本語だと1.5くらいがバランスよさげ
line-height: 1.5
- ちなみにemや%の単位はつけない方がいいらしい
参考元:http://www.lucky-bag.com/archives/2006/04/unitless-line-heights.html