こんにちは、kikuです。

今日はcssで横幅を決める時に楽になる方法を記述していこうと思います。

例えばtwitterのタイムラインのようなUIで、左にサイズ固定の画像があり右に残りのサイズで何かがあるような場合。
画像表示領域の横幅を60pxにしていた場合、残りは 100% – 60px ですよね。

これを実現するのにpaddingやらmarginやらを設定したりするのはとても面倒で馬鹿らしいです。

そこでこれ！calc()！！計算ができます。こんな風に使えます！ 

width: calc(100% – 60px);

最初これを見た時は目から鱗が落ちました。
というか最初からこういうものがあっても良いと、いや、寧ろあるべきだと思いました。
しかし残念ながらAndroidでは使えないようです。

使い方はこんな感じにするのが基本でしょうか。

.hoge {
  width:96%;
  width:-webkit-calc(100% – 60px);
  width:calc(100% – 60px);
}

ではストレスのないcssライフを過ごしましょう。