IE非対応の便利なCSSプロパティ集

mix-blend-mode、filter、objext-fit……とても便利ですよね。
これらのプロパティを使うと、これまでjsで対応していた箇所や、再現が不可能なので画像で対応としていたものを、CSSだけで簡単に再現してくれます。

しかし、残念ながらこれらのプロパティはIE非対応です。そのため、便利だけどIE対応のために使えない……ということが多かったと思います。
ですがこの度、IEのサポートが今年の6月に終了するとのことで、次第にIE非対応のCSSプロパティを利用できる機会も増えていくのではないでしょうか！

そこで今回は、便利だけどIE非対応でこれまであまり使う機会がなかった、というCSSプロパティをご紹介していこうと思います。

IEサポートが終了してからもしばらくはIE対応が必要になってくるとは思いますが、IEを気にせずにCSSを使えるようになる日が来るのが楽しみですね。

IE対応をどこまでするかについてですが、IEのサポートの終了が見えていることもあり、レイアウト崩れが起こるなどの致命的な問題がない限りはIE非対応のCSSの使用を検討してもよいのではと考えております。
IEで問題が起こってないことを確認したうえでIEでの効果を諦めて、Chromeや他のブラウザではより見栄えよく見えるようにしておく、という感じです。
もちろんプロジェクトにもよりますので、ディレクターさんと要相談です！

それでは、次からIE非対応のCSSプロパティの紹介を行っていこうと思います。

mix-blend-mode

PhotoshopやXD、Illustratorで作成されたデザインで、合成モードのオーバーレイや乗算、スクリーンなどが使われていることがあると思います。
mix-blend-modeを使えば、そのような合成モードをCSSでかけることができます！
これまでは丸ごと画像にして置いたり、乗算やオーバーレイの効果をあきらめたりしていましたが、mix-blend-modeを使ってお手軽に再現しましょう。

次から主なブレンドモードの紹介をしていきます。

■参考ドキュメント
mix-blend-modeについて：mix-blend-mode
ブレンドモードの種類について：blend-mode

初期状態

次からの例は、この2枚の画像をabsoluteで重ね合わせてブレンドモードをかけてみようと思います。
（水色のきらきらした画像（.img-kira）を上に、空の画像をその下に重ねます。）

乗算

乗算は、上の色と下の色をかけ合わせた色になります。
黒がかけあわされたときはより暗い色になります。
白がかけあわされたときは変化せず、下のレイヤーの色がそのまま見えます。

記事アーカイブなどのページでサムネイル画像の上にテキストを載せたいというとき、画像の色合いがまちまちなのでテキストが見えなくなるかもしれない……という懸念がありますよね。
そんなときに、サムネイル画像の上に乗算で薄く暗い色を乗せておけば、見栄えもよく、テキストも読みやすくなります！
単に無彩色を薄く乗せておくのだと、画像との色合いによってあまり見栄えが良くないときがあります。

スクリーン

色を反転して乗算し、さらに色を反転します。
黒がかけあわされたときは変化せず、下のレイヤーの色がそのまま見えます。
白がかけあわされたときはより明るい色になります。

オーバーレイ

下のレイヤーの色が暗いときは乗算、明るいときはスクリーンがかかります。
コントラストが強まり、はっきりとした効果が得られます。

ハードライト

上のレイヤーの色が暗いときは乗算、明るいときはスクリーンがかかります。
（オーバーレイとレイヤーの上下が入れ替わった効果になります。）
サンプルだと上のレイヤー（水色のきらきらした画像）が明るいので、スクリーンをかけたときの色に似ています。

ソフトライト

ハードライトとほぼ一緒ですが、ソフトライトのほうが柔らかい印象になります。

除外

色が反転します。

画像や複数色の背景の上に、mix-blend-mode: exclusion;をかけたテキストを置くと、色がぱきっとしてかっこいい感じになると思います。
すべてが補色の色合いになるため、色数が多いと少し色が汚く見えてしまうかもしれません。

差の絶対値

除外と同様、色が反転します。
除外のほうがコントラストが弱く少し薄味ですが、差の絶対値を使うとコントラストが強まり、ぱっきりとした印象になります。

filter

filter関数では、ブラー（ぼかし）や影を付けたり、輝度・コントラスト・色相などの操作や色見の調整ができたりします。

次から主なfilter効果の紹介をしていきます。

■参考ドキュメント
filter

ブラー

ガウスぼかしをかけられます。
blurをかけると要素のフチもぼけるので、フチはぼかしたくないときは、要素の囲いを作ってぼかした分はみ出させて overflow: hidden するなどが必要です。

ドロップシャドウ

ドロップシャドウは、要素の中身のフチに影を付けることができます。
上記はpng画像ですが、オレンジのお花に沿って影が付いているのがわかるでしょうか？

box-shadowでは要素の枠のフチに影を付けることしかできませんが、filter: drop-shadowは中身に沿って影が付けられます。
以下にbox-shadowで影を付けたサンプルも用意するので見比べてください。

グレースケール

適用すると、要素の色味をグレースケールにできます。
100%で完全なグレースケールに、0%だと元の色味のまま表示されます。
画像だけでなく適用した要素すべてがグレースケールになります。

セピア

適用すると、要素の色味をセピア調にできます。
グレースケール同様、100%で完全なセピア調に、0%で元の色味のまま表示されます。
画像だけでなく適用した要素すべてがセピア調になります。

輝度・コントラスト・色相

Photoshopの色調補正・調整レイヤーではおなじみの輝度・コントラスト・色相は、CSSでも調整することが可能です。

輝度

1（または100%）が基準値で、1（100%）を超える値を指定すると輝度が高くなり、1（100%）よりも小さい値を指定すると輝度が下がります。

コントラスト

1（または100%）が基準値で、1（100%）を超える値を指定するとコントラストが高くなり、1（100%）よりも小さい値を指定するとコントラストが下がります。

色相

色相を回すことができます。
0degで色相の回転なし、360degで1回転になり、元の色味に戻ります。

複数指定

またfilterは、上記のように半角区切りで指定することで、複数指定することもできます。
必要に応じて組み合わせてみてください。

background-clip: text;

テキストを背景色で抜くことができます。Photoshopなどでいうクリッピングマスクと同じようなイメージです。

コードのポイントは、★のところです。
background-clip: text;をかけるときは、FireFoxとEdgeに対応するために-webkit-プレフィックスも一緒に書いてください。
また、テキストのcolorをtransparentにすることでテキストを背景色で抜くことができます。

clip-path

clip-pathは、要素を図形でクリッピングマスクします。
長方形や三角形、正円や楕円などが元々用意されているだけでなく、polygon()で頂点を指定して、任意の図形を指定することもできます。
また、SVGのパスデータを使用することも可能です。

■参考ドキュメント
clip-path

図形を指定してクリップ

これまでは、border-radius: 50%; overflow; hidden; をして正円の画像を作っていましたが、画像のクリッピングならclip-pathで1行で書けます。
基本的なシェイプが簡単に指定できるようになっていますので、以下で紹介いたします。

inset()

長方形を指定できます。
clip-path: inset(50px); とすると要素の端から、50pxの余白を開けて切り抜いてくれます。
Photoshop・Illustratorのオフセットと同じイメージです。

clip-path: inset(50px round 10px); とすると、50pxのオフセットと10pxの角丸が付きます。

circle()

正円を指定できます。

ellipse()

楕円形を指定できます。

polygon()

多角形を指定できます。複雑な図形も指定できます。
上記では3つの頂点を打ってあるので三角形です。

以下のサイトはclip-pathのジェネレータです。
好きな形にパスを指定できるので、複雑な形にクリッピングしたいときはご活用ください。
Clippy — CSS clip-path maker

SVGでクリップ

こちらはSVGを用意してクリップする方法です。
SVGを作成したらHTMLに設置して、パスデータをclipPathで囲い、IDを付けます。
CSSでimgタグにパスのIDを指定すると、クリッピングができます。

また、SVGのclipPathとimageを使用してクリッピングする方法もあります。
こちらはIEを含む全モダンブラウザに対応しているので、現段階でIEで使用したい場合は以下の記事をご覧ください。
SVGで画像を切り抜く [クリッピングマスク] [IE含め全モダンブラウザに対応]

max-content

max-contentは要素の内在的な大きさを表してくれます。
ブロック要素にinline-blockをかけるときのような、横幅を中身のサイズにしたいときに使えます。
inline-blockと違うのは横並びにならない点です。

▼何も指定されていないとき

▼inline-block

▼max-content

また、高さが固定じゃない要素をabsoluteを使って上下中央寄せをするとき、height: max-content;　すると上下中央寄せが簡単にできます。

■参考ドキュメント
max-content

line-clamp

line-clampは複数行のテキストを任意の行で丸めて、最後の文字を「…」に置き換えてくれます。
記事アーカイブページで、各記事へのリンクに冒頭のテキストを2行だけ表示させておく、などで使えます。
jsやphpで文字数を取得して丸めるよりも簡単できれいですよね。

ポイントは★の行です。-webkit-line-clampだけでなく、その他の3行も必要です。

object-fit

object-fitはimgやvideoを要素のボックスにどうはめ込むか設定することができます。
CSSのbackgroundを使った画像指定と同じような感覚で、object-fitではHTMLに設置した<img>タグ内の画像の見せ方を指定することができます。

■参考ドキュメント
object-fit

object-fit: fill;

object-fitのデフォルト値です。imgにそのままwidthとheightをかけたときのように、画像がそのサイズに引き延ばされたりつぶれたりします。

また、画像をはめ込む基準の位置をobject-positionで決めることができます。
background-positionと同じです。

object-fit: cover;

background-size: cover; と同じような見え方になります。
親要素のサイズいっぱいになるように、画像を拡縮してくれます。

object-fit: contain;

background-size: contain; と同じような見え方になります。
画像をトリミングせずに、親要素を基準にできるだけ大きく画像を表示してくれます。

また、object-fitにはIE対応のためのポリフィルも用意されていますので、是非以下の記事をご覧ください。
object-fitの詳しい使い方などについても紹介されています。
IE11での画像のobject-fitの使用について

Grid

CSS Grid Layoutとは、レイアウトを組むときに使うCSSプロパティです。
同じくレイアウトに使用するFlexboxは一次元的（縦または横の一方向）でシンプルなレイアウトに向いているのに対し、Gridは二次元的（縦横の二方向）で重ねて配置できたり、それぞれ大きさの異なる要素を敷き詰められたりと、複雑なレイアウトが実現できます。
FlexboxよりもHTML構造の制限がないため、記述量を少なくできるのも特徴です。

以下はGridを使用してレイアウトをしてみた例です。
単にdivのボックスを6つ並べただけのHTML構造で、こんなレイアウトも簡単に実装できます。

Gridにはグリッド線を使ったレイアウトとグリッドレイアウトを使ったレイアウトがあるなど、やれることもプロパティも豊富です。
詳しく知りたい方は以下のドキュメントや記事をご覧ください。

■参考ドキュメント
CSS グリッドレイアウト
グリッドレイアウトの基本概念

■参考記事
サクッとグリッドCSSを理解して、クライアントワークに使う

また、以下の記事では、実践的なレイアウトをサンプルコード・デモ付きで紹介されています。是非ご覧ください。
【Gridは便利？】CSS Grid Layout(Grid)を使った実践的なコーディングサンプル3選！

IEでCSS Gridを使用するには、ベンダープレフィックスを付けることで対応できます。
その際、IEと他のブラウザで名称の違うプロパティが存在したり、グリッドの解釈が異なったりするため注意が必要です。
詳しくは以下の記事をご覧ください。
CSS GridをIE11、EDGEに対応させるために注意する点

position: sticky;

粘着位置指定といい、position: fixed; に似ていますが、ウィンドウを基準に追従するのではなく、ブロックを基準にして追従します。
サンプルを用意したので、スクロールしてみてください。
Aブロックの間にいるときは「A」の見出しが追従し、Bブロックに移動すると「B」の見出し……と、そのブロックに設置したstickyの要素が追従します。

■参考ドキュメント
position「粘着位置指定」

また、IEに対応するためのポリフィルが用意されているので、IEに対応することも可能です。
詳しくは以下の記事をご覧ください。
position:stickyのpolyfillの内部実装を調べてみた

CSS変数（CSS カスタムプロパティ）

CSS変数（CSS カスタムプロパティ）を使うと、変数を定義して別の場所で呼び出すことができます。
例えば、同じ色を複数個所で使っていて後から別の色に書き換えたいというときに、CSS変数を使っていれば変数を書き換えるだけで色の変更ができます。
テーマカラーやサブカラー、決まった余白などはCSS変数で記述しておいて、後から変更しやすいようにしておくと便利です。

変数を定義するときは –（ハイフン2つ）で始まる好きな変数名を付けて、: で区切って好きな値を設定します。
この時、疑似クラス :root に定義しておくと、グローバルな値となり、そのCSSファイルを読み込んであればどこでも使えます。

変数を呼び出すときは var() の中に変数名を記述すると、定義した値を呼び出すことができます。

変数のスコープ

CSS変数は、変数のスコープを決めて、値を上書きすることができます。
変数のスコープとは、その変数を参照する範囲のことです。
つまり、:rootに設定した全体で使用できる変数を、あるクラスの中では別の値に定義し直すことができます。

TwitterやSlack、Chatworkのようなアプリに実装されているダークモード・ライトモードのようなカラーテーマを再現するときや、ブロックごとにテーマカラーが違うデザインなどで便利に使うことができます。

■参考ドキュメント
CSS カスタムプロパティ (変数) の使用
■参考記事
CSSの変数（カスタムプロパティ）便利な使い方を詳しく解説

CSS数学関数

CSS数学関数は現在、calc()、min()、max()、clamp()の4つがあります。
calc()はよく使うと思いますが、min()、max()、clamp()は聞いたことがなかった、という人もいるかもしれません。

CSS数学関数を使用すると、max-width・min-widthのような最大値・最小値の設定が、font-sizeやmarginなどでもできるようになります。
リキッドレイアウトで非常に役立ちます。

詳しい使い方については以下の記事でまとめていますので、是非ご覧ください。
CSSの数学関数を使って記述をスマートに！【calc(), min(), max(), clamp()】

さいごに

ポリフィルが用意されているものもありますが、IE非対応のCSSプロパティは思ったよりもありますよね。
今回紹介しただけで、11個もありました！
今のうちからどんなふうに使えるかな、と考えてみるのもよいのではないでしょうか。

これらのプロパティが自由に使えるようになると、IE用に別のCSSを書いておくことも必要なくなりますし、CSS変数やCSS数学関数、object-fitはコーディングをぐっと効率的にしてくれそうですね。
今は少し手間だなと思っていることも、次第に自由で便利になっていくだろうと考えるととても楽しみです！

本記事がWebに携わる皆さまのお役に立てれば幸いです。