目次
概要
この投稿では、HTMLとCSS gridプロパティで作成した、日本語配列と英語US配列のWindows PC向けキーボードの模型を紹介します。
JavaScriptは使っていません。
はじめに
この模型を作成した目的は、当ブログの投稿「【図解】アットマーク＠が打てない時の解決方法。記号配置が違う英語USと日本語キーボードの見分け方 」にて、日本語配列と英語US配列キーボードのアットマーク(＠) などの記号キーの配置の違いを図解で説明するためです。
全6パターンの模型を用意しました。
そのあとに要件定義、開発言語、開発環境を記載しています。
CSS gridで作成したPCキーボードの模型 一覧
模型のサイズ上、閲覧はPCでの広い画面、スマホでは画面を横にすることをおすすめします。
操作できること
- キーをクリックすると、押したような見た目になります。
- Shiftキーをクリックすると、Shiftキーとの組合わせ入力可能になる記号を強調表示します。
- 最上段の説明文エリアをクリックすると、キーのバックライトが光ります。
日本語配列。フル。外観ベーシック
ナビゲーションキー、カーソルキーも備えたスタンダードな配列のテンキー付きキーボードです。
オーソドックスな外観のキーボードを再現しました。
|
ONK BlogCSS gridによるWindows PCキーボード模型： 日本語配列 フル 外観ベーシック
⇧Shift⇧ShiftEnter↵半角/全角!1ぬ"2ふぁ#3あぅ$4うぇ%5えぉ&6おゃ'7やゅ(8ゆょ)9よを0わ=−ほ~^へ|¥ーBackspaceTab⇤⇥QたWてEいRすTかYんUなIにOらPせ`@゛「{[゜Caps LockAちSとDしFはGきHくJまKのLり+;れ*:け」}]むっZつXさCそVひBこNみMも、<,ね。>.る・?/め_\ろCtrlWinAlt無変換Space変換カタカナひらがなAltAppCtrl
Esc
F1F2F3F4
F5F6F7F8
F9F10F11F12
PrintScreenScrollLockPause
Num LockCaps LockScroll Lock
NumLock/*−+Enter7Home8↑9Pg Up4←56→1End2↓3Pg Dn0Ins.Del
|
日本語配列。テンキーレス。外観ベーシック
フルキーボードからテンキーエリアを外しました。
|
ONK BlogCSS gridによるWindows PCキーボード模型： 日本語配列 テンキーレス 外観ベーシック
⇧Shift⇧ShiftEnter↵半角/全角!1ぬ"2ふぁ#3あぅ$4うぇ%5えぉ&6おゃ'7やゅ(8ゆょ)9よを0わ=−ほ~^へ|¥ーBackspaceTab⇤⇥QたWてEいRすTかYんUなIにOらPせ`@゛「{[゜Caps LockAちSとDしFはGきHくJまKのLり+;れ*:け」}]むっZつXさCそVひBこNみMも、<,ね。>.る・?/め_\ろCtrlWinAlt無変換Space変換カタカナひらがなAltAppCtrl
Esc
F1F2F3F4
F5F6F7F8
F9F10F11F12
PrintScreenScrollLockPause
|
日本語配列。コンパクト。外観ベーシック
ここではコンパクトと表現していますが、単純にフルキーボードからテンキーエリアとナビゲーションキーエリアを外したものです。
ノートPCに見られるShiftキーの下にカーソルキーが配置されたレイアウトを再現したものではありません。
|
ONK BlogCSS gridによるWindows PCキーボード模型： 日本語配列 コンパクト 外観ベーシック
⇧Shift⇧ShiftEnter↵半角/全角!1ぬ"2ふぁ#3あぅ$4うぇ%5えぉ&6おゃ'7やゅ(8ゆょ)9よを0わ=−ほ~^へ|¥ーBackspaceTab⇤⇥QたWてEいRすTかYんUなIにOらPせ`@゛「{[゜Caps LockAちSとDしFはGきHくJまKのLり+;れ*:け」}]むっZつXさCそVひBこNみMも、<,ね。>.る・?/め_\ろCtrlWinAlt無変換Space変換カタカナひらがなAltAppCtrl
Esc
F1F2F3F4
F5F6F7F8
F9F10F11F12
|
日本語配列。フル。外観キーキャップ側面が半透明
キーキャップの側面を半透明にし、キークリック時に、バックライトがキーキャップ側面から透過して見えるようにしたものです。
|
ONK BlogCSS gridによるWindows PCキーボード模型： 日本語配列 フル 外観キーキャップ側面が半透明
⇧Shift⇧ShiftEnter↵半角/全角!1ぬ"2ふぁ#3あぅ$4うぇ%5えぉ&6おゃ'7やゅ(8ゆょ)9よを0わ=−ほ~^へ|¥ーBackspaceTab⇤⇥QたWてEいRすTかYんUなIにOらPせ`@゛「{[゜Caps LockAちSとDしFはGきHくJまKのLり+;れ*:け」}]むっZつXさCそVひBこNみMも、<,ね。>.る・?/め_\ろCtrlWinAlt無変換Space変換カタカナひらがなAltAppCtrl
Esc
F1F2F3F4
F5F6F7F8
F9F10F11F12
PrintScreenScrollLockPause
Num LockCaps LockScroll Lock
NumLock/*−+Enter7Home8↑9Pg Up4←56→1End2↓3Pg Dn0Ins.Del
|
日本語配列。フル。外観フラット
キーボードカバー、キーキャップの陰影表現を外した外観です。
|
ONK BlogCSS gridによるWindows PCキーボード模型： 日本語配列 フル 外観フラット
⇧Shift⇧ShiftEnter↵半角/全角!1ぬ"2ふぁ#3あぅ$4うぇ%5えぉ&6おゃ'7やゅ(8ゆょ)9よを0わ=−ほ~^へ|¥ーBackspaceTab⇤⇥QたWてEいRすTかYんUなIにOらPせ`@゛「{[゜Caps LockAちSとDしFはGきHくJまKのLり+;れ*:け」}]むっZつXさCそVひBこNみMも、<,ね。>.る・?/め_\ろCtrlWinAlt無変換Space変換カタカナひらがなAltAppCtrl
Esc
F1F2F3F4
F5F6F7F8
F9F10F11F12
PrintScreenScrollLockPause
Num LockCaps LockScroll Lock
NumLock/*−+Enter7Home8↑9Pg Up4←56→1End2↓3Pg Dn0Ins.Del
|
英語US配列。テンキーレス。外観ベーシック
Enterキーの形状、アットマーク(＠)などの記号キーの配置、修飾キーの種類などが日本語配列とは異なります。
|
ONK BlogCSS gridによるWindows PCキーボード模型： 英語US配列 テンキーレス 外観ベーシック
⇧Shift⇧Shift~`!1@2#3$4%5^6&7*8(9)0_−+=Backspace←Tab⇤⇥QWERTYUIOP{[}]|\Caps LockASDFGHJKL:;"'Enter↵ZXCVBNM<,>.?/CtrlWinAltSpaceAltWinAppCtrl
Esc
F1F2F3F4
F5F6F7F8
F9F10F11F12
PrintScreenScrollLockPause
|
要件定義
キー配列
- 日本語配列
- 英語US配列
物理配列サイズ
- フル
- テンキーレス
- コンパクト(テンキーレスからナビゲーションキーを除外したもの)
外観
- ベーシック
- ベーシックのキーキャップ側面を半透明にしたもの
- フラット
操作できること
- キーをクリックすると、押したような見た目になります。
- Shiftキーをクリックすると、Shiftキーとの組合わせ入力可能になる記号を強調表示します。
- 最上段の説明文エリアをクリックすると、キーのバックライトが光ります。
物理配列サイズ毎のキー数
模型で再現するキーの物理配列とキー数は、次の製品を元にして決定しました。
参考にした製品
- 日本語配列 フル: REALFORCE 108UH
- 日本語配列 テンキーレス: REALFORCE 91U
- 英語US配列 フル: REALFORCE 104U-S
- 英語US配列 テンキーレス: REALFORCE 87U
メーカー希望小売価格 21,780円
(Win/日本語/テンキーレス/USB/標準/45g/白)
キー数
| キー配列 -> | 日本語配列 | 英語US配列 |
|---|---|---|
| フル | 108 | 104 |
| テンキーレス | 91 | 87 |
| コンパクト | 78 | 74 |
各エリア毎のキー数
キー数
| キー配列 -> | 日本語配列 | 英語US配列 |
|---|---|---|
| ESCキー | 1 | 1 |
| ファンクションキーエリア | 12 | 12 |
| ナビゲーションキーエリア | 9 | 9 |
| カーソルキーエリア | 4 | 4 |
| テンキーエリア | 17 | 17 |
| 文字入力エリア 1段目 | 15 | 14 |
| 文字入力エリア 2段目 | 13 | 14 |
| 文字入力エリア 3段目 | 14※ | 13 |
| 文字入力エリア 4段目 | 13 | 12 |
| 文字入力エリア 5段目 | 10 | 8 |
| 合計 | 108 | 104 |
※日本語配列のEnterキーは、2段目と3段目にまたがるので、ここでは3段目でキー数にカウントしました。
参考にした製品のキー数 補足説明表
サイズ：フル
| キー配列 -> | 日本語配列 | 英語US配列 |
|---|---|---|
| キーの物理配列の参考製品 | REALFORCE 108UH | REALFORCE 104U-S |
| 物理配列サイズ名 | フル | フル |
| キー数 | 108 | 104 |
| 物理配列によるキーボード名 | 日本語108キーボード | 英語104キーボード |
| Windows 11での キーボード レイアウト名称 |
日本語キーボード(106/109キー) | 英語キーボード(101/102キー) |
サイズ：テンキーレス
| キー配列 -> | 日本語配列 | 英語US配列 |
|---|---|---|
| キーの物理配列の参考製品 | REALFORCE 91U | REALFORCE 87U |
| 物理配列サイズ名 | テンキーレス | テンキーレス |
| キー数 | 91 | 87 |
| 物理配列によるキーボード名 | 日本語108キーボード | 英語104キーボード |
| Windows 11での キーボード レイアウト名称 |
日本語キーボード(106/109キー) | 英語キーボード(101/102キー) |
補足
- 108キーボードはOADG 109Aキーボードから右Windowsキーを省略したもの。
- OADG 109Aとは106キーボードにWindowsキーを2つ、アプリケーションキーを1つ足したもの。
- 英語104キーボードにとは英語101キーボードにWindowsキーを2つ、アプリケーションキーを1つ足したもの。
開発言語
マークアップ言語 HTML
スタイルシート言語 CSS
- CSSプロパティ grid
開発PC環境
OS Windows 10 Pro、Windows 11 Pro
- バージョン 作業時の最新のバージョン
テキストエディター Visual Studio Code
- バージョン 作業時の最新のバージョン
動作確認 Webブラウザー
- Google Chrome
- Microsoft Edge
作業履歴
年月日
- 2023/03/29 CSS gridによる模型作成着手。
- 2023/05/14 基本的な形が完成。2年ほど寝かせる。
- 2025/05/06 2年後、掲載のための作業再開。
- 2025/05/07 初公開。「【図解】アットマーク＠が打てない時の解決方法。記号配置が違う英語USと日本語キーボードの見分け方 」内にて日本語配列と英語配列のコンパクトサイズキーボードを掲載。
以上
東プレ REALFORCEキーボード ピックアップ
2025年05月時点の現行品から、比較的リーズナブルな静音スタンダードモデルをピックアップしました。
ただしMac向けはR3プレミアムモデルのみ販売されています。
Windows向け 日本語配列 テンキーレス
メーカー希望小売価格 23,980円
(Win/日本語/テンキーレス/USB/静音/45g/黒)
Windows向け 英語配列 テンキーレス
メーカー希望小売価格 23,980円
(Win/英語/テンキーレス/USB/静音/45g/黒)
Mac向け 日本語配列 テンキーレス
Mac向けはR3プレミアムモデルのみ販売されています。
REALFORCE R3 キーボード ハイブリッド テンキーレス 45g Mac用配列 日本語配列 ライトシルバー&スーパーホワイト R3HG21
36,520円(05/19 00:04時点)Amazonの情報を掲載しています
メーカー希望小売価格 36,520円
(Mac/日本語/テンキーレス/ハイブリッド/静音/45g/白)
Mac向け 英語配列 テンキーレス
Mac向けはR3プレミアムモデルのみ販売されています。
メーカー希望小売価格 36,520円
(Mac/英語/テンキーレス/ハイブリッド/静音/45g/白)
東プレ REALFORCE R3 / R3S カラーキーキャップ ピックアップ
2025年05月時点の現行品からピックアップしました。
カラーキーキャップセットは全キーの一括セットではなく、「タイプキー(文字キー)」、「タイプキー以外(修飾キー)」、「テンキー」の3種類に製品が分かれています。
タイプキー、タイプキー以外はさらに日本語配列と英語配列で製品が分かれています。
日本語配列と英語配列では文字キーの刻印内容や、修飾キー(Enterキー、Ctrlキー、スペースキーなど)のサイズや形状が異なるためです。
互換性
- R3 / R3S カラーキーキャップセットは R3 キーボードおよび R3S キーボード専用です。
- R2 シリーズでは一部のキーキャップが異なるため、ご使用できないキーキャップがあります。
英語配列 / 53キー（タイプキー） / かな無し
REALFORCE R3 R3S キーボード 対応 キーキャップ セット タイプキー ダークグレー 英語配列 昇華印刷 PBT M0347U
4,840円(05/19 23:20時点)Amazonの情報を掲載しています
英語配列 / 51キー（タイプキー以外） / かな無し
REALFORCE R3 R3S キーボード 対応 キーキャップ セット タイプキー以外 スーパーホワイト 英語配列 昇華印刷 PBT M0358U
7,040円(05/19 23:20時点)Amazonの情報を掲載しています
日本語配列・英語配列共通 / 21キー（テンキー） / かな無し
REALFORCE R3 R3S キーボード 対応 キーキャップ セット テンキー ダークグレー 昇華印刷 PBT M0349T
3,960円(05/19 23:20時点)Amazonの情報を掲載しています
参考
CSS グリッドレイアウト(ウェブ開発の学習 > コア学習モジュール > CSS のレイアウト)(MDNのWebサイト)
