motsu0

.sample-img {
  width: 200px;
}
/*  */
.settings {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  align-items: center;
}

motsu0

.settings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px dashed #555;
}
.number-input {
  width: 100px;
  padding: 0 2px;

motsu0

#players-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  height: 200px;
  padding: 4px;
  resize: vertical;
}
#pair-select {
  height: 2em;

motsu0

.settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
  margin: 12px 0;
}
.settings-table {
  border-collapse: collapse;
}

motsu0

const width_canvas = 400;
const height_canvas = 214;

motsu0

<div id="demo1">
  <img src="pathto/sign1.png" alt="交通標識" class="ImageSelector__option" data-value="1">
  <img src="pathto/sign2.png" alt="交通標識" class="ImageSelector__option" data-value="2">
  <img src="pathto/sign3.png" alt="交通標識" class="ImageSelector__option" data-value="3">
  <img src="pathto/sign4.png" alt="交通標識" class="ImageSelector__option" data-value="4">
  <img src="pathto/sign5.png" alt="交通標識" class="ImageSelector__option" data-value="5">
  <img src="pathto/sign6.png" alt="交通標識" class="ImageSelector__option" data-value="6">
  <img src="pathto/sign7.png" alt="交通標識" class="ImageSelector__option" data-value="7">
  <img src="pathto/sign8.png" alt="交通標識" class="ImageSelector__option" data-value="8">
  <img src="pathto/sign9.png" alt="交通標識" class="ImageSelector__option" data-value="9">

motsu0

@charset "utf-8";
.ImageSelector{
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  border: 1px solid #777;
  background-color: #fff;
  cursor: pointer;
}
.ImageSelector__display,.ImageSelector__preview,.ImageSelector__preview-child{

motsu0

<div id="sample-outer">
  <p class="sample">sample文章があります。</p>
  <p class="sample">sampleという文字だけ太字にしてみましょう。</p>
</div>

motsu0

const el_time = document.getElementById('time');

const countdown = new countDownTimer({
  element: el_time,  //カウントダウンを表示する要素
  str_date: '2100-01-02T12:00:00',  //カウントダウン目標の時刻　{YYYY}-{MM}-{DD}T{hh}:{mm}:{ss}
  is_d: true,  //bool 日を表示するか否か
  is_h: true,  //bool 時間を表示するか否か
  is_m: true,  //bool 分を表示するか否か
  is_s: true,  //bool 秒を表示するか否か
  is_ms: false,  //bool ミリ秒を表示するか否か

motsu0

/*!
 * bg-color-checkered.js v1.0
 *
 * Copyright (c) 2023 motsu
 *
 * Released under the MIT license.
 * see https://opensource.org/licenses/MIT
 */
 class bgColorCheckered{
  constructor(element, args){