COLUMN コラム

2022年6月16日をもってMicrosoft社によるInternet Explorer（以下IE）のサポートが終了となります。2021年10月にリリースされたWindowsの最新OS「Windows 11」では、すでにIE11は無効化されておりEdgeが既定のブラウザとなっています。
 
これまでIEに対応するため使用を断念してきたCSSプロパティも、今後は利用する機会が増えてくると思います。そこで今回はIEが推奨環境から外れたら使える、オススメのCSSプロパティを紹介したいと思います。

1. オススメのCSSプロパティ

1-1. mix-blend-mode

Adobe PhotoshopやIllustratorなどのレイヤーを重ねる時に設定できる合成モード（乗算やオーバーレイ）を指定できるプロパティです。
 
コーディング案件で提供されたデザインデータを確認している時、ただの透過かと思ったら「乗算」が使われていたという経験はありませんか？「mix-blend-mode」が使えない時は複数のレイヤーを一枚画像にまとめて書き出すなど工夫が必要でしたが、今後はCSSで設定できるようになります。
 

 
メインビジュアルなどの写真の上にテキストを配置するデザインも、合成モードで一工夫をするとインパクトのある表現ができます。また、白背景付きのロゴ画像も「mix-blend-mode: darken（比較（暗）」を指定すると、切り抜いたようにロゴだけを表示させることも可能です。
 
CSSで画像加工ができるプロパティなので積極的に活用していきましょう。
 

1-2. object-fit, object-position

htmlに配置したimgやvideoタグをどのようにトリミングするか指定できるプロパティです。
 
これまで画像をトリミングしたい時は、背景画像として読み込んで background-size: cover や contain で代用することが多かったと思いますが、今後はimgタグでも指定できるようになります。また、object-positionプロパティを併用することで、トリミングする要素の表示位置を調整することも可能です。合わせて活用していきましょう。
 

 

1-3. gap

gapはflexやgridでレイアウトする際の要素間の空きを一括指定するプロパティです。これまでflexで配置した子要素の余白はnth-child()やmarginを使用して調整することが多かったと思いますが、今後はgap一つで行間・縦間を指定することができます。記述するコードが減り手間も大きく省けるのでオススメです。
 
行間・列間を個別に指定したい場合は「row-gap」「column-gap」を使用しましょう。
 

 

1-4. position: sticky;

指定した要素をスクロールに応じて固定することができるプロパティです。セクションの見出しやサイドバーなど、常に固定させると邪魔だが、一定の区間では固定表示にすると便利な要素に使用すると効果的です。
 
今まではJavaScriptでの実装が必要だった挙動を、CSSだけで完結できるようになったので、面白い活用方法を思いついたらぜひ試してみましょう。

1-5. clip-path

要素を設定した領域でクリッピング（切り抜く）することができるプロパティです。
 
今まではPhotoshopで加工した画像を用意したり、CSSで疑似要素を活用して切り抜いたりしていましたが、今後は四角形、円形、楕円形、多角形といった形状の切り取りはCSSだけで完結できるようになりました。
 
ジェネレータを活用すると、さらに複雑な形状への切り抜きが簡単に作成できるので活用してみましょう。
Clippy – CSS clip-path maker

おわりに

今回はIEのサポートが終了したら使える、便利なCSSプロパティについて紹介しました。今まで使えなかったCSSプロパティが業務で使えるようになると、これからのコーディング作業も楽しみな気持ちになってきます。今回紹介したもの以外にも使えるCSSプロパティはたくさんあるので、また次の機会にでも紹介したいと思います。