2026-05-07

filter は「画像や要素に後からレタッチをかける」CSS版フォトショップfilter は、要素そのものにぼかし・明るさ・コントラスト・彩度・モノクロ・セピア…などの“画像加工フィルター” をかける...

backdrop-filter は「要素の後ろにある背景だけをぼかす・加工する」魔法のようなプロパティ普通の filter は「要素そのもの」をぼかしますが、backdrop-filter は “要素...

グラスモーフィズムは「背景をぼかした半透明カード」で“空気感”をデザインする技術ガラス越しに背景が見えるような、ふわっと透けて、光がにじむ UI 表現。それが「グラスモーフィズム（Glassmorph...

グラデーションボーダーは「線そのものをデザインする」テクニックボーダーは本来「1色の線」ですが、グラデーションボーダーを使うと 枠そのものが装飾要素 になります。カード、ボタン、バッジ、セクションの囲...

conic-gradient は「円を中心に色が回転する」ちょっとトリッキーなグラデーションlinear-gradient が「線」、radial-gradient が「円の広がり」だとしたら、con...

radial-gradient は「光のにじみ・スポットライト」を作る背景テクニックlinear-gradient が「線」で色を変えるのに対して、radial-gradient は “円や楕円を中心...

linear-gradient は「色を滑らかにつなぐ」背景デザインの基本背景色をただ塗るだけではなく、色と色を自然につなげて“奥行き・光・立体感”を作る のが linear-gradient() で...

rgba は「色に透明度を足す」ための最も基本で強力なテクニック背景色・ボタン・オーバーレイ・影・グラデーションなど、透明度を扱うデザイン では必ず使うのが rgba() です。初心者がつまずきやすい...

prefers-color-scheme は「ユーザーの OS 設定に自動で合わせる」ための最強ダークモード技術ダークモード対応には「ユーザーがライト/ダークを選ぶ」「OS の設定に自動で合わせる」と...

ダークモード対応は「色を切り替える」のではなく「テーマを切り替える」設計ダークモードは、単に背景を黒くするだけではありません。“ライトテーマ”と“ダークテーマ”という2つのテーマを切り替える設計 が本...

CSS変数（カスタムプロパティ）は「色・余白・フォント」を“プロジェクト全体で統一”する最強の仕組みCSS変数（custom properties）は、「値に名前をつけて再利用できる」 という、デザイ...