大変ご無沙汰しております。マークアップエンジニアの草野です。
2017年4月にvistaのIE9サポートが打ち切られたことで、
今年新たに制作されるWebサイトの動作保証環境の多くはIE11および
Edge, Safari, Chrome, Firefoxの各最新版のみ、というのが標準となってきた印象があります。
最新環境+IE11のみにすることで自由に使えるようになる技術とは?
IE10以下やAndroid4.x以下といったCSSのサポート状況が悪い環境を排除することで、ほとんどのCSS3プロパティや新しい値・単位等が利用可能となります。
その中でもサイズ可変を前提としたデザインの再現で従来難しかったものを可能にする便利なプロパティ・値・単位等がいくつかありますので、まだ取り入れていない場合には試してみると良いでしょう。
【1】新しい単位「vw・vh」
vw・vhとは、viewportのサイズを基準として相対的にサイズ指定するための新しい単位で、vwがviewportの横幅、vhがviewportの縦幅を基準とする相対単位となります。
・1vw = viewport幅の1/100
・1vh = viewport高さの1/100
となりますので、50vwでviewport幅の50%、100vhでviewport高さの100%といった計算となります。
この単位ならではの便利な活用例として次のようなケースが考えられます。
1.画面幅に応じて文字サイズを自動的に拡大縮小する(vwを使用)
2.常に画面の高さに対して一定の比率のサイズを保つ(vhを使用)
いずれも従来の単位では不可能か、指定が困難だったものを簡単に実現することができます。
<参考サイト>
◎px や % はもう古い? Viewport unitsという新たな単位『vw』,『vh』の使い方
◎サポート状況
【2】新しい値「calc()」
calc() とは、CSSで**四則演算が使える**ようになる新しい値(関数)です。これを使うと、例えば「左右20pxのmarginを含めて要素の幅を25%に設定する」といったことが可能となります。
セレクタ { width: calc(25% - 40px); }
calc()のすごいところは、計算させる数値の単位が違ってもよしなに計算してくれるというところです。
<参考サイト>
◎サイズ指定に役立つ!CSSでcalc()を使う方法【初心者向け】
◎calc()とビューポート単位を使ったコンテナからの解放
◎サポート状況
【3】新しいレイアウト手法「flexbox」
flexboxとは、従来のfloatやdisplay:table-cell等を使ったボックスレイアウトでは実現が困難だった様々なボックスの整列・配置を可能にする新しいボックスレイアウトのための仕様(プロパティ群)です。
flexboxを使ったレイアウトでは、次のようなボックスのレイアウトがCSSだけで簡単に実現できます。
1.隣り合うボックスの高さを自動的に一番大きいものに揃える
2.隣り合うボックス同士を上下中央揃えで配置する
3.複数のボックスを親要素に対して均等割付で配置する
4.HTMLのソースコードの順番に関わらずボックスの順番を任意に変更する
5.メディアクエリと組み合わせて縦並びと横並びを自動的に切り替える
などなど。いずれもfloatやdisplay:table-cellでは実現不可能な仕様ですが、flexboxを使えば簡単に実現が可能となります。特にレスポンシブのサイトにおいてデザインを意図した通りに再現しやすくなるため、環境が許すなら積極的に活用したいプロパティNo.1かと思います。
<参考サイト>
◎これからのCSSレイアウトはFlexboxで決まり!
◎CSSレイアウトにfloatは古い!初心者でも初められるFlexbox入門
◎サポート状況
まとめ
昔から運用されているWebサイトや、BtoBサイト、中高年向けサイトなどの運営をしていると、どうしても対象環境の選定が保守的になりがちで、結果として新しい便利な技術があっても利用しないでいつまでも苦労することになってしまいがちです。
少しずつでも知識・技術をアップデートしていくようにしましょう。