IEのサポート終了に伴い、 積極的に使いたい便利なモダンCSS5選

先月6月15日にIEのサポートが終了いたしました。 これに伴い、今までIEで使用できなかった便利なモダンCSSが使用できるようになりました。

今回はそんな便利なモダンCSSの中でも特に使用頻度が高くなりそうなプロパティや機能を ピックアップして紹介したいと思います。

1.position: sticky

メインビジュアルの下にヘッダーがあるデザインの場合、
スクロールした際にヘッダー要素を一番上にくっつけ、
そのまま追従する仕様はよくありますよね。

その際に便利なのが「position: sticky」です。
今まではJSや他のpositionプロパティを使用して実装するのが一般的でしたが、
「position: sticky」を使えば、要素に指定するだけで同じ実装が可能となりました。

header{
　position:sticky;
　top:0;
}

2.gap

display: flexの子要素間の余白を指定することができます。

今までは子要素に対してmarginを指定して余白をつけ、一番端、一番下にくる要素の余白をnth-child(◯n)などで
無効にする必要がありましたが、gapを使用することでその手間が省けるようになりました。

ul{
　display: flex;
　flex-wrap: wrap;
　gap: 10px 20px; /*　li間の余白を指定 */
}

li{
　width: calc((500px - 20px * 3) / 4);
　background: #ddd;
}

3.object-fit

imgやvideoタグをどのようにトリミングするか指定できるプロパティです。
これまでこれまではackground-size: cover や containなど背景画像を使用することが多かったと思いますが、
今後はimgタグでも指定できるようになります。

また、object-positionプロパティを併用することで、トリミングする要素の表示位置を調整することも可能です。

img{
 width: 100%;
 height: 300px;
 object-fit: cover; /* 縦横の比率を維持 */
 /* object-position: left top; 表示位置の指定も可*/
}

4.filter: drop-shadow

今までのbox-shadowでは複雑な要素に対しての影が付けられませんでした。
画像に対して適用されるため四角い影になってしまいます。

しかし、filter: drop-shadowを使えば被写体に対して影を適用してくれるので、
デザインに対して自由度が増しました。

なお透過画像のみ（pngなど）に適用されるので、jpg画像では使えないことに注意してください。

img{
filter: drop-shadow(10px 10px 0 );
}

5.aspect-ratio

コンテンツ領域に対してアスペクト比を設定できるようになります。
画像やifream要素のレスポンシブ対応に非常に役に立ちます。

今までyoutubeの埋め込みに際にレスポンシブ対応させるCSSは下記でした。

.youtube{
 width:100%;
 padding-top: 56.25%;
 position: relative;
}

.youtube > iframe {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}

しかしaspect-ratioを使えばより少ないCSSで実装できます。

.youtube {
 width: 100%;
 aspect-ratio: 16 / 9; /* インラインフレームを16対9で維持 */
}

.youtube > iframe {
 width: 100%;
 height: 100%;
}

thumb_up いいね 5

いいねありがとうございます！