任意の背景色と文字色に変更できる機能

2021・05・10

＊カラーボックスをクリックして色を選択することで、ユーザーが任意で好きな文字色・背景色にすることができる機能です＊

カラーボックスをクリック（スマホ等の場合はタップ）すると、色を選択するパレットが現れて、自分の好きな色に背景色と文字色を変更できます。Webページにちょっとした遊び心を加えたいケースや、特定の色が見づらい人のためのアクセシビリティの向上に利用できます。
使用機能：CSS・JavaScript

下のカラーボックスをクリックして背景色と文字色を選んでください

背景色を選ぶ

文字色を選ぶ

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS・JavaScript

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
        <style>
        .samplecolorbox {
          font-family:"游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
          width: 70vw;
          background-color: #edcaca;
          margin: 1.5rem auto;
          display: flex;
          justify-content: center;
          box-shadow: 2px 2px 2px darkgrey;
          border-radius: 5px;
        }
        .samplecolorbox p {
          padding: 3rem;
          font-size: 0.8rem;
          line-height: 1.4;
        }
        .samplecolorchoicearea {
          display: flex;
          justify-content: center;
          font-size: 0.85rem;
        }
        .samplecolorchoicebox {
          font-family:"游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
          text-align: center;
          margin: 1rem;
        }
        .samplecolorchoicebox p {
          margin: 1.5rem;
        }
        input[type="color"] {
          -webkit-appearance: none;
          width: 60px;
          height: 40px;
          padding: 5px;
          cursor: pointer;
          background-color: white;
          border: none;
          border-radius: 5px;
          box-shadow: 0px 0px 8px darkgrey;
          color: white;
        }
        input[type="color"]:active {
          transform: translate(3px,3px);
        }
        </style>
  </head>
  <body>
    <div class="samplecolorbox">
      <p>下のカラーボックスをクリックして背景色と文字色を選んでください</p>
    </div>
    <div class="samplecolorchoicearea">
      <div class="samplecolorchoicebox">
        <p>背景色を選ぶ</p>
        <input id="samplecolor" type="color" name="" value="#edcaca">
      </div>
      <div class="samplecolorchoicebox">
        <p>文字色を選ぶ</p>
        <input id="samplefontcolor" type="color" name="" value="">
      </div>
    </div>

    <script type="text/javascript">
      {
        const choicecolor = document.getElementById('samplecolor');
        const fontchoicecolor = document.getElementById('samplefontcolor')
        const changecolorbox = document.querySelector('.samplecolorbox');
        choicecolor.addEventListener('change',function(evevt) {
          let colorvalue = event.currentTarget.value;
          changecolorbox.style.backgroundColor = colorvalue;
        });
        fontchoicecolor.addEventListener('change',function(evevt) {
          let fontcolorvalue = event.currentTarget.value;
          changecolorbox.style.color = fontcolorvalue;
        });
      }
    </script>
  </body>
</html>

« 前の記事へ次の記事へ »