この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。
2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。
IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。
画像・CODEPEN作成協力: emiさん
backdrop-filter:blur() を使ったぼかし表現
backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。
以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。
背景に写真を指定した .box 要素内に .blur を配置し、backdrop-filter:blur(10px); を指定しています。
その前の行の -webkit-backdrop-filter:blur(10px); は、Safariなどのためにベンダープレフィックス付きで指定しています。
background-clip を使って要素の背景の表示領域を指定
画像をご覧頂くと、背景の青い画像が要素の端の黄色い境界線まで届いていたりいなかったりという違いが分かるかと思います。
右端のTEXTのように、画像をテキストの形に切り抜くことも可能です。
linear-gradient() を使ったグラデーション
linear-gradient() は、シンプルに開始・終了色を指定してグラデーションを描くこともできますし、方向や位置を細かく指定することもできます。
画像下の横向きのグラデーションではpinkの占める面積を広くしたかったので、「70%」という指定を入れています。
repeating-linear-gradient() を使ったストライプ模様
repeating-linear-gradient() を使うと、反復線形グラデーションやストライプ模様を描くこともできます。
以下のCODEPENで、linear-gradient() とあわせたHTML・CSSサンプルがご確認頂けます。
text-shadow でおしゃれな装飾を作る
text-shadow は、一般的にはテキストの右下にぼかした影を付けるときに使用されます。
しかし、ぼかしを0にしたり色を付けることで、おしゃれな装飾を作ることもできます。
box-shadow で装飾枠を作る
text-shadow はテキストに対して影を付けるのに対し、box-shadow はdiv要素などに影を付けることができます。
ぼかしを0にしてカンマ区切りで複数指定することで、装飾枠を作ることもできます。
prefers-color-scheme でダークモードを使用しているか検出する
prefers-color-scheme は、OS等のダークモードがオンになっているかどうかで条件分岐することができます。
ダークモードとは、OSの設定でウインドウなどを暗い色、テキストを明るい色に指定したり、時間帯によって色を変えるものです。
一部のWebブラウザーでは、ブラウザーのテーマを暗い色にしたり、開発者ツールなどの設定でダークモードをオンにできます。
CODEPENでダークモードの状態を確認するには、OS等のダークモード機能をオンにしてご覧ください。
transform: rotateY() による立体的な回転
transform: rotateY() を使用すると、Y軸（縦軸）を中心に要素を立体的に回転させることができます。
この画像の例では、左の写真の .card にマウスカーソルを乗せると、右の写真の .card:hover のようにY軸（縦軸）を中心に立体的に回転し、反転した表示になります。
CODEPENでは、PCで写真にマウスカーソルを乗せると要素の回転が確認できます。
aspect-ratio で画像や動画のアスペクト比を保持する
aspect-ratio を使用すると、もとの画像や動画の縦横比に関係なく正方形に表示したい、一般的な動画やTV番組のように16:9で表示したいといったことができます。
CODEPENのサンプルでは、下2つが動画となっています。
mix-blend-mode で、要素の重なる部分の見え方を変更する
mix-blend-mode を使うと、Photoshopでレイヤーの描画モードを［乗算］［オーバーレイ］に変えるように、重なった部分の見え方を変えることができます。
CODEPENで白い領域を右クリックして［フレームを再読み込み］をクリックすると、別の写真で表示されます。
変数（カスタムプロパティ）
「サイト全体やページ全体でこの色を使いたい」「この値を使い回したい」というものがあれば、カスタムプロパティ（CSS変数やカスケード変数とも呼ばれます）で指定しておきましょう。
メインカラーやコーポレートカラーなどよく使う値を宣言しておけば、もし変更があっても1箇所の修正で済みます。
CODEPENでは :root セレクターに対してCSS変数の宣言をしています。
:root セレクターは、html セレクターとほぼ同等のものです。
13行目の green を別の色に変えてみると、変化が分かると思います。
box-sizing:border-box で計算を楽に
box-sizing:border-box を指定すると、要素の width や height に padding や border の値が含まれるようになるため、非常に計算が楽になります。
CODEPENでは親要素の中に width:50%; padding:10px の子要素を2つ並べています。
box-sizing:border-box を指定したもののみカラム落ちしていない（横に並んでいる）ことが分かるかと思います。
2021年のアンケートでは、「box-sizing:border-box を必ず指定する」+「指定する場合が多い」方の合計が約80%でした。
clip-path で画像を切り抜く
PNGやGIF画像は透過（画像の一部を透明にすること）が利用できるのに対して、JPEG画像は透過を利用できません。
しかし、clip-path を使用すると画像形式に関係なく、多角形やパス（Illustratorのペンツールで作れる形）など好きな形で切り抜くことができます。
「複雑な形のコードを自分で書くのは難しい」という方もいらっしゃると思いますが、以下の「CSS clip-path maker」などのWebアプリを使用すると簡単にコードを作ることができます。
複雑な多角形を作りたいときは、［Custom Polygon］を選択して写真上の複数箇所をクリックしてください。
transform: skewY() を使用した斜めの背景
画像を使用せず transform: skewY() を使用すると、綺麗な斜めの線を実現できるだけでなく、さまざまなデバイスに対応しやすいです。
画像の例では、section全体を-3度傾けた後、中身を3度傾けて水平に戻しています。
詳しい作り方は、以下の記事で解説しています。
