CSS で色をパーセンテージで明るく暗くする
CSS では、色をパーセンテージで明るく暗くする機能が提供されています。これにより、動的に色を調整し、ユーザーインターフェイスをよりインタラクティブにすることができます。
方法
filterプロパティを使用します。brightness()関数内でパーセンテージを指定します。
パーセンテージは、100%が元の明るさ、それより大きい値は明るくなり、小さい値は暗くなります。
例
.element {
filter: brightness(120%); /* 20% brighter */
}
このコードでは、element クラスを持つ要素の色が 20% 明るくなります。
応用例
- アニメーション
色を徐々に明るくしたり暗くしたりすることで、アニメーション効果を作成できます。 - ホバー効果
マウスオーバー時に要素の色を明るくして、ユーザーの注意を引くことができます。 - テーマ切り替え
ユーザーがダークモードやライトモードを選択した場合、色をパーセンテージで調整してテーマに合わせて表示を変更できます。
HTML
<div class="element">This is a sample text.</div>
CSS
.element {
background-color: #000000; /* 初期の色 */
filter: brightness(120%); /* 20% 明るく */
}
この例では、element クラスを持つ要素の背景色が黒に設定されています。その後、filter: brightness(120%) を使用して、色を 20% 明るくしています。
JavaScript (オプション)
const element = document.querySelector('.element');
const brightnessSlider = document.getElementById('brightnessSlider');
brightnessSlider.addEventListener('input', () => {
element.style.filter = `brightness(${brightnessSlider.value}%)`;
});
この JavaScript コードは、スライダーを使用してリアルタイムに色を調整する例です。スライダーの値が変更されると、element の filter プロパティが更新され、色もそれに応じて変化します。
HTML にスライダーを追加
<input type="range" min="0" max="200" value="100" id="brightnessSlider">
このコードでは、brightnessSlider という ID のスライダーを作成し、最小値を 0、最大値を 200、初期値を 100 に設定しています。
JavaScript でスライダーを処理
上記の JavaScript コードでは、スライダーの input イベントを監視し、スライダーの値が変更されたときに element の filter プロパティを更新しています。
opacity プロパティを使用する
opacity プロパティは、要素の透明度を設定します。値を 0 から 1 の間で指定し、0 は完全に透明、1 は完全に不透明です。これを活用して、元の色の上に透明度を低い色を重ねることで、明るくしたり暗くしたりすることができます。
例
.element {
background-color: #000000; /* 黒 */
opacity: 0.8; /* 80% 不透明 */
}
この例では、黒の背景に 80% の透明度を適用することで、暗くなります。
mix-blend-mode プロパティを使用する
mix-blend-mode プロパティは、要素の背景とコンテンツのブレンドモードを指定します。適切なブレンドモードを使用することで、色を明るくしたり暗くしたりできます。
.element {
background-color: #000000; /* 黒 */
mix-blend-mode: lighten; /* 明るくする */
}
この例では、lighten ブレンドモードを使用して、元の黒の背景を明るくします。
JavaScript で色を直接計算する
JavaScript を使用して、RGB または HSL 値を直接計算し、色を調整することができます。
const element = document.querySelector('.element');
const originalColor = 'rgb(255, 0, 0)'; // 赤
// HSL 値に変換
const hsl = hslFromRgb(originalColor);
// 明るさを調整
hsl.l += 20; // 明るさを 20% 増やす
// HSL 値から RGB 値に変換
const newColor = rgbFromHsl(hsl);
element.style.backgroundColor = newColor;
この例では、JavaScript を使用して、元の色の HSL 値を取得し、明るさを調整し、新しい RGB 値を計算して、要素の背景色を設定しています。
css colors
