最近よく使う、CSSプロパティ 3選(vw/vh,calc(),flex) - #レスポンシブwebデザイン
ここ最近よく使うなーと思うCSSプロパティの紹介。
Viewport units: vw, vh, vmin, vmax
ビューポートの縦・横に対する割合の単位ですが、
めっちゃ使えるなぁーと思う今日この頃です。
記事紹介
Can I use 状況
Can I use... Support tables for HTML5, CSS3, etc
Android4.3以下は、フォールバックを用意しておけばガンガン使えんじゃん! って感じでガンガン使ってます。
特にお気に入りは、ビューポートに合わせて文字サイズが変更できるところですね。
※ 一部次に紹介するcalc()との組み合わせの内容が含まれております。
対象ブラウザや要件定義が合えば積極的に使っていきたいですね!
calc() as CSS unit value
calc()関数です。 calc = calculation(計算)の略でその名の通り、四則計算ができます。
レスポンシブwebデザインをやる上で今までは、Sass(SCSS)内で計算させて横幅等を指定していたのですが、 これを使えば、そのまま「計算式」を「値」として指定できます。
もちろん、さらに洗練されたmixinにしても使えますね。
記事紹介
Can I use 状況
Can I use... Support tables for HTML5, CSS3, etc
Android4.3以下は、フォールバックを用意しておけばガンガン使えんじゃん! って感じでガンガン使ってます。
疑似要素で上下に画像を配置し、間の高さだけ背景を指定したい!といった場合に calc(高さ - 疑似要素で配置した大きさ*2 ) のように指定できたのに感動した記憶があります。
Flexible Box Layout Module
言わずもがなな感じがしていますが、便利ですねー。
記事紹介
css3のflexboxを使うとすごい簡単になるレイアウトを試してみた | スターフィールド株式会社
Can I use 状況
Can I use... Support tables for HTML5, CSS3, etc
ほぼ、接頭辞を付ければ問題なく使えます。 今まで、JSで高さ揃えを実装し構築してたものについても、CSSのプロパティ1つで済む可能性があるというのはかなりでかい点ですね。
以上、最近よく使う、CSSプロパティ 3選でした。