概要
長い間、Windows OSに標準で付いていたInternet Explorer （通称 IE）。
マイクロソフト社が2022年6月15日IEのサービス終了を発表しました。
それに伴い、多くのWebサービスを開発している企業・個人が
今までIEにも対応しないといけないからと使うのを躊躇していたCSSプロパティを
勉強しはじめたと思います。
僕もその1人です。
勉強している中で、IEのみ使えなかったCSSプロパティ
実際に業務で使えそうと思ったCSSプロパティを解説します。
Grid Layout
Grid Layoutを使うことを待ちかねていた人が多いと思います。
今まで、display: flex;でいい感じにごちゃごちゃしていたものが
display: Grid;でいい感じに書くことができます。
FlexBoxで作った場合
See the Pen Qiita - Flex by でぐぅー | Qiita (@sp_degu) on CodePen.
Grid Layoutで作った場合
See the Pen Qiita - Grid by でぐぅー | Qiita (@sp_degu) on CodePen.
こんな感じに、flexItemにwidth: calc(100% / 3 - 16px);で余白を考慮したwidthを指定したり、
.flexItem:nth-child(n + 4)で４番目以降にmargin-topをつけたりしなくて良くなります。
なんて便利なんでしょう 🎉 🎉 🎉
では具体的に、Grid Layoutはいつ使いばいいのでしょうか？
Grid Layoutとは？
Grid Layoutは、列と行を定義する水平線と垂直線の集合が交差したものをCSSで表現したものになります。
Grid Layoutの特徴は、
- 固定サイズの要素と可変サイズの要素を組み合わせたレイアウトが簡単に作成できる
- グリットに置くアイテムの位置を制御できる
- 2グリットの行と4グリットの行などを柔軟に作成することができる
- 同じグリットの中に複数のアイテムを入れることができる
の4つだと思います。
Grid Layoutの詳しい使い方は、
Qiitaで、Grid Layoutと検索してみてください。
clamp()
clamp()はcssの関数で、最小値と最大値の間を制御するプロパティです。
これを使うことで、メディアクエリを使って、サイズを調整することがclamp()１行で大丈夫になります🎉 🎉 🎉
使い方
こんな感じに指定するだけです。
.style {
width: clamp(最小値, 推奨値, 最大値);
}
サンプル
こんな感じだと有効的だと思います。
実際にCodepenでWindowsを大きくしたり小さくしたりして、確かめてください。
See the Pen Qiita - clamp by でぐぅー | Qiita (@sp_degu) on CodePen.
object-fit
object-fitは、画像や動画などの中身をどう埋め込むかを設定するプロパティです。
個人的には、はじめIE非対応だったことにおどろいたので紹介します。
使い方
<img>や<video>にこんな感じに指定するだけです。
.style {
object-fit: fill;
}
object-fitでは以下の値を指定することができます。
- fill : アスペクト比関わらず、画像が引き伸ばされ、コンテンツボックスにフィットします。
- contain : アスペクト比を維持したまま、画像が全部収まるように拡大縮小します
- cover : アスペクト比を維持したまま、コンテンツボックスにフィットするように拡大縮小します
- none : 画像は拡大縮小されずのもとのサイズで表示されます。
- scale-down : 画像がコンテンツボックスより大きい時、containの動きをします。画像がコンテンツボックスより小さい時、noneの動きをします。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。