祝解禁!IEがなくなって使えるようになった便利なCSS 8選

  • このエントリーをはてなブックマークに追加

2022年6月16日、IEのサポートが切れました。フロントのエンジニアにとっての念願が叶った、記念すべき日です。IE6の頃から苦しめられてきた私ももちろんのこと浮かれています。
ただ、IEを除外することによって使用できるCSSが大幅に増え、勉強しなければならないこともまた増えました。少しずつ慣れていきましょう。

今日は使用できるようになったCSSで、頻度が高そうなものからいくつかご紹介したいと思います。

object-fit

今までは、画像をアスペクト比を維持したまま領域一杯に表示したい時は、backgroundに設定する必要がありました。object-fit を使えばimgタグとして使用できます。

今まで

divなどの要素にbackgroundを指定しました。これではSEOやアクセシビリティの観点から良くありません。

<HTML>

<CSS>

これから

imgタグに直接coverと同じ効果をかけることができます。

<HTML>

<CSS>

filter, backdrop-filter

これらを使えば、画像にぼかし、グレースケール、セピア調などの効果をかけることができます。filterはimgなどの要素に、backdrop-filterは背景画像に適用します。これらはCSSを1行追加するだけで簡単に実現できます。わざわざPhotohsopを開いて画像を加工する必要はありません。
ユーザーに画像を投稿してもらうようなサービスでは重宝するでしょう。

blur(ぼかし)、brightness(明度)、contrast(コントラスト)、grayscale(グレースケール)、saturate(彩度)、sepia(セピア)などが使用できます。

background-blend-mode

background-blend-mode を使えば、乗算やオーバーレイなどの、いわゆる「描画モード」にすることができます。これもCSSを1行追加するだけで簡単に実現できます。デザイナーに「乗算効果を使用しないでください」とメールする必要はなくなります。
multiply(乗算)、screen(スクリーン)、overlay(オーバーレイ)、soft-light(ソフトライト)などが使用できます。

var()

最近ではCSSにも変数を定義することができます。var()は冒頭で定義したCSSを呼び出す時に使用します
色を定義するときは、変数名を任意でつけます。変数名の前にはハイフンが2つ付きますので注意してください。

gap

gapプロパティは、flexboxで使用します。flexboxの各パーツ間のmarginを設定できます

今まで

最後の要素に:last-childを付けて打ち消したりしていましたが…

これから

gapプロパティを追加するだけでOKです。

line-clamp

テキストが領域外に溢れる文章量の時、末尾を「…」に置き換えて省略するものです。
今までは単行のものでしか実現できませんでしたが、複数行の場合でも末尾省略を適用できるようになります

:is()

条件を指定できる疑似クラスです。()の中にクラス名などを書き、その要素が()内の条件に一致した場合にのみ適用されるようになります。
p:is(‘.hoge’) と記した場合は、 .hoge クラスを持ったpタグに適用されます。()内には複数のクラスを含めることができるため、記述の繰り返しを減らすことができます。
反して、一致しない場合としたい場合は「:not()」の疑似クラスで除外の条件を追加できます。

今まで

カンマで区切って繋げていたと思います。

これから

conic-gradient

円錐状のグラデーションを再現できます。clip-pathなどと組み合わせると、円グラフをグラデーションで描画することができるでしょう。




執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

マークアップ

CSSを使わないSVGアニメーションの作り方【キーフレームアニメーション編】

SVG画像をアニメーションさせる時は、CSSを使用するのが一般的かと思いますが、SVGファイルに直接記述してアニメーションさせることもできます。 SMILという名前の、SVGのアニメーション機能です。IEでは使用できなかったため、使いづらかったのですが、今後は気後れすることなく使用できます。 SMILにはざっくり3種類のアニメーションがありますが、複雑なのでまずは簡単なキーフレームアニメーションから、早速試してみましょう。 目次1 静止画のSVG2 基本のアニメーション2.1 […]

スマホアプリ

【Android Studio】Androidアプリでラジオボタンの『選択時』『非選択時』のボタンの背景色と文字色を変える

Androidアプリでラジオボタンを通常のボタンのようにして、かつ『選択時』『非選択時』のボタンを変えたい…ということがあるかと思います。 そんな時はdrawableに要素を用意して、背景色や文字色に指定するだけで簡単に変更することができます。 目次1 ラジオボタンを設置2 背景色を設定3 文字色を設定 ラジオボタンを設置 それではプロジェクトを開きましょう。 とりあえずはラジオボタンを2つ設置しました。 今回はボタンぽくしたいのでラジオボタンのデフォルト要素をクリアします。 […]

スマホアプリ

【Android】Navigation Componentで簡単に画面遷移するお話

目次1 いにしえの時代のFragment間の移動2  Navagation Componentを使おう3 Activityの設定4 Safe Argsの利用5 遷移6 遷移時のアニメーション6.1 アニメーションの追加7 遷移時に値を渡す7.1 渡し方7.2 受け取り方7.3 自作クラスの値を渡す場合は?8 終わりに9 参考URL いにしえの時代のFragment間の移動 7年くらい前までであれば、Fragment間の移動はソースで記述していました。 Fragment Man […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。