今回はIEサポート終了に伴う、IE未対応で、すぐに実践で使えるイケてるCSSを紹介させていただきたいと思います。

背景として、マイクロソフト社が正式にInternet Explorer 11 デスクトップアプリケーションのサポートを2022年6月15日に終了することを発表。それに伴い、WordPressも2021年7月のアップデートからIE非対応を表明しました。

これまでは、IE対応のために使用出来なかったCSSをサイト内で利用出来るチャンスです。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。

写真フィルターを実装する

See the Pen by 川上 健太郎 (@kentaro-kawakami) on CodePen.

ぼかし

.bf01 h3 {
	background-color: rgba(255 255 255 / .2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

グレースケール

.bf02 h3 {
	color: #111;
	backdrop-filter: grayscale(100%);
	-webkit-backdrop-filter: grayscale(100%);
}

セピア

.bf03 h3 {
	color: #111;
	backdrop-filter: sepia(100%);
	-webkit-backdrop-filter: sepia(100%);
}

輝度

.bf05 h3 {
	backdrop-filter: brightness(160%);
	-webkit-backdrop-filter: brightness(160%);
}

コントラスト

.bf06 h3 {
	backdrop-filter: contrast(230%);
	-webkit-backdrop-filter: contrast(230%);
}

反転

.bf07 h3 {
	backdrop-filter: invert(70%);
	-webkit-backdrop-filter: invert(70%);
}

まとめて複数の値を設定

bacdrop-filter,cotrast,blurを掛け合わせることできます。

.bf04 h3 {
	color: #111;
	backdrop-filter: sepia(70%) contrast(230%) blur(5px);
	-webkit-backdrop-filter: sepia(70%) contrast(230%) blur(5px);
}

背景を透過させるCSS

See the Pen by 川上 健太郎 (@kentaro-kawakami) on CodePen.

ロゴに白背景が入っていた際、これまではPhotoshopで加工して使用していたと思いますが、CSSで非表示にできるmix-blend-mode: multiply;が便利です。画像ファイルに1行記述するだけで白背景を透過させることが出来ます。

CSS編集前画像
CSS編集後画像
<div class="blend">
	<img src="https://xn--web-oi9du9bc8tgu2a.com/wp/wp-content/uploads/2021/07/logo_bg.png" alt="logo">
</div>
.blend {
  display: grid;
  place-items: center;
	height: 100vh;
	background: url(https://xn--web-oi9du9bc8tgu2a.com/wp/wp-content/uploads/2019/12/pixta_42515690_M.jpg) no-repeat center/cover;
}

.blend img {
	mix-blend-mode: multiply;
	max-width: 300px;
	height: auto;
}

CSSのみでpng画像に影をつける

See the Pen by 川上 健太郎 (@kentaro-kawakami) on CodePen.

背景が透過したPNG画像の被写体をターゲットにして影を落とすことができます。

.image_shadow img {
	filter: drop-shadow(10px 10px 0 #c3a400);

}

影までを画像としてデザインすることが多いと思いますが、CSSで実装すると新たな表現ができると思うので知識としてストックしておくことをおすすめします。

よくある質問をdetailsで実装

See the Pen by 川上 健太郎 (@kentaro-kawakami) on CodePen.

detailssummaryを使用するとよくある質問の実装ができます。javaScriptなしで実装可能です。

<details>
  <summary>よくある質問はdetailsタグで実装しています。ここをクリックすると回答文が表示されます。</summary>
  <div class="answer">
    <p>summaryタグをクリックするとここが表示されます。JavaScriptは不要です。作業量がかなり減るので提案しやすいですね。</p>
  </div>
</details>

追従する見出し

See the Pen by 川上 健太郎 (@kentaro-kawakami) on CodePen.

position: sticky;を使うことで見出しをセクション毎に追従させることができます。

h2 {
	position: sticky;
	top: 0;
	padding: 30px 0;
	background-color: #fff;
}

position: sticky;を指定した要素を包含するブロック要素や直近の要素を基準に追従してくれるようになります。top: 0で位置を指定しています。right,bottom,leftで自由に配置することができます。

枠線を引いてすすっとズラしたテキストを実装する

See the Pen by 川上 健太郎 (@kentaro-kawakami) on CodePen.

text-strokeでテキストの縁を指定することができます。現状どのブラウザでもベンダープレフィックスが必要なので、-webkit-で記述します。

.stroke {
	-webkit-text-stroke: 2px #777;
	text-shadow: 3px 4px 0 #d8be39;
	color: rgba(0 0 0 / 0);
        display: grid;

	font-size: 100px;
        font-weight: bold;
	text-align: center;
}

-webkit-text-stroke: 2px #777;の線の太さと線の色を指定。これを分解すると以下のようになります。

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #777;

color: rgba(0 0 0 / 0);でテキストカラーを透明にし、text-shadow: 3px 4px 0 #d8be39;で黄色のテキストを実装。本来テキストのように見える部分(黄色)をテキストシャドウで表現しています。

背景の写真をテキストのかたちでクリッピングする

See the Pen by 川上 健太郎 (@kentaro-kawakami) on CodePen.

background-clip: text;は、Photoshopでよく使うクリッピングマスクをCSSのみで実装するコードです。Firefox以外はベンダープレフィックスが必要なので-webkit-も記述します。

.backgroundclip p {
  background-clip: text;
  -webkit-background-clip: text;
  background-image: url(pic.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  color: rgba(0 0 0 / 0);
  font-size: 200px;
  font-weight: 700;
  text-transform: uppercase;
}

テキストの背景に写真を指定し、クリッピングの対象をbackground-clip: text;とテキストにします。この状態でテキストカラーを透明color: rgba(0 0 0 / 0);にすることでテキスト表示範囲内が透明になり、背景の写真が表示されるようになります。

このデザインはフォントのサイズが大きく太いものを選んだ方がいいと思います。あと、背景の画像もカラフルなものにすると見た目よくなるのでおすすめです。


今回はIE非対応でモダンブラウザで使えるイケてるCSSを紹介させていただきました。今回紹介させていただいたCSSを組み込むことでデザイン性が高いウェブサイト制作の参考になれば幸いです。
今後も便利なCSSを紹介していくので楽しみにお待ちください。

PAGE TOP