制作・見積り依頼(無料)

Blogブログ

ブログのイメージ

IEのサポート終了で、ちょっとCSSが楽に。

Coding2022.06.13 : Yamamoto Naoki

まもなくサポートが終了するIE.Web界隈では待ちに待ったときがもうすぐ迎えようとしています。

IEを除外することができれば、いろいろCSSが便利になります。

1.aspect-ratio

画像を表示させるときPadding-bottom(top)でエリアを確保して、absoluteで合わせていましたが、「aspect-ratio」で横縦比を記述してwidth,heigh:100%を設定すればOKと簡単になります。

画像の位置は、「object-position」で設定で完璧です。

2.position: sticky

いままでは、polyfillの読み込みをしていましたが、なしでOK。

ちょっと癖がありますが、なれれば問題なし。

3.gap

Flexを使用時、ネガティブマージンを使っていましたが、gapでOKになります。思考的にもわかりやすく書くことできます。

4.min(), max() and clamp()

うまく活用すれば、メディアクエリ不要になります。

width: min(30%, 200px); 30%か200pxの小さい方

width: max(50%, 600px); 50%か600pxの大きい方

width: clamp(200px, 40%, 600px); 最小が200px、推奨幅が40%、最大が600px

幅だけではなく、padding、fontなどいろいろ使えます。

他にもいろいろありますので、よく使うものを紹介していきたいと思います。

お仕事のご依頼やご相談は下記より
お気軽にお問い合わせください

Tel.089-961-4166(平日 9:00〜18:00/土日祝休業)