Visual Studio Codeを学ぶ。前準備編

Visual Studio Codeを学ぶ。前準備編

今回のポイント

以前の記事でVSCodeをインストールし、日本語化をしました。
インストールと日本語化については以下の記事を参考下さい。

Visual Studio Codeを学ぶ。導入編

Visual Studio Code(VSCode)使用イメージ

またVSCodeとは高機能テキストエディタでした。
テキストエディタとは、そしてメリットについては以下の記事を参考下さい。

テキストエディタについて考える。

今回は実際に、VSCodeを使用しながら解説していきます。

ファイルを作成する

ウェルカムページを閉じる

それではVSCodeを開いてみましょう。

Visual Studio Code(VSCode)ウェルカムページ

この画面はウェルカムページと言います。
次回からは表示したくはないので、「起動時にウェルカムページを表示」のチェックを外します。

Visual Studio Code(VSCode)ウェルカムページの次回非表示チェック

そしてウェルカムページを閉じます。
この時、他のタブもある場合は同じ方法で消します。

Visual Studio Code(VSCode)のウェルカムページを閉じる

すると以下のような、シンプルな画面になったと思います。

Visual Studio Code(VSCode)のデフォルト画面

ここから全てのプログラミングや、コーディングがスタートします。

ファイルを作成する

では最初にデスクトップに空のフォルダを作成しておきましょう。
フォルダ名は任意で結構です。
ちなみに私は今回、「ぱくぱくの解説ページ」と作成しておきました。

新規フォルダの作成イメージ

そしてもう一度VS Codeの画面に戻りましょう。
左側にいくつか、アイコンがあると思います。
これをアクティビティバーと呼びます。

Visual Studio Code(VSCode)のアクティビティバーイメージ

ここから先程作成した、フォルダを指定してみましょう。
一番上のエクスプローラーアイコンをクリックします。

Visual Studio Code(VSCode)のアクティビティバーのエクスプローラー選択

するとサイドバーといわれる、メニューバーが現れます。
この時現れたサイドバーは、エクスプロラーのメニューとなります。

Visual Studio Code(VSCode)のサイドバーのエクスプローラー表示イメージ

ここから先程作成したフォルダを開いていきます。
まずはサイドバー内の「フォルダーを開く」をクリックしましょう。

Visual Studio Code(VSCode)のフォルダーを開く画面

そしてフォルダを指定して「開く」をクリックします。

Visual Studio Code(VSCode)のフォルダ選択イメージ

するとサイドバー上に先程作成したフォルダが指定されたことが分かります。

Visual Studio Code(VSCode)のフォルダ指定後のイメージ

それではここから、HTMLファイルを作成していきます。
サイドバー内のフォルダ名横にある「>」をクリックします。

Visual Studio Code(VSCode)のエクスプローラー内フォルダ選択

するとこのフォルダを操作するアイコンが現れます。

Visual Studio Code(VSCode)のエクスプローラー内フォルダ選択

そしてファイル作成のアイコンをクリックします。

Visual Studio Code(VSCode)のエクスプローラー内ファイル作成

そして「index.html」と入力してエンターを押しましょう。

Visual Studio Code(VSCode)のファイル作成イメージ

これでHTMLファイルの作成は完了です。
フォルダ内に「index.html」ファイルが作成されていますか?
フォルダを開いて、ファイルが作成されたか確認しておきましょう。

ファイル作成ができているか確認イメージ

今回はVisual Studio Code(VSCode)を使用してファイルを作成しましたが、Windowsメモ帳での作成方法については、過去の記事で紹介しています。
以下の記事を参考下さい。

HTMLを書いてみよう。初心者でも分かるソースとタグ

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

テキストエディタカテゴリの最新記事