-
#01 Visual Studio Codeを使ってみよう (02:24)
- 公式サイト
- インストールの方法
- 動作確認
- ウェルカム画面
-
#02 画面構成を理解しよう (02:09)
- Activity Bar
- サイドバー
- ステータスバー
- エディタエリア
- 上部メニュー
-
#03 ファイルを編集してみよう (03:03)
- 作業用フォルダの追加
- ファイルの作成
- ステータスバーの確認
- コードの補完
- ファイルの保存
-
#04 Emmet記法を使ってみよう (02:31)
- Emmet記法
- !
- ul>li*3
-
#05 CSS､JavaScriptを読み込もう (02:05)
- link:css
- script:src
- ファイルの自動作成
- ファイル構成の確認
-
#06 CSSを編集してみよう (01:46)
- 色見本、カラーピッカー
- セレクタの例示
- コメント切り替えのショートカットキー
-
#07 JavaScriptを編集してみよう (02:15)
- コードの補完機能
- コメント切り替えのショートカットキー
- 動作確認
-
#08 設定を変更してみよう (02:43)
- 設定画面
- 自動保存
- フォント設定
- タブサイズ設定
- 半角空白の表示
- 行の折り返し設定
-
#09 コマンドパレットを使ってみよう (02:08)
- コマンドパレットの起動
- テーマの変更
- ショートカットキーの調査
-
#10 実践的なショートカットキーを使おう (02:36)
- 行の移動
- 行の複製
- 行の挿入
-
#11 マルチカーソルを使ってみよう (02:01)
- マルチカーソルの設定
- 同じ単語の選択
- 真上/真下にカーソルを追加
-
#12 検索､置換をしてみよう (02:16)
- ファイル内検索、置換
- フォルダ内検索、置換
-
#13 拡張機能を導入してみよう (02:53)
- 拡張機能の検索
- Visual Studio Codeの日本語化
- 拡張機能のインストール、アンインストール
#01 Visual Studio Codeを使ってみよう
#03 ファイルを編集してみよう
補足情報 Windowsでのフォルダの作成方法について
動画内ではmacOSを使っているので、Windowsをお使いの方はフォルダの作成方法が異なります。Windowsマシンでレッスンと同じように進めたい場合は、次のようにしてフォルダを作成してください。
- VS Codeで「Open Folder」とする
- エクスプローラーが開くので「デスクトップ」を選択する
- フォルダやファイルではないところで、右クリックする
- 「新規作成」をクリック
- 「フォルダー」をクリック
補足情報 学習しておくと良いレッスンについて
Visual Studio Codeの動作確認を行いながら、Web系の開発を進めていく手順についてもみていきます。
HTMLの基本については、以下のレッスンを参照してみてください。
- 詳解HTML 基礎文法編
https://dotinstall.com/lessons/basic_html_tags
#04 Emmet記法を使ってみよう
補足情報 !でHTMLの雛形がでない場合
VS CodeのVersion: 1.69.0以降にて「!」によるHTMLの雛形が入力できなくなったようです。かわりに「html:5」と打ってからタブキーで入力するようにしてください。
#05 CSS､JavaScriptを読み込もう
補足情報 Windowsでのショートカットキーについて
動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。
- リンク先に飛ぶ →
Ctrl + Click - サイドバーを閉じる →
Ctrl + B
補足情報 学習しておくと良いレッスンについて
CSS, JavaScriptの基本については、以下のレッスンを参照してみてください。
詳解CSS 基礎文法編
https://dotinstall.com/lessons/basic_css_styles詳解JavaScript 基礎文法編
https://dotinstall.com/lessons/basic_javascript_grammer詳解JavaScript DOM編
https://dotinstall.com/lessons/basic_javascript_dom
#06 CSSを編集してみよう
補足情報 Windowsでのショートカットキーについて
動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。
- コメントにする →
Ctrl + /
#07 JavaScriptを編集してみよう
補足情報 VS Codeでファイルのドラッグ＆ドロップができない場合
VS Codeのバージョンアップにより、index.htmlのタブをブラウザへドラッグ＆ドロップできなくなったようです。代替手段として、下図のようにサイドバーにてファイル一覧を開き、そこからドラッグ＆ドロップするようにしてください。
それでもうまくいかない場合は、Chromeブラウザを選択した状態で、WindowsならCtrlキー、macOSならcommandキーを押しながら、英語のoキーを押すと、ファイルを選択できるようになります。そこからファイルを開いても OK です。
#08 設定を変更してみよう
補足情報 Windowsにおいての注意事項
動画内で紹介している内容がWindowsだと少々異なるので、以下にまとめました。
- 設定画面を開く → SettingsはFileメニューの中にあります
- Font Size → デフォルトでFont Sizeが14なので変更が不要です
#09 コマンドパレットを使ってみよう
補足情報 Windowsでのショートカットキーについて
動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。
- コマンドパレットを開く →
Ctrl + Shift + P
#10 実践的なショートカットキーを使おう
補足情報 Windowsでのショートカットキーについて
動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。
- 行の移動 →
Alt + 上下矢印 - 行の複製 →
Shift + Alt + 上下矢印 - 次の行を挿入 →
Ctrl + Enter - 前の行を挿入 →
Shift + Ctrl + Enter
#11 マルチカーソルを使ってみよう
補足情報 Windowsでのショートカットキーについて
動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。
- クリックした箇所にカーソルを増やす →
Alt + Click - 同じ単語を選択する →
Ctrl + D - 同じ単語をいっきに選択する →
Ctrl + Shift + L - カーソルを垂直方向に増やす →
Ctrl + Alt + 上下矢印
#12 検索､置換をしてみよう
補足情報 Windowsでのショートカットキーについて
動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。
- ファイル内での検索 →
Ctrl + F - 次の検索結果に移動 →
F3 - 前の検索結果に移動 →
Shift + F3 - ファイル内での置換 →
Ctrl + H
補足情報 Windows で Visual Studio Code をインストールするには
公式サイトから「Download for Windows」をクリックすると、セットアップウィザードが開くので、手順に従ってインストールしていけばOKです。インストールの途中で細かい設定をする箇所がありますが、そのままの設定で「次へ」をクリックしていってください。インストールが完了すると、Visual Studio Codeが自動的に起動するので、レッスンどおりに進めていきましょう。