ボタンクリックで色が変わるデモをHTML,CSS,JavaScriptで作成!【Web開発基本】

今回の記事では、HTML,CSS,JavaScriptで作成したボタンをクリックするだけで背景色が変わるデモを紹介します。

実際の表示

PR

「色を変える」ボタンを押してみてください。するとボタンを押す度に背景の色が変わります。

カラーコード: #ffffff

RGBAカラー: rgba(255, 255, 255)

ソースコード例

<div id="button-wrapper">
	<button id="changeColor">色を変える</button>
</div>
<p id="hexColor">カラーコード: #FFFFFF</p>
<p id="rgbColor">RGBAカラー: rgba(255, 255, 255)</p>
#button-wrapper {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin: 40px auto;
    text-align: center;
}
button {
    margin-top: 20px;
    padding: 10px 15px;
    font-size: 16px;
    background-color: #696969;
    color: #fff;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: #575757;
}
document.getElementById('changeColor').addEventListener('click', function() {

	const randomColor = Math.floor(Math.random()*16777215);
	const hexColor = "#" + randomColor.toString(16).padStart(6, '0');
	const r = (randomColor >> 16) & 255;
	const g = (randomColor >> 8) & 255;
	const b = randomColor & 255;
	const rgbColor = `rgb(${r}, ${g}, ${b})`;

	document.getElementById('button-wrapper').style.backgroundColor = hexColor;
	document.getElementById('hexColor').textContent = "カラーコード: " + hexColor;
	document.getElementById('rgbColor').textContent = "RGBカラー: " + rgbColor;
});

まとめ

今回は、ボタンをクリックするだけで背景色が変わるデモをHTMLとCSSでJavaScriptで作成しました。ソースコードをマスターすることでWeb開発のスキルが向上すると思いますのでぜひ実践してみてください!

>お問い合わせはこちら

お問い合わせはこちら