※本文で使用する「CSS」には正確には「CSSのプロパティ」の意味合いを含むものがありますが、一般的な通用として「CSS」とまとめて表記しています。
2回に渡りIEのサポート終了に伴い使っていきたいCSSを紹介してきましたが、今回が最後となります。
前回までの記事はこちらから
IE（Internet Explorer）がサポート終了したので使っていきたい便利なCSS10選!! 【Part1】
IE（Internet Explorer）がサポート終了したので使っていきたい便利なCSS10選!! 【Part２】
今回は
・:not()
・::placeholder
・accent-color
・Filter Effects
の4つを紹介します。
IEでは使えなかった便利なCSS 10選
- 01 position:sticky （Part1で紹介済）
- 02 object-fit/object-position （Part1で紹介済）
- 03 justify-content: space-evenly （Part1で紹介済）
- 04 scroll-behavior （Part2で紹介済）
- 05 background-blend-mode （Part2で紹介済）
- 06 max-inline-size （Part2で紹介済）
- 07 :not()
- 08 ::placeholder
- 09 accent-color
- 10 Filter Effects
07 :not()
まずは:not()です。
これは擬似クラスと呼ばれるものです。
擬似クラスとはスタイルを適用したい状態を指定するものです。
::hoverなどが有名ですね。
普通のCSSは対応したclass名(セレクタ)などに常時適用されますが、擬似クラスは「ホバーした時」「クリックした時」などの状態を指定したものです。
この:not()は文字通りではありますが特定のセレクタ以外の要素にスタイルを適用したい時に使います。
括弧の中にスタイルを適用したくないセレクタを指定することで対象外にすることができます。
例えば
p{
font-size:16px;
}
と書けば全てのpタグに反映しますが、
:not(p){
font-size:16px;
}
と書けばpタグ以外の全ての要素に反映します。
:not(.hoge)のようにクラス名を指定してもいいですし、
＜p title="hoge"＞のように属性のついたテキスト以外を
:not([title])と指定することもできます。
他にも最初の要素以外という感じで:first-childのような擬似クラスと組み合わせることもできます。
h2:not(:first-child) {
margin-top: 50px;
}
li:not(:nth-child(3))こういうのも大丈夫です。
注意点もいくつかあります。
まずは複数にする際は
:not(.hoge01, .hoge02)のように書くことはできません。
この場合:not(.hoge01):not(.hoge02)と繋げて書かなくてはいけません。
また入れ子にはできません。
:not(:not(p))こういうのはできませんのでご注意ください。
この:not()を使えば、今まで「この要素だけを捕まえたいんだけど」と悩んでいた問題の解決になるかもしれませんので、覚えておいてもらえたらと思います。
08 placeholder
次はplaceholder（プレースホルダー）です。
プレースホルダーとはお問い合わせフォームなどでどういう内容を入力すべきかあらかじめフォームに入っているテキスト部分のことです。
これはもしかしたらすでに使ってあった方もいらっしゃるかもしれませんが、
プレースホルダーの色やサイズを指定できるプロパティです。
::placeholder{
color:#ccc;
font-size:12px;
}
このように記述すればプレースホルダーの色やサイズを指定できます。
フォームごとに切り分けも可能です。
これもよく使うのでぜひ使ってみてください。
09 accent-color
次はaccent-colorです。
accent-colorは新しいCSSですが、チェックボックス、ラジオボタン、スライダーなどの色を指定できます。
対象にしたいチェックボックスやラジオボタンを指定して、普通にaccent-color:#ee0;などど既述するだけで反映することができます。
デザインと合わせたい時に使えるCSSだと思います。
10 Filter Effect
Filterは画像の彩度、明度、コントラスなどを変更したり、ぼかしを加える事が出来るプロパティです。
Filterの種類としては
・brightness（明度）
・saturate（彩度）
・contrast（コントラスト）
・blur（ぼかし）
・grayscale（グレースケール）
・sepia（セピア）
など他にもいろいろあります。
表示したい写真が直接編集できなくてもCSSを当てておくことで写真にその効果を与えることができます。
クライアントが投稿する写真に一定の効果を与えたいような時に使えるかもしれません。
以上、10個のCSSをお勧めしました。
どれも実務で使用頻度の高いプロパティだと思いますので、是非とも使ってみてください！
それではまた次回にお会いしましょう！
最後まで読んでいただきありがとうございました。
