IEのサポート終了後に使える便利なCSS12選

ここ数年CSSでは新たに便利なプロパティが増えてきていますが、ウェブ制作の現場では基本的にはまだIEに対応しなければいけないことが多く、それらの新しい技術は大抵使うことができませんでした。

そんななか、先日IE11のサポートを2022年6月15日に終了するとMicrosoftから発表があり、これまで使いたかったけど使えなかったCSSももうすぐ使えるようになります。そんなIEのために封印されていた便利なCSSをいくつか紹介します。サンプルを用意しているので詳しくはそちらを参照ください。

1）テキストを縁取るtext-stroke

See the Pen text-stroke by tadabi (@tadabi) on CodePen.

text-strokeを使用することでテキストの周りを縁取ることができます。

text-shadowであればIEでも使用することができていましたが、サンプルを見てもらうと分かるように縁取りの角があまり綺麗ではありませんでした。

text-strokeはtext-shadowにくらべて記述も簡潔になり表示も綺麗になるため今後はこちらが活躍しそうです。

2）文字で背景画像をくり抜くbackground-clip: text

See the Pen background-clip: text; by tadabi (@tadabi) on CodePen.

ニューヨークの画像をNEW YORKというテキストの形にくり抜いたサンプルです。

これまで画像でやっていたことがCSSだけでできるようになります。テキストなので文字に修正が入ったとしても変更が簡単で嬉しいですね。

文字色をtransparentにすることを忘れないようにしましょう。

3）スクロールに応じて要素を固定表示にすることができるposition: sticky

See the Pen position: sticky; by tadabi (@tadabi) on CodePen.

position: stickyはスクロールに応じて要素を固定することができます。
実際にサンプルを動かしてもらうと分かりやすいですがスクロールした際にページの途中にある見出しを最上部で固定するようなことが簡単にできます。

stickyの要素は兄弟関係の場合と異なるブロックにある場合で挙動が異なります。
サンプルではstickyの要素である見出しのTitle1とTitle2でHTMLの構成が違っており、Title1の見出しは兄弟関係ではなく異なるブロックにありますがTitle2の見出しは兄弟関係にあります。
兄弟関係ではない場合、stickyの要素がぶつかったときに押し上げるような動きになりますが、兄弟関係の場合は重なるような動きになります。

その動きの違いを利用したサンプルがあったので紹介します。
http://parashuto.com/playground/sticky/scroll-effect-three.html

HTMLのソースを見ると分かりますが1,2,3枚目と4,5枚目は兄弟関係なので重なりますが3枚目と4前目は兄弟関係ではないため押し上げるような動きになっています。使い方によって面白い表現ができそうです。

4）複数行のテキストに省略の三点リーダーをつけるline-clamp

See the Pen line-clamp by tadabi (@tadabi) on CodePen.

テキストが1行の場合はこれまでもtext-overflow: ellipsis;などを使用することでできていましたが複数行の場合は難しくjsが必要でした。

プラグインもいくつかあって試したこともあるのですがいろいろと計算しないといけないからか動作も結構もっさりしていた印象でした。それがline-clampに行数を指定するだけでできるようになります。

文字数ではなく行数で指定できるのでレスポンシブとの相性も良いです。
指定した行のテキストが最後までなく途中で終わっている場合には「…」はつきません。

記述はサンプルを見てもらうのが早いですがline-clampひとつではなく他のプロパティも同時に指定する必要があります。

5）フロートを解除するdisplay: flow-root

See the Pen flow-root by tadabi (@tadabi) on CodePen.

これまでfloatを解除するにはclearfixやoverflow: hiddenを使うことが多かったと思いますが、そのふたつでは地味に困る場面もありました。

例えばoverflow: hiddenは使いどころによってはshadowが切れてしまったり、clearfixは疑似要素を使うためbeforeとafterの両方を装飾のために使用できないなどです。

サンプルのようにdisplay: flow-rootを使用すれば画像についたshadowが切れることもなく、疑似要素も使わずにfloatを解除することができます。

これまで通りclearfixやoverflow: hiddenでも問題ありませんが、場合によってはdisplay: flow-rootを使うほうがよい場面もあるので選択肢の一つとして知っておくと便利です。

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

See the Pen object-fit by tadabi (@tadabi) on CodePen.

横幅と高さを指定した枠にいい感じに収まるように画像を表示したい場合、これまでは背景画像を使用することが多かったと思いますがobject-fitを使用することでimgタグでも簡単にできるようになります。

object-fitに指定できる値はいくつかありますが大抵の場合はcoverを使用することが多いのではないかと思います。
object-positionを指定すれば画像の表示位置を指定することもできます。

サンプルの一番下にも書いていますが今までは同じようなことをやろうとすると、imgに親要素を追加してそこに大きさを指定したうえでoverflow: hiddenを使って枠外を非表示にし、画像はabsoluteで中央に持ってきて…など面倒な方法で実装していましたがそれが1行で済むためかなり楽になりますね。

7）flexの子要素間の余白を指定するgap

See the Pen gap by tadabi (@tadabi) on CodePen.

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

今までは子要素に対してmargin-rightやmargin-bottomを指定して余白をつけ、一番端にくる要素の余白を打ち消すために:nth-child(◯n)などでmarginを0に上書きすることが多かったと思いますがgapを使用することでその必要がなくなります。

8）要素を重ねたときの見え方を設定できるmix-blend-mode

See the Pen mix-blend-mode by tadabi (@tadabi) on CodePen.

mix-blend-modeでは要素を重ねたときの見え方を設定することができます。
言葉では説明が難しいのですが例えばmix-blend-mode: multiplyではphotoshopなどのデザインツールでいうところの乗算が表現できるようになったという感じでしょうか。

例えばサンプル1つ目のような半透明の黄色い帯を再現しようとするとき、半透明＝opacityと思って指定すると2つ目のような黄色になってしまい、思ってたのと違う・・・となるのですが、mix-blend-modeを使うことで1つ目のような半透明の黄色い帯を表現できるようになります。

mix-blend-modeにはmultiply以外にも暗い効果が得られるものや明るい効果が得られるものなどたくさんあります。

注意点としてmix-blend-modeは指定した要素だけでなくその子要素にも効いてしまうためサンプルではテキストの色に影響が出ないように帯とテキストのソースを分けています。

9）画像の被写体に対して影をつけるfilter: drop-shadow

See the Pen drop-shadow by tadabi (@tadabi) on CodePen.

通常、box-shadowなんかで影をつけようとしても被写体ではなく画像に対して影がついてしまうため四角い影になってしまうのですが、filter: drop-shadowを使用することで被写体の形に沿った影をつけることができるようになります。

filterにはdrop-shadowの他にもぼかしを入れるblurやグレースケールにするgrayscaleなどがあるので手軽に画像を加工することができます。

10）要素の切り抜きができるclip-path

See the Pen clip-path by tadabi (@tadabi) on CodePen.

clip-pathでは座標を指定することでクリッピング領域を作成することができます。
サンプルのように矩形にクリッピングするpolygonでは左上を基準にx軸とy軸の値を複数指定して形を生成します。

サンプルは画像ですがdivなどでも同様に切り抜けます。

いろんな形に切り抜くことができるのですが手作業で一つ一つ座標を指定するのは大変なので便利なジェネレーターを使いましょう。
https://bennettfeely.com/clippy/

11）簡単な円グラフを作れるconic-gradient

See the Pen conic-gradient by tadabi (@tadabi) on CodePen.

線形グラデーションを作成するときに使うlinear-gradientの仲間で中心点の周りを回りながら色が変化する放射グラデーションを生成することができます。

サンプルのように色の境目をくっきりつけて丸くすることで円グラフのような表現もできます。

12）CSSで変数を扱えるvar

See the Pen var by tadabi (@tadabi) on CodePen.

カスタムプロパティとも呼ばれるCSSの変数です。

サンプルのように変数名の頭にダブルハイフンをつけて値を定義して、定義した変数を使用するときにはvar()のなかに変数名を指定して呼び出します。

:root内に書くことでどこでも使用できるグローバル変数として定義することができます。

Sassでも変数を扱えますが少し違いがあって、 Sassではメディアクエリー内で変数を定義することができませんがCSSの変数ではメディアクエリ内でも変数を定義することができます。

サンプルでは画面幅によって異なる背景色を定義していてブラウザの幅を変更すると背景色が変わることが分かると思います。

ちなみに変数名は大文字と小文字で別物として認識されるので注意が必要です。

以上、IEのサポート終了後に使える便利なCSS12選でした。
ほかにもあるのですが今回はここまでとしておきます。2022年6月15日が待ち遠しいですね。

おしまい。