XXXXXXXXXXXXXXXXX

制作時期：05/2024

㉑

本番環境：https://coder-works.jpc-ltd.net/
テスト環境：https://coder-works.jpc-ltd.net/
サイト規模： 50ページ～
使用アニメーション：
- ライトボックス
- スライダー
使用CMS：その他：FREECODE
使用プラグイン：
デザイン担当：テストさん

HTML CSS JS

<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';
              }
          });
        });