docs(readme): modify Quick Start item

Author: SARDONYX-sard

README.md

@@ -19,6 +19,8 @@ The sample is in python, but other images are also possible.
   - [Table of Contents](#table-of-contents)
   - [Prerequisites](#prerequisites)
   - [Quick Start](#quick-start)
+    - [If you are using an editor other than VS code](#if-you-are-using-an-editor-other-than-vs-code)
+    - [VS code User](#vs-code-user)
   - [Make usage](#make-usage)
   - [Directory structure](#directory-structure)
   - [License](#license)
@@ -32,6 +34,8 @@ Required
 
   (Required to display Docker GUI on windows)
 
+- git
+
 - [Docker Desktop for Windows](https://hub.docker.com/editions/community/docker-ce-desktop-windows)
   (Build any environment with virtual containers)
 
@@ -48,12 +52,48 @@ Optional
 Otherwise, the wslg directory will not be mounted correctly and the GUI will not
 be displayed.
 
-Run the following command.
+---
+
+### If you are using an editor other than VS code
+
+Step 1: Run the following command.
 
 ```bash
-git clone
+git clone https://github.com/SARDONYX-sard/docker-wslg-gui-template.git
+cd docker-wslg-gui-template
 ```
 
+Step2: Enter the following command and then enter the container created.
+
+```bash
+make compose
+```
+
+---
+
+### VS code User
+
+Step 1: Run the following command.
+
+```bash
+git clone https://github.com/SARDONYX-sard/docker-wslg-gui-template.git
+cd docker-wslg-gui-template
+code .
+```
+
+Step 2: Click on the WSL: `<Linux name>` icon in the lower left corner.
+
+<p align="center">
+    <img src="./docs/images/WSL-button.png" alt="wsl-ubuntu"  height="300" width="800"/>
+</p>
+
+Step 3: Select the item `Reopen in Container` from the palette that appears in
+the center.
+
+<p align="center">
+    <img src="./docs/images/remote-container.png" alt="wsl-ubuntu"  height="300" width="800"/>
+</p>
+
 ## Make usage
 
 | Command             | Description                                       |
@@ -82,6 +122,7 @@ docker-wslg-gui-template
 |  └── devcontainer.json
 ├── .editorconfig
 ├── .github
+|  ├── dependabot.yml
 |  └── workflows
 |     └── ci.yml
 ├── docker

docs/i18n/jp/README.md

@@ -17,23 +17,14 @@ Docker + WSLg + devcontainer.json + Pythonのテンプレートです。
 - [Docker + WSLg GUI-Template](#docker--wslg-gui-template)
   - [概要](#概要)
   - [目次](#目次)
-  - [クイックスタート](#クイックスタート)
   - [前提条件](#前提条件)
+  - [クイックスタート](#クイックスタート)
+    - [VS code以外のエディタをお使いの場合](#vs-code以外のエディタをお使いの場合)
+    - [VS codeをお使いの場合](#vs-codeをお使いの場合)
   - [Make の使い方](#make-の使い方)
   - [ディレクトリ構造](#ディレクトリ構造)
   - [ライセンス](#ライセンス)
 
-## クイックスタート
-
-<font color=red>警告:</font> **必ずWSLのディレクトリ内で実行**してください。
-でないと正しくwslgディレクトリが正しくマウントされず、GUIが表示できません。
-
-Run the following command.
-
-```bash
-git clone
-```
-
 ## 前提条件
 
 必須
@@ -43,6 +34,8 @@ git clone
 
   (WindowsでDockerのGUIを表示するために必要)
 
+- git
+
 - [Docker Desktop for Windows](https://hub.docker.com/editions/community/docker-ce-desktop-windows)
   (仮想コンテナーによる任意の環境構築のため）
 
@@ -53,6 +46,52 @@ git clone
   - 拡張機能
     [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
 
+## クイックスタート
+
+<font color=red>警告:</font> **必ずWSLのディレクトリ内で実行**してください。
+でないと正しくwslgディレクトリが正しくマウントされず、GUIが表示できません。
+
+---
+
+### VS code以外のエディタをお使いの場合
+
+Step 1: 以下のコマンドを実行します。
+
+```bash
+git clone https://github.com/SARDONYX-sard/docker-wslg-gui-template.git
+cd docker-wslg-gui-template
+```
+
+Step2: 以下のコマンドを実行後、作成されたコンテナに入ってください。
+
+```bash
+make compose
+```
+
+---
+
+### VS codeをお使いの場合
+
+Step 1: 以下のコマンドを実行します。
+
+```bash
+git clone https://github.com/SARDONYX-sard/docker-wslg-gui-template.git
+cd docker-wslg-gui-template
+code .
+```
+
+Step 2: 左下のWSL: `<Linux name>`というアイコンをクリックします。
+
+<p align="center">
+    <img src="../../images/WSL-button.png" alt="wsl-ubuntu"  height="300" width="800"/>
+</p>
+
+Step 3: 中央に現れたパレットから`Reopen in Container`というを項目を選択します。
+
+<p align="center">
+    <img src="../../images/remote-container.png" alt="wsl-ubuntu"  height="300" width="800"/>
+</p>
+
 ## Make の使い方
 
 | コマンド                | 説明                                          |
@@ -78,6 +117,7 @@ docker-wslg-gui-template
 |  └── devcontainer.json
 ├── .editorconfig
 ├── .github
+|  ├── dependabot.yml
 |  └── workflows
 |     └── ci.yml
 ├── docker