Fly higher! Sky is the limit!

webの現場で働く人のブログ

最近よく使う、CSSプロパティ 3選(vw/vh,calc(),flex) - #レスポンシブwebデザイン

ここ最近よく使うなーと思うCSSプロパティの紹介。

Viewport units: vw, vh, vmin, vmax

ビューポートの縦・横に対する割合の単位ですが、
めっちゃ使えるなぁーと思う今日この頃です。

記事紹介

coliss.com

dev.classmethod.jp

Can I use 状況

Can I use... Support tables for HTML5, CSS3, etc

Android4.3以下は、フォールバックを用意しておけばガンガン使えんじゃん! って感じでガンガン使ってます。

特にお気に入りは、ビューポートに合わせて文字サイズが変更できるところですね。

coliss.com

※ 一部次に紹介するcalc()との組み合わせの内容が含まれております。

対象ブラウザや要件定義が合えば積極的に使っていきたいですね!

calc() as CSS unit value

calc()関数です。 calc = calculation(計算)の略でその名の通り、四則計算ができます。

レスポンシブwebデザインをやる上で今までは、Sass(SCSS)内で計算させて横幅等を指定していたのですが、 これを使えば、そのまま「計算式」を「値」として指定できます。

もちろん、さらに洗練されたmixinにしても使えますね。

記事紹介

www.sassmeister.com

hyper-text.org

Can I use 状況

Can I use... Support tables for HTML5, CSS3, etc

Android4.3以下は、フォールバックを用意しておけばガンガン使えんじゃん! って感じでガンガン使ってます。

疑似要素で上下に画像を配置し、間の高さだけ背景を指定したい!といった場合に calc(高さ - 疑似要素で配置した大きさ*2 ) のように指定できたのに感動した記憶があります。

Flexible Box Layout Module

言わずもがなな感じがしていますが、便利ですねー。

記事紹介

coliss.com

css3のflexboxを使うとすごい簡単になるレイアウトを試してみた | スターフィールド株式会社

www.webcreatorbox.com

Can I use 状況

Can I use... Support tables for HTML5, CSS3, etc

ほぼ、接頭辞を付ければ問題なく使えます。 今まで、JSで高さ揃えを実装し構築してたものについても、CSSのプロパティ1つで済む可能性があるというのはかなりでかい点ですね。

以上、最近よく使う、CSSプロパティ 3選でした。