こんにちは、kikuです。

最近知ったCSSの単位について記載していきます。
vw, vh, vmin, vmax, この４つです。

よくレスポンシブデザインで使うのは%(パーセント)ですかね。

<style>
div {
  width: 50%;
}
img {
  width: 50%;
}
</style>
<div>
  <img src="img/hoge.jpg" />
</div>

これだとimgは親のdivのwidthに対して50%のサイズで表示します。
つまりimgのサイズは画面の横幅の25%で表示されますね。

続いてwvはこんな感じです。

<style>
div {
  width: 50%;
}
img {
  width: 50wv;
}
</style>
<div>
  <img src="img/hoge.jpg" />
</div>

これだとimgは親のdivのwidthに影響されません。
100wv=ビューポートのサイズ となってます。
つまりimgのサイズは50wvなのでビューポートの横幅の50%で表示されますね。

他のも同じようにビューポートに対する割合となっています。

ちょうど使いたい場面があったのですが、ブラウザの対応バージョンの関係で断念しました。。。。
対応バージョンはこんな感じ。

Androidブラウザのところが敷居高いですね。
Android4.4未満のユーザを切り捨てるのはまだ早いかと思います。

というわけで、PCなら普通に使われるかもしれない、スマートフォン向けサイトでもそのうち普通に使われるかもしれない単位の紹介でした。

こんにちは、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ライフを過ごしましょう。