【CSS】ホワイトボードを表現【javascript】HTMLを生成

HTML

   <div class="whiteBoard">
    <div class="waku">
      <ol>
        <li>任意の文字列</li>
        <li>任意の文字列</li>
        <li>任意の文字列</li>
      </ol>
    </div>
  </div>

CSS

ホワイトボード本体

  .whiteBoard {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: gray;
    margin: 20px;
    padding: 20px;
    border-radius: 20px;
  }
  .waku {
    position: relative;
    width: 90%;
    min-height: 210px;
    background: rgb(248, 248, 248);
    border-top: 8px solid #333;
    border-right: 8px solid #333;
    border-left: 8px solid #333;
    border-radius: 10px 10px 0 0;
    padding: 20px 40px;
    padding-bottom: 5%;
  }
  .uke {
    position: relative;
    width: 95%;
    height: 20px;
    background: rgb(194, 194, 194);
    border-top: solid 2px #333;
    border-left: solid 5px #333;
    border-right: solid 5px #333;
    border-bottom: solid 5px #333;
    border-radius: 0 0 10px 10px;
  }
  .uke::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    width: 3%;
    height: 5px;
    background: #333;
  }
  .uke::after {
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 3%;
    height: 5px;
    background: #333;
  }

箇条書き部分

  ol {
    counter-reset: number-ol;
  }
  li {
    position: relative;
    width: 95%;
    list-style: none;
    color: #333;
    margin-bottom: 1em;
  }
  ol li::before {
    counter-increment: number-ol;
    content: counter(number-ol);
    position: absolute;
    top: 1px;
    left: -25px;
    background: #ff0000;
    font-size: 14px;
    color: #fff;
    border-radius: 50%;
    line-height: 20px;
    width: 20px;
    text-align: center;
    text-indent: 0;
  }

参考

【CSS】リスト番号を自動で表示する方法

黒板消し、ペン

  .keshi {
    position: absolute;
    bottom: 10px;
    right: 10%;
    background: orange;
    width: 80px;
    height: 20px;
    border-radius: 15px 15px 0 0;
  }
  .keshi::before {
    content: "";
    position: absolute;
    bottom: -60%;
    right: 0;
    width: 100%;
    height: 60%;
    background: green;
  }
  .keshi::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 30%;
    height: 100%;
    background: rgb(161, 67, 0);
  }
  .pen {
    position: absolute;
    top: 135px;
    right: 10px;
    width: 10px;
    height: 60px;
    background: blue;
    border-radius: 0 0 3px 3px;
    transform: rotate(-10deg);
  }
  .pen::before {
    content: "";
    position: absolute;
    top: -21px;
    width: 2px;
    border-left: 4px transparent solid;
    border-right: 4px transparent solid;
    border-bottom: 20px solid #333;
  }

参考

疑似要素のafterとbeforeで文字の前後に文字や記号をを追加する方法

マグネットと光

  .mag-blue,
  .mag-yellow,
  .mag-red {
    position: absolute;
    background: blue;
    top: 10px;
    right: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  .mag-yellow {
    top: 45px;
    background: rgb(202, 202, 0);
  }
  .mag-red {
    top: 80px;
    background: red;
  }
  .mag-light {
    position: absolute;
    width: 10px;
    height: 5px;
    background: #fff;
    transform: rotate(-40deg);
    border-radius: 30%;
    filter: blur(2px);
  }
  .light1 {
    width: 7px;
    height: 3px;
    top: 17px;
    left: 3px;
  }
  .light2 {
    top: 11px;
    left: 2px;
  }
  .light3 {
    top: 8px;
    left: 3px;
  }
  .light3 {
    top: 7px;
    left: 4px;
  }
  .light4 {
    top: 5px;
    left: 12px;
  }
  .mag-blue .light5,
  .mag-yellow .light5,
  .mag-red .light5 {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20%;
    left: 18%;
    border-radius: 50px;
    filter: blur(2px);
  }
  .mag-blue .light5 {
    background: blue;
  }
  .mag-yellow .light5 {
    background: rgb(202, 202, 0);
  }
  .mag-red .light5 {
    background: red;
  }

レスポンシブ

  @media (max-width: 480px) {
    .whiteBoard{
      margin: 20px 5px;
    }
    .waku {
      padding: 10px 20px 10px 30px;
    }
    li {
      font-size: 14px;
    }
    .mag-blue,
    .mag-yellow,
    .mag-red {
      transform: scale(0.5);
    }
    .mag-yellow{
      top: 30px;
    }
    .mag-red{
      top: 50px;
    }
    .pen {
      top: 80px;
      transform: rotate(-10deg) scale(0.5);
    }
  }

javascript

HTMLを生成する関数

  function setHtml(a, b) {
    const pen = document.createElement("pen"),
      keshi = document.createElement("div"),
      mag1 = document.createElement("div"),
      mag2 = document.createElement("div"),
      mag3 = document.createElement("div"),
      uke = document.createElement("div");
    pen.classList.add("pen");
    keshi.classList.add("keshi");
    mag1.classList.add("mag-blue");
    mag2.classList.add("mag-yellow");
    mag3.classList.add("mag-red");
    uke.classList.add("uke");

  for (let i = 0; i < 3; i++) {
    if (i == 0) {
        magLight(mag1);
      }
      if (i == 1) {
        magLight(mag2);
      }
      if (i == 2) {
        magLight(mag3);
      }
    }

  a.appendChild(keshi);
  a.appendChild(pen);
    a.appendChild(mag1);
    a.appendChild(mag2);
    a.appendChild(mag3);
    b.appendChild(uke);
  }
        

マグネットの光沢を表現する要素を生成する関数

  function magLight(obj) {
    for (let j = 0; j < 5; j++) {
      const light = document.createElement("div");
      light.classList.add("mag-light", `light${j + 1}`);
      obj.appendChild(light);
    }
  }

HTMLをn個分生成

  const whiteBoard = document.querySelectorAll(".whiteBoard"),
    waku = document.querySelectorAll(".waku");
  
  for (let i = 0; i < whiteBoard.length; i++) {
    setHtml(waku[i], whiteBoard[i]);
  }