カスタムプロパティの動的変更デモ

            CSS
            
:root {
    --main-color: #3498db;
    --text-color: #ffffff;
    --font-size: 16px;
    --padding-size: 20px;
    --border-radius: 10px;
    --transition-speed-normal: 0.3s;
}

body {
    text-align: center;
    padding: 20px;
}

.controls {
    margin-bottom: 20px;
}

.preview {
    background-color: var(--main-color);
    color: var(--text-color);
    padding: var(--padding-size);
    border-radius: var(--border-radius);
    font-size: var(--font-size);
    transition: background-color var(--transition-speed-normal), color var(--transition-speed-normal), font-size var(--transition-speed-normal), padding var(--transition-speed-normal), font-family var(--transition-speed-normal), border-radius var(--transition-speed-normal);
}


        

            JavaScript
            
//ページのHTML（DOM）が完全に読み込まれたら実行
document.addEventListener("DOMContentLoaded", () => {
    const root = document.documentElement;

    // メインカラーの変更
    document.getElementById("mainColorPicker").addEventListener("input", (event) => {
        root.style.setProperty("--main-color", event.target.value);
    });

    // フォントカラーの変更
    document.getElementById("textColorPicker").addEventListener("input", (event) => {
        root.style.setProperty("--text-color", event.target.value);
    });

    // フォントサイズの変更
    const fontSizeSlider = document.getElementById("fontSizeSlider");
    const fontSizeValue = document.getElementById("fontSizeValue");

    fontSizeSlider.addEventListener("input", (event) => {
        const newSize = `${event.target.value}px`;
        root.style.setProperty("--font-size", newSize);
        fontSizeValue.textContent = newSize;
    });

    // パディングの変更
    const paddingSlider = document.getElementById("paddingSlider");
    const paddingValue = document.getElementById("paddingValue");

    paddingSlider.addEventListener("input", (event) => {
        const newPadding = `${event.target.value}px`;
        root.style.setProperty("--padding-size", newPadding);
        paddingValue.textContent = newPadding;
    });

    // 角丸（border-radius）の変更
    const borderRadiusSlider = document.getElementById("borderRadiusSlider");
    const borderRadiusValue = document.getElementById("borderRadiusValue");

    borderRadiusSlider.addEventListener("input", (event) => {
        const newBorderRadius = `${event.target.value}px`;
        root.style.setProperty("--border-radius", newBorderRadius);
        borderRadiusValue.textContent = newBorderRadius;
    });

});