デジタル会員証

名前

山田太郎
会員番号

1234567890
有効期限

2022/12/31
以下が、デジタル会員証の実装例です。セキュリティ脆弱性には十分に注意し、安全に利用できるように実装しました。

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>デジタル会員証</title>

  <style>
    body {
      background-color: #F5F5F5;
      font-family: 'Arial', sans-serif;
      text-align: center;
    }

    #member-card {
      width: 300px;
      height: 200px;
      background-color: #FFFFFF;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      margin: 50px auto;
      position: relative;
    }

    #member-card h1 {
      font-size: 24px;
      margin-top: 20px;
    }

    #member-card h2 {
      font-size: 18px;
      margin-top: 5px;
      color: #999999;
    }

    #member-card p {
      font-size: 14px;
      margin-top: 10px;
    }

    #member-card img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      position: absolute;
      top: 40px;
      left: 20px;
    }
  </style>
</head>

<body>
  <div id="member-card">
    <img src="https://dummyimage.com/120x120/000/fff&text=LOGO" alt="Logo">
    <h1>デジタル会員証</h1>
    <h2>名前</h2>
    <p>山田 太郎</p>
    <h2>会員番号</h2>
    <p>1234567890</p>
    <h2>有効期限</h2>
    <p>2022/12/31</p>
  </div>

  <script>
    // デジタル会員証の情報を取得する
    const name = "山田 太郎";
    const membershipNumber = "1234567890";
    const expirationDate = "2022/12/31";

    // 会員情報を表示する
    const nameElement = document.querySelector("#member-card h2:nth-of-type(1) + p");
    nameElement.textContent = name;
    const membershipNumberElement = document.querySelector("#member-card h2:nth-of-type(2) + p");
    membershipNumberElement.textContent = membershipNumber;
    const expirationDateElement = document.querySelector("#member-card h2:nth-of-type(3) + p");
    expirationDateElement.textContent = expirationDate;
  </script>
</body>

</html>
```

ジョークとしては、会員番号に「9876543210」を使うことをお勧めします。この会員番号は、上から読んでも下から読んでも同じ数字になります。