制作時期:05/2024
㉑
- 本番環境:https://coder-works.jpc-ltd.net/
- テスト環境:https://coder-works.jpc-ltd.net/
- サイト規模: 50ページ~
- 使用アニメーション:
- 使用CMS: その他:FREECODE
- 使用プラグイン:
- デザイン担当:テストさん

<body>
<div class="container">
<h1 class="title">Hello World!</h1>
<button id="changeColorBtn">Change Color</button>
</div>
</body>
$primary-color: #3498db;
$secondary-color: #2ecc71;
body {
font-family: Arial, sans-serif;
background-color: #ecf0f1;
margin: 0;
padding: 0;
}
.container {
text-align: center;
margin-top: 50px;
}
.title {
color: $primary-color;
}
button {
background-color: $secondary-color;
border: none;
color: white;
padding: 10px 20px;
cursor: pointer;
}
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('changeColorBtn');
button.addEventListener('click', function() {
const title = document.querySelector('.title');
if (title.style.color === 'red') {
title.style.color = '#3498db';
} else {
title.style.color = 'red';
}
});
});