xxx.s500

トップ | 最近の更新 | このサイトについて | rss2.0

[web] [css] いつも書いてるセレクタ

cssファイルを作る度に必ず書き込んでるセレクタ

@charset "utf-8";

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.cf:after {
  content: "";
  clear: both;
  display: block;
}
.nobr {white-space: nowrap;}
.float-r{float:right;}
.float-l{float:left;}
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}

body{
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
}

box-sizing: border-box

box-sizingを使ってボックスサイズ(width, height) の算出方法を指定することができる。border-boxは、パディングとボーダーを幅と高さに含めるようにするための指示。こうしておかないとレイアウトの際の計算が面倒くさくなる。

cf (clearfix)

floatを解除するための手法のひとつ。floatさせる要素の親要素に使う。これがないと解除が面倒くさくなる。

nobr

意図しない改行を防ぐための指示。spanなどに入れて部分的に使う。
以前は<NOBR>を使っていたのだけど、非標準なのでこちらを使っている。

font-family

あえて"MS Pゴシック"を抜いている。