Refactor keyboard shortcut notation (#633)

chvmvd · web-flow · commit c063361db430 · 2023-12-08T10:49:28.000+09:00
diff --git a/docs/1-trial-session/02-html/index.mdx b/docs/1-trial-session/02-html/index.mdx
@@ -13,7 +13,7 @@ Web 開発に必ず用いられる言語があります。<Term>**HTML**</Term>
 
 ## <Term>HTML</Term> を書き始める
 
-VS Code の画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー ( `command / Ctrl + S` ) を用いてください。
+VS Code の画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) ) を用いてください。
 
 ```html title="index.html"
 <!doctype html>
@@ -76,13 +76,13 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
 </html>
 ```
 
-繰り返しになりますが、<Term>HTML</Term> を編集したら、`command / Ctrl + S` キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
+繰り返しになりますが、<Term>HTML</Term> を編集したら、<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
 
 ![ファイルを保存する](./save-file.png)
 
 :::tip[ショートカットキー]
 
-ショートカットキーがうまく押せませんか？ `command / Ctrl + S` はよく、「`command (macOS)` または `Ctrl (Windows)` キーと `S` キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。`command / Ctrl` キーを押した後、キーから指を離す前に `S` キーを押しましょう。
+ショートカットキーがうまく押せませんか？ <kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) はよく、「<kbd>command</kbd> (macOS) または <kbd>Ctrl</kbd> (Windows) キーと <kbd>S</kbd> キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。<kbd>command</kbd> (macOS) / <kbd>Ctrl</kbd> (Windows) キーを押した後、キーから指を離す前に <kbd>S</kbd> キーを押しましょう。
 
 ショートカットキーを使いこなせるようになると、パソコンの操作速度が飛躍的に上昇します。慣れている人がパソコンを操作しているのを見たら、ぜひ後ろから覗き込んでみましょう。便利そうなショートカットキーを使っている人がいたら身に付けるようにすると良いです。
 
diff --git a/docs/2-browser-apps/01-inspector/index.mdx b/docs/2-browser-apps/01-inspector/index.mdx
@@ -15,7 +15,7 @@ Google Chrome 以外のブラウザにも開発者ツールは搭載されてい
 
 :::
 
-開発者ツールは、`command (Ctrl) + option (Shift) + I` キーを押すことにより起動できます。
+開発者ツールは、<kbd>command</kbd> + <kbd>option</kbd> + <kbd>I</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> (Windows) キーを押すことにより起動できます。
 
 ![開発者ツールを起動した様子](open-inspector.png)
 
diff --git a/docs/3-web-servers/02-node-js/index.mdx b/docs/3-web-servers/02-node-js/index.mdx
@@ -17,7 +17,7 @@ VS Code 内蔵のターミナルを起動させるには、メニューの `Term
 
 :::tip[コマンド パレット]
 
-VS Code の**コマンド パレット**は、現在 VS Code 上で使用できる全ての機能を一覧表示する機能です。`command / Ctrl + Shift + P` キーを押すことにより起動できます。
+VS Code の**コマンド パレット**は、現在 VS Code 上で使用できる全ての機能を一覧表示する機能です。<kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) キーを押すことにより起動できます。
 
 次の画像は、コマンド パレットを用いて新しいターミナルを作成する例です。コマンド パレットを使用することで、ショートカットキーを知らなくても、キーボードのみで VS Code が操作できるようになります。
 
diff --git a/docs/3-web-servers/04-server/index.mdx b/docs/3-web-servers/04-server/index.mdx
@@ -55,7 +55,7 @@ node main.mjs
 
 :::warning[Web サーバーの停止]
 
-このプログラムは、一度起動すると停止しません。サーバーにとって、クライアントからのリクエストはいつやってくるかわからないため、常に起動し続けている必要があるからです。Node.js プログラムを終了するには、ターミナル上で `Ctrl + C` を押します。
+このプログラムは、一度起動すると停止しません。サーバーにとって、クライアントからのリクエストはいつやってくるかわからないため、常に起動し続けている必要があるからです。Node.js プログラムを終了するには、ターミナル上で <kbd>control</kbd> + <kbd>C</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>C</kbd> (Windows) を押します。
 
 :::
 
diff --git a/docs/3-web-servers/09-git-github-init/index.mdx b/docs/3-web-servers/09-git-github-init/index.mdx
@@ -146,7 +146,7 @@ VS Code 標準の機能だけでも多くのことができますが、より便
 
 ### [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
 
-コマンドパレット(`command / Ctrl + Shift + P`)に `Git Graph: View Git Graph (git log)` というメニューが出て見やすい
+コマンドパレット (<kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) ) に `Git Graph: View Git Graph (git log)` というメニューが出て見やすい
 
 ![GitGragh](./gitGraph.png)
 
diff --git a/docs/3-web-servers/10-git-github/index.mdx b/docs/3-web-servers/10-git-github/index.mdx
@@ -121,7 +121,7 @@ git commit -m "コミットメッセージ"
 
 <video src={secondCommitVideo} muted autoPlay loop controls />
 
-これにより、2 つ目のコミットが作成されました。コミットの履歴を確認するために、先ほどインストールした `Git Graph` 拡張機能を起動してみましょう。`command / Ctrl + Shift + P` キーを押してコマンドパレットを開き、`Git Graph: View Git Graph (git log)` を選択します。
+これにより、2 つ目のコミットが作成されました。コミットの履歴を確認するために、先ほどインストールした `Git Graph` 拡張機能を起動してみましょう。<kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) キーを押してコマンドパレットを開き、`Git Graph: View Git Graph (git log)` を選択します。
 
 <video src={showGitHistoryVideo} muted autoPlay loop controls />
 
diff --git a/docs/4-advanced/02-bundler/index.mdx b/docs/4-advanced/02-bundler/index.mdx
@@ -71,7 +71,7 @@ Vite 内蔵のウェブサーバーが起動し、`http://localhost:5173/` で
 
 ## Vite の仕組み
 
-Vite の挙動を理解するため、`Ctrl + C` で先ほど起動させたウェブサーバーを停止させ、`npm run build` コマンドを実行してみましょう。
+Vite の挙動を理解するため、<kbd>control</kbd> + <kbd>C</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>C</kbd> (Windows) で先ほど起動させたウェブサーバーを停止させ、`npm run build` コマンドを実行してみましょう。
 
 ```shell
 $ npm run build
diff --git a/docs/5-team-development/01-git-workflow/index.mdx b/docs/5-team-development/01-git-workflow/index.mdx
@@ -75,7 +75,7 @@ HEAD が `master` ブランチを指している状態で、コミットを行
 
 :::tip[Git 標準のエディタ]
 
-コマンドラインからコミットを作成する際、`-m` オプションを指定しなかった場合、コミットメッセージを編集するためのエディタが起動します。このエディタは自分で設定することができますが、上の例では [nano](https://www.nano-editor.org/) が起動しており、この場合は `Ctrl + X` で終了します。
+コマンドラインからコミットを作成する際、`-m` オプションを指定しなかった場合、コミットメッセージを編集するためのエディタが起動します。このエディタは自分で設定することができますが、上の例では [nano](https://www.nano-editor.org/) が起動しており、この場合は <kbd>control</kbd> + <kbd>X</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>X</kbd> (Windows) で終了します。
 
 環境によっては [Vim](https://www.vim.org/) が起動する場合があります。この場合は、`:q` を入力して `Enter` を押下することにより終了できます。
 
