背景・装飾

画像や動画などの置換要素がコンテナにどのようにフィットするかを制御するプロパティです。contain、cover、fill、none、scale-downの値があり、アスペクト比を維持した表示が可能です。

要素の背景色を指定するプロパティです。色名、16進数カラーコード、RGB、RGBA、HSLなど様々な色形式で指定可能です。透明度も指定でき、デザインの基礎となる重要なプロパティです。

要素の背景画像を指定するプロパティです。url()で画像を指定するほか、linear-gradient()やradial-gradient()でグラデーションも指定可能です。複数の背景画像を重ねることもできます。

背景画像のサイズを制御するプロパティです。contain（全体を表示）、cover（領域を埋める）のほか、px、%などの具体的な値でも指定できます。レスポンシブデザインで背景画像を最適に表示するために不可欠です。

背景画像の配置位置を制御するプロパティです。キーワード（top、center、bottom、left、right）や数値、パーセントで位置を指定できます。複数の背景画像それぞれに異なる位置を設定することも可能です。

要素の境界線を指定するプロパティです。幅、スタイル、色を一括設定できます。solid、dashed、dotted、doubleなど様々なスタイルがあり、個別の辺（border-top等）も指定可能です。

要素の角を丸くするプロパティです。4つの角を個別に指定できるほか、楕円形の角も作成可能です。円形のボタンやカードデザインに欠かせないプロパティで、単位はpx、%、emなど多様な値が使用できます。

要素に影を付けるプロパティです。X方向のオフセット、Y方向のオフセット、ぼかし半径、広がり、色を指定できます。複数の影を重ねることで立体的なデザインや多彩な効果を実現できます。

フォーム部品やチェックボックスなどのアクセント色を指定するプロパティです。ブラウザのデフォルトUIの色をカスタマイズでき、ブランドカラーに合わせたフォームデザインを実現できます。

リストのマーカーや記号の種類・位置・画像を指定するプロパティです。disc、circle、square、decimal、noneなどの値があり、カスタム画像も使用できます。リストデザインの基本となるプロパティです。

要素の表示領域を多角形や円形などで切り抜くプロパティです。circle()、polygon()、ellipse()などの関数で形状を指定し、マスク効果やユニークな形状のデザインを実現できます。

object-fitと組み合わせて使用し、画像や動画などの置換要素の位置を調整するプロパティです。top、center、bottom、left、right等のキーワードや%、pxで指定でき、アスペクト比を維持しながら表示位置を制御します。

要素の内容が背景とどのように混ざり合うかを指定するプロパティです。Photoshopのブレンドモードと同様の効果。

背景画像と背景色、または複数の背景画像同士のブレンド方法を指定するプロパティです。multiply、screen、overlay等の値があり、Photoshopのようなブレンド効果を実現できます。

新しいスタッキングコンテキストを作成し、ブレンドモードの影響範囲を制限するプロパティです。mix-blend-modeやbackground-blend-modeの効果を特定の要素内に封じ込めるのに使用します。

フォーム要素などのネイティブな見た目を制御するプロパティです。noneを指定することでブラウザ標準のスタイルを無効化し、カスタムスタイルを適用する際に使用します。

要素の周囲に輪郭線を描画するプロパティです。borderと似ていますが、レイアウトに影響しません。フォーカス時の視覚フィードバックに使用され、アクセシビリティの観点から重要です。