SublimeなLife日記

少しでも素晴らしい生活をおくるために、日々、気になったことを。

cssのcalc()プロパティで相対値からpx値を引く計算ができる

calcプロパティを使うとCSSで四則計算ができる。
いつも忘れるので。

.box {
  widht: -webkit-calc(100% - 140px);
  width: -moz-calc(100% - 140px);
  width: calc(100% - 140px);
}

レスポンシブサイトでサムネイルの横にキャプションを書く、とか、

.icon {
  leftt: -webkit-calc(50% + -12px);
  left: -moz-calc(50% + -12px);
  left: calc(50% + -12px);
}

ボーダーの真ん中にcontentでwebフォントのアイコンを置いたりとか、

もちろん他にもいろいろできる。

calcが効かない場合

これはもう、ほとんど( )の中の式に半角スペースが入っていないケース。

以上、モバイルファーストでレスポンシブサイトを作るほうが増えてきたので、いいかげんに忘れないようにアウトプット。