経験ゼロでも、スグに使えるようになるVSCodeマニュアル


プロ用テキストエディタと思ってしまいがちなVisual Studio Code。実は私のような素人さんにも、とっても使いやすいテキストエディターということをご存じでしょうか?

というわけで、『htmlやcssの勉強をしているけど、Visual Studio Codeをまったく使ったことがない…』という経験ゼロの人でも、スグにちゃんと操作できるように、超初心者さんのVisual Studio Codeの使い方マニュアルを作成してみました。

ちょっと長いですが、このページを終わった頃には、htmlやcssの入門書で、Visual Studio Codeを使いながらすすめていくことが可能になります。ちょっと頑張ってみてください。

前準備

Visual Studio Code(以下 VSCode)の前準備として、以下の2つをしてください。

  1. VSCodeインストール & 日本語化
  2. プレビューを可能にする拡張機能 Live Preview のインストール

以下、インストールなどを説明しますね。

VSCodeインストール & 日本語化

VSCodeインストール & 日本語化については、以下の記事にまとめてあります。

Visual Stadio Codeをインストールする方法【Windows編】
Visual Stadio Codeをインストールする方法を説明しますね。日本語化も、インストール直後に、画面右下に表示されているボタンをクリックするだけで、あっという間にできてしまいます。

プレビューを可能にする拡張機能 Live Preview のインストール


htmlやcssのプレビューを可能にする拡張機能Live Previewのインストール方法は、以下のとおりです。(上の動画でも同じことやっています。)

  1. 画面左にあるアクティビティーバーより、[機能拡張]ビューをクリックし、
  2. 検索欄に live preview と入力し、
  3. 表示された機能拡張[Live Preview]を選択し、
  4. [インストール]ボタンをクリック。

では前準備がおわったので、はじめていきましょう。

作業フォルダを作成

まずhtmlやcssファイルなどを置く作業フォルダを作成します。

すでに作業フォルダがある場合は、この作業を飛ばして、次の作業フォルダを開くに進んでください。

…っと『作業フォルダって何?』というあなたはコチラをご覧ください。

ホームページを作るときの作業フォルダって? Windows編
ホームページを作るとき、「作業フォルダ」という言葉がでてきますね。でも『作業フォルダ?って』という人もいるかと思います。そこでわかりやすいように思い切った言いかたをすると…… index.htmlファイルが存在するフォルダ=作業フォル...

話を戻して、、、作業フォルダを作成していきます。


メニューバーの[ファイル] → [フォルダを開く] を選択します。

htmlやcssファイルなどを置く、作業フォルダを作成します。

私の場合は、Cドライブ直下にworkVSCフォルダを、以下の通り作成します。(上の動画でも同じことやっています。)

  1. ダイアログボックスで[新しいフォルダ]をクリックし、
  2. workVSCと入力し、
  3. Enterを押します。

作業フォルダを開く

作業フォルダを開きます。


上で作成した作業フォルダworkVSCが、[フォルダー]に表示されていることを確認し、[フォルダの選択]をクリックして開きます。


画面右上に、親フォルダworkVSCがあるのがわかります。

htmlの作成


まずはindex.htmlファイルを作成しましょう。メニューバーの[ファイル] → [新規ファイル] を選択します。


新規ファイルが、html言語で作成するファイルであるという選択を、以下のようにします。(上の動画でも同じことやっています。)

  1. 言語の選択をクリックし、
  2. html と入力し、
  3. Enterを押すと、
  4. 画面下部にあるステータスバーが、(プレーンテキストから)HTMLに変わる。

この言語の選択をすることによって、入力補助やソースコードの色分けなど、htmlをコーディングしていく上で、便利な機能が使えるようになります。


そうそう言語の選択は、画面下部の[言語モードの選択]をクリックしても、選択することが可能です。

話が少し横道にそれますが…今回はhtmlでしたが、cssの場合は、cssを選択すれば入力補助やソースコードの色分けなど、cssをコーディングしていく上で、便利な機能が使えるようになります。

話を戻して、



htmlをコーディングしていきます、

では早速、以下のように便利な入力補助を、使います。(上の動画でも同じことやっています。)

  1. html と入力すると、入力候補がでてくるので、
  2. html:5 を選択し、
  3. Enterを押すと、
  4. htmlのひな形が一気に入力できます。


ただ初期設定のままだと、lang=”en”になっています。ここでは手動でlang=”ja”に書き換えてください。

ちなみに自動で、lang=”ja”にする方法はこちらでご紹介しています。

VSCodeで、html:5と入力した時、lang="en" を lang="ja" にする方法
VSCodeで、html:5 または ! と入力し、Tabキーを押して、htmlテンプレート作成するとき、lang="ja"にする方法です 。

つづけてhtmlを入力していきましょう。

まずは、見出しのh1タグを入力しましよう。

ということで、

h と入力すると、h1~h6までの候補がでてきますので、


ここでh1が選択された状態でEnterを押すと、一気にh1の開始タグと終了タグが入力されます。


見出し1に、超初心者さんのVisual Studio Codeマニュアル と入力します。


入力を終えると、カーソルが行の途中にある状態になりますので、Ctrl + Enterで、一気に空行作成 & 行移動をしましょう。

おなじように、以下のように、いろいろなタグが、便利に入力できるので、試してみてください。

  • p を入力して、候補からpを選択し、Enterを押すと、pタグ入力
  • ul を入力して、Enterを押すと、ulタグ入力

という感じで、コーディングが終わったら、ファイルを保存しましょう。

メニューバーの[ファイル]→[名前を付けて保存]を選択してください。


ここでは index.html として保存します。


するとVSCodeのサイドバーに index.html が表示されます。

htmlをプレビュー

作成した index.html は、クリック一つで簡単にプレビューすることができます。


画面右上にあるアイコンをクリックすると、エディタ内画面右に、プレビュー画面が表示されます。(ちょっと専門的になりますが、この時点で、拡張機能Live Previewがローカル開発サーバーとして動き出します。)


さらに表示後、プレビュー表示の右上アイコンをクリックして、[Open in Browser]をクリックすると、外部ブラウザにも表示されます。

ちなみに index.html を更新した場合、ファイル保存しなくても、プレビューを更新することも可能です。


ここでは一度、ブラウザーの×と、VSCodeのプレビュータブの×をクリックして、プレビュー画面を閉じましょう。

cssの作成

次にcssファイルを新規作成して、入力し、保存していきましょう。

まずは、cssファイルを置くcssフォルダを作成しましょう。

  1. VSCodeのサイドバー上で右クリックして、
  2. [新しいフォルダー]を選択し、
  3. 入力域に css と入力し、
  4. Enterを押します。

つぎに、、、

style.cssを、以下のように作成します。(上の動画でも同じことやっています。)

  1. cssフォルダ上で、右クリックし、
  2. [新しいファイル]を選択し、
  3. 入力域に style.css と入力し、
  4. Enterを押します。


入力補助やソースコードの色分けなどを使って、@charset “UTF-8”; などを入力し、コーディングをしていきます。

ちなみに今回作成したstyle.cssでは、htmlの時のように言語の選択をしていません。しかし、ファイル名の拡張子がcssとなっていることによって、入力補助やソースコードの色分けなど、htmlをコーディングしていく上で、便利な機能が使えるようになっています。

という感じで、コーディングが終わったら、

メニューバーの[ファイル] → [保存] を選択してください。

画面分割

ここで、画面分割して、htmlとcssファイルを同時に見えるようにしましょう。


先ほど編集していたstyle.cssの右上にあるのアイコンを、クリックすると画面が分割されます。


そして、画面左側のindex.htmlのタブをクリックすると、index.htmlとstyle.cssが、同時に見れるようになります。

ということで、index.htmlに<link rel=”stylesheet” href=”style.css”>を記述しましょう。

以下のように入力補助を使うと、簡単にできます。(上の動画でも同じことやっています。)

  1. linkと入力をはじめると、入力補助がはじまるので、Enterを押し、
  2. css と入力をはじめると、入力補助がはじまるので、Enterを押し、
  3. style.cssと入力補助がはじまるので、Enterを押し、
  4. 入力完了します。


できたら、index.htmlをメニューバーの[ファイル]→[保存]をしておきましょう。

cssをプレビュー

ここでhtmlにcssが反映されているか、プレビュー表示して確認しましょう。


index.html(タブへ移動し、)画面右上にあるアイコンをクリックすると、エディタ内画面右に、プレビュー画面が表示され、cssが反映されていることがわかります。

さらにstyle.cssだけ少し変更してみると、

cssファイルを保存していないにもかかわらず、プレビュー画面に変更が反映されていることがわかります。ファイル保存しなくても、プレビューを更新することも可能なのです。


ここでは、style.cssをメニューバーの[ファイル]→[保存]をしておきましょう。

プレビュー終了

プレビューしているときには、VSCode内で動く拡張機能Live Previewのローカル開発サーバーが動いています。なので、終了するときは、そのローカル開発サーバーを停止する必要があります。


停止する方法は、以下の手順で停止します。

  1. VSCode(画面下の)ステータスバーに表示されている [Port:3000] をクリックし、
  2. (表示された)コマンドパレットからLive Preview: Stop Server を選択。


VSCode(画面下の)ステータスバーに[Port:3000]が表示されていなければ、拡張機能Live Previewのローカル開発サーバーは、停止しています。

画面分割の解除


画面分割の解除は、メニューバーの [表示] → [エディタレイアウト] →[シングル] を選択して、解除します。

まとめ

ということで、今日は、『htmlやcssの勉強をしているけど、Visual Studio Codeをまったく使ったことがない…』という経験ゼロの人でも、スグにちゃんとちゃんと操作できるように、超初心者さんのVisual Studio Codeマニュアルを作成してみました。ス

ここまでくれば、htmlやcssの入門書で、Visual Studio Codeを使いながら、すすめていくことが可能です。ぜひ活用してください!

あと『初期設定でやっておいた方がいいなぁ』と思うコトを、以下の記事でご紹介しています。それほど多くないので、よかったら時間があるときにやってみてください。

VSCodeで、html:5と入力した時、lang="en" を lang="ja" にする方法
VSCodeで、html:5 または ! と入力し、Tabキーを押して、htmlテンプレート作成するとき、lang="ja"にする方法です 。
VSCodeエディタの行を、右端で折り返す方法
Visual Studio Codeで、メニューバー[表示] → [右端での折り返し]をやっているのに、他のファイルを開いたりすると、エディタの行を、右端で折り返していない! ということがありませんか?
VSCodeで、半角スペース & TAB を表示する方法
Visual Studio Codeで、半角スペース & TAB を表示する方法の説明。なお全角スペースを表示するには、拡張機能をインストールする必要があります。
VSCodeで、全角スペースをハイライト表示する方法
Visual Studio Codeで、全角スペースをハイライト表示するには拡張機能zenkakuをインストールして、有効化します。一度有効化すれば、切り替えた状態が維持されるので、extension.jsの変更は不要です。

以下は、お好みで、設定していただければ…

VSCodeで、インデントをTabで入力したい時の設定方法
Visual Studio Codeで、インデントを、(初期設定されている)半角スペースではなく、Tabで入力する時の設定方法を説明しますね。
VSCodeのLive Previewでプレビューをブラウザに表示する方法
Visual Stadio Codeの拡張機能Live Previewで、プレビューをスグにブラウザに表示する方法を説明しますね。

コメント

タイトルとURLをコピーしました