VTuber-Hiragana-Keyboard

VTuber-Hiragana-Keyboard.kbd.json

[
  {
    "name": "VTuber-Hiragana-Keyboard",
    "pcb": false
  },
  [
    "~\n`\n\nろ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l79gkgR05I6pSCM2VQUZfalk4YV0WemNwfXGzg=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "!\n1\n\nぬ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7-fE2Mhle5lvjeQCxr8ZEtufNkDuCRAg5LSkA=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "@\n2\n\nふ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7-oeSvjxgdwMoDyT1LMH8nyqkWJCZH8MAOjzg=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "#\n3\nぁ\nあ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7_OXxl-HOWIQaxDv8KNbYNQOWl6lu0hBflqnw=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "$\n4\nぅ\nう\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l78hkMOwxUQYhczGMd17aJzY2A4CqISe-mS7vw=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "%\n5\nぇ\nえ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7_F1Nm7zCNWWmeQM2gunrs46MdudkohaXv0Bg=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "^\n6\nぉ\nお\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l78s_0WRnL7hthbRZPmmLSKSCKsxM2DI9FXyAQ=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "&\n7\nゃ\nや\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7_wksW4Z4Lfy1R9eGij4skb8SIHuyqnybt5iQ=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "*\n8\nゅ\nゆ\n\n\n\n\n\n<img src=\"https://lh3.googleusercontent.com/a-/AAuE7mAiZ3LAKMencaLUcbAH3BE2fRJElq3SzGxFr3aIMQ=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "(\n9\nょ\nよ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7_oXG0uYhaWvNcgmRQq6rEurn2A_kSlD9vZBw=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    ")\n0\nを\nわ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7-YR3ZppjnCTwbgTvuZcPH6pXVfoRUlUXVZ=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "_\n-\n\nほ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l78roMKQjt4568VGVjmLkiOJ-25H9BxD_GH6QA=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "+\n=\n\nへ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l78Dn33A7SSQksXgT6zB0_k2f2ysEz0-_ZOthw=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    {
      "w": 2
    },
    "Backspace"
  ],
  [
    {
      "w": 1.5
    },
    "Tab",
    "Q\n\n\nた\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7-lb9Vclz9Civpdr-mt5XhkcrbYmMvTMWJsmA=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "W\n\n\nて\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l79lB8mLPskS4SAVmNfMXn6KgxbNT3TC48KSVw=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "E\n\n\nい\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l78PzRxSDQxi2jCtQxYT4-3GMelm5z6ydptlvw=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "R\n\n\nす\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l78BdL37eLLHY6fbvQgOoqv8ChSLw7IiQOtL=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "T\n\n\nか\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l78FuQJICv-RPUABcD2hk1jBQdYMyrfqr-oVcA=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "Y\n\n\nん\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l79T78V0-9yOApYDZHpHN7A5Fke0uJiTcEJWAg=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "U\n\n\nな\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l782oCJu4PBQ_vbJYZOaNjd6-KLZT8NLa22WDw=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "I\n\n\nに\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l79sBPFXQ15VAUqR8x_KWFsjzvBettii1WkLjA=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "O\n\n\nら\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l78nQ16SBsVIzTeummMtgtJRdNddR-v_Qs_rfQ=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "P\n\n\nせ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7-UeFrpSr0Xm45nWVoFUsuvAhRLIAv8PEgUMg=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "{\n[\n\n゛\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l79zbc_ymqkoY-GBKHyFDG8mtQwWk7p_CYW-Hg=s288-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "}\n]\n\n゜\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l78t9rPm9fS8_getCxaYZ0RjUF-KcrRNJNtBfw=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    {
      "w": 1.5
    },
    "|\n\\\n\nむ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7-zIf7VFqw2EDC3l7y_UpaxfdrAu-YEQcRGJA=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>"
  ],
  [
    {
      "w": 1.75
    },
    "Caps Lock",
    "A\n\n\nち\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l79rj4svlTtPimVkcxdUJS8VGt01u_mqZWZIbA=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "S\n\n\nと\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l79dHleIBmBtLP2TfcmFpIJjmH7fa8tfG1qTKg=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "D\n\n\nし\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7_ElOeLPWELh-w_O_LNx4MV1O_MM3pH7XNqFg=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "F\n\n\nは\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7-HFAksxujKK1d-wpknr9W3aXEFBnzFLjXjmQ=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "G\n\n\nき\n\n\n\n\n\n<img src=\"https://lh3.googleusercontent.com/a-/AAuE7mD2ZE7HAGd_M5ui8cB1EkOa3opTzcZLOY8XQKkK_Q=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "H\n\n\nく\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l79lFypl4LxY5kf60UpCL6gakgSGHtN-t8hq1g=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "J\n\n\nま\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7_MTJEH9Kn-cVznPJPBt4v0BOkmd5btoSdz6Q=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "K\n\n\nの\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l793bum2EXveeeijdp-s-7-ZSwxBrBG6pr4Ung=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "L\n\n\nり\n\n\n\n\n\n<img src=\"https://file-storage.cluster.mu/files/4af93c78-fc86-4ab0-bcf8-b569ed37c7be/d9a875c1-3c34-494a-83b0-8c251cc261e9/square.png\" width=36 height=36>",
    ":\n;\n\nれ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7-3D5YDtJI5QrNX1YZrmoITlUIRqrLHF0IJaQ=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "\"\n'\n\nけ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l79TxvYQ-QN4a_WY_ZPPv7aqs3ieMmOdmhg2jA=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    {
      "w": 2.25
    },
    "Enter"
  ],
  [
    {
      "w": 2.25
    },
    "Shift",
    "Z\n\nっ\nつ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7-_h5zNb12kC6RvqaIeU4D76RSvNkZiys12VQ=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "X\n\n\nさ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l79Vb9rz5ACtGW1YTCpnj5XFlqpwT6q1-SD7=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "C\n\n\nそ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7_owjxdxDPwl1kV2aD1BAWMCaNmN0VxD4Gzkg=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "V\n\n\nひ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7-T6iFWAa4yQhpiqfuwjsGfsugwPNvBPfvy0A=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "B\n\n\nこ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l78O3ZBZy7Z6Xvunp0VRixWSPFEP9pMUhkBODQ=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "N\n\n\nみ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l785RPlqutoAUQ2nykNkhQQY-VaREkmCLRJPxg=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "M\n\n\nも\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7_xt6g-M0Jo4GkhprbaqNWsng7z1hQFJJuuDA=s288-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "<\n,\n\nね\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l78e3OZqH3qvsFJJPD36wbTd2PxU0PVYHTjr4g=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    ">\n.\n\nる\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l7-3Dcc3AuL3_FXsiBFgOOBTuL8XUiYIWebhOA=s176-c-k-c0x00ffffff-no-rj-mo\" width=36 height=36>",
    "?\n/\n\nめ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AGF-l79SoqbF56_ySY8sHJ7MSs2DQ22TexJ8nNinTw=s288-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    {
      "w": 2.75
    },
    "Shift"
  ],
  [
    {
      "w": 1.25
    },
    "Ctrl",
    {
      "w": 1.25
    },
    "Win",
    {
      "w": 1.25
    },
    "Alt",
    {
      "a": 7,
      "w": 6.25
    },
    "",
    {
      "a": 4,
      "w": 1.25
    },
    "Alt",
    {
      "w": 1.25
    },
    "Win",
    {
      "w": 1.25
    },
    "Menu",
    {
      "w": 1.25
    },
    "Ctrl"
  ]
]

VTuber-Hiragana-Keyboard.notes.md

VTuber Hiragana Keyboard

VTuberひらがなキーボードを作りました！

VTuber-Hiragana-Keyboard.style.css

.keylabel4 {
    display: inline-block;
    position: absolute;
    z-index: 0;
}

.keylabel4 > div > img {
    border-radius: 50%;
}

.keylabel0 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel1 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel2 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel3 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel5 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel6 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel7 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel8 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}