動画内ではmacOSを使っているので、Windowsをお使いの方はフォルダの作成方法が異なります。Windowsマシンでレッスンと同じように進めたい場合は、次のようにしてフォルダを作成してください。
Visual Studio Codeの動作確認を行いながら、Web系の開発を進めていく手順についてもみていきます。
HTMLの基本については、以下のレッスンを参照してみてください。
VS CodeのVersion: 1.69.0以降にて「!」によるHTMLの雛形が入力できなくなったようです。かわりに「html:5」と打ってからタブキーで入力するようにしてください。
動画内で紹介されている操作ですが、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
動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。
Ctrl + /
VS Codeのバージョンアップにより、index.htmlのタブをブラウザへドラッグ&ドロップできなくなったようです。代替手段として、下図のようにサイドバーにてファイル一覧を開き、そこからドラッグ&ドロップするようにしてください。
それでもうまくいかない場合は、Chromeブラウザを選択した状態で、WindowsならCtrlキー、macOSならcommandキーを押しながら、英語のoキーを押すと、ファイルを選択できるようになります。そこからファイルを開いても OK です。
動画内で紹介している内容がWindowsだと少々異なるので、以下にまとめました。
動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。
Ctrl + Shift + P
動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。
Alt + 上下矢印
Shift + Alt + 上下矢印
Ctrl + Enter
Shift + Ctrl + Enter
動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。
Alt + Click
Ctrl + D
Ctrl + Shift + L
Ctrl + Alt + 上下矢印
動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。
Ctrl + F
F3
Shift + F3
Ctrl + H
補足情報 Windows で Visual Studio Code をインストールするには
公式サイトから「Download for Windows」をクリックすると、セットアップウィザードが開くので、手順に従ってインストールしていけばOKです。インストールの途中で細かい設定をする箇所がありますが、そのままの設定で「次へ」をクリックしていってください。インストールが完了すると、Visual Studio Codeが自動的に起動するので、レッスンどおりに進めていきましょう。