IEサポート終了後に絶対使いたいCSS一覧

こんにちは。ヨクスル株式会社のwebデザイナー志村です。

最近は緊急事態宣言が解除されたり、総裁選があったりと世の中も少し動きがあったように思います。
仕事などで何かしらの影響が出る方もいらっしゃるでしょうか。
コロナで世の中が変わってから様々な影響を受けてきた方も多いかと思いますが、きっとこの状況も終わりに向かっていると信じています。

さて、終わりといえばWeb業界で働く人間なら誰もが喜ぶニュースが発表されました。それは

2022年6月に Microsoft 社の Internet Explorer（以下、IE）のサポートが終了するというニュースです。

IEのサポート終了により、今までサイトを構築する際にIEが対応していないという理由で使えなかった便利なCSSを使用することができるのです…！！

今回はそんな「IEサポート終了後に絶対使いたいCSS」を紹介したいと思います。

画像をトリミングしてくれる
「object-fit」

画像をトリミングしてくれるプロパティです。
高さの同じカードが並ぶレイアウトや、クライアントが更新するブログ画像など毎回手動でトリミングすることが困難な時に便利そうですね。

トリミングしてくれる「cover」とトリミングせずに画像サイズを維持してくれる「contain」が使用頻度が高そうです。

<div class="box">
  <img src="/img/test_img.jpg">
</div>


.box img {
    width: 100%;
    height: 190px;/* 高さを指定して */
    object-fit: cover;/* この一行を追加 */
 }

因みに、画像の表示位置も指定できます。

.box img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: 50% 50%;/* この一行を追加 */
 }

画像にフィルターをかける「backdrop-filter」

画像やコンテンツにフィルターをかけてくれるプロパティです。

フィルターの種類が多いので様々なシーンで活躍してくれそうです。
テキストの背景を「すりガラス風」フィルターにするデザインなんかはよく紹介されていますよね。


<div class="boxImg">
  <img src="/img/test_img.jpg">
</div>

.boxImg{
   position: relative;
}	
/* フィルターは下の要素に適応されるので擬似要素で設定 */
.boxImg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
}

・画像を重ねてブレンドする
「mix-blend-mode」

画像と画像を重ねたり、画像とテキストを重ねた時に様々な見え方を指定できるプロパティです。

例えば下の2枚を重ねてブレンドすると…

■mix-blend-mode後

<div class="box">
  <img src="/img/test_img.jpg">
  <div class="blendImg">
    <img src="/img/blend_img.jpg">
  </div>
</div>

.box{
   position: relative;
}	

.blendImg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode:	overlay;
}

他にも様々なブレンドがあるので、試してみたいですね。

通常	normal
乗算	multiply
スクリーン	screen
オーバーレイ	overlay
覆い焼き	color-dodge
焼き込み	color-burn
比較（暗）	darken
比較（明）	lighten
ハードライト	hard-light
ソフトライト	soft-light
差の絶対値	difference
除外	exclusion
色相	hue
彩度	saturation
カラー	color
輝度	luminosity

スクロールした時に要素を固定「position: sticky」

ページに追従してくる固定ヘッダーを使用する機会は多いと思いますが、
「position: sticky」はスクロールの最上部に出てきたものが固定されます。

<div class="box blockOne">
	<div class="boxItem">
		<h2 class="boxTitle">ブロック1： タイトル1</h2>
		<p>ここにテキストが入ります。</p>
	</div>
	<div class="boxItem">
		<h2 class="boxTitle">ブロック1： タイトル2</h2>
		<p>ここにテキストが入ります。</p>
	</div>
</div>
<div class="box blockTwo">
	<div class="boxItem">
		<h2 class="boxTitle">ブロック1： タイトル1</h2>
		<p>ここにテキストが入ります。</p>
	</div>
	<div class="boxItem">
		<h2 class="boxTitle">ブロック1： タイトル2</h2>
		<p>ここにテキストが入ります。</p>
	</div>
</div>
<div class="box blockThree">
	<div class="boxItem">
		<h2 class="boxTitle">ブロック1： タイトル1</h2>
		<p>ここにテキストが入ります。</p>
	</div>
	<div class="boxItem">
		<h2 class="boxTitle">ブロック1： タイトル2</h2>
		<p>ここにテキストが入ります。</p>
	</div>
</div>

.boxTitle {
    position: sticky;
    top: 0;
    color: #fff;
    padding: 10px;
    margin: 0;
 }

要素を上下左右中央揃え
「place-items: center」

今まで要素を上下左右中央揃えにする際は、「display: flex」や「position」など使用していた方が多いのではないでしょうか。
しかし、「display: flex」と「place-items: center」を使用すれば、二行だけで上下左右中央揃えが可能になります。

	<div class="box">
		<p class="boxTxt">上下左右中央揃えになります</p>
	</div>

.box {
　　width: 600px;
　　height: 200px;
　　background-color: #d9d9d9;
　　display: grid;
　　place-items: center;
 }

カードに便利！均等に配置される「display: grid」

要素を均等に配置する際に便利なgridレイアウトですが、今回はよくあるカード型のレイアウトを例に上げました。
メディアクエリ無しでいけるのがありがたいですね。

	<div class="box">
		<div class="cardItem">
			<div class="cardImg">
				<p>img</p>
			</div>
			<div class="cardTxt">
				<p>ヨクスル株式会社です...</p>
			</div>
		</div>

     ....必要な数だけ記述....

	</div>

.box {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

gap・・・余白の幅

repeat()・・・要素を繰り返す
　→repeat(3, 250px);→250pxを3回繰り返す

repeat(auto-fit | auto-fill, minmax())
　auto-fit・・・最小幅以上で余白ができないように伸縮
　auto-fill・・・最小幅以上で余白ができないように伸縮はするが、要素が全て並列になったら余白を確保する
　minmax・・・最大値と最小値
　　→minmax(250px, 400px)　最小250px・最大400px

1fr・・・残りのスペース分配する割合
　→1fr,2frなら1:2

Q&Aなどをdetailsで実装

detailsとsummaryを使用し、CSSのみでテキストを閉じたり開いたりできます。

<details>
    <summary>Q.ヨクスル株式会社の電話番号を教えてください</summary>
    <div class="answer">
      <p>A.電話番号は03-6257-1753です。</p>
    </div>
</details>

     ....必要な数だけ記述....