Visual Studio Code



ホームページ制作・編集の最強で無料ソフトウェア2026「Visual Studio Code（VS Code）」

2026年3月16日

Categories | ホームページ SEO

ここ数年自作ホームページを放置していたので、SEO兼ねたプチリニューアルを

手掛けることにしました。編集にあたり当PCには編集ソフトはいくつかインストール

してあるのですが、どれも古いものばかりでWin11では思うように動きません。

そこで新たに無料ソフト「Visual Studio Code（VS Code）」を導入することにしました。

VS Code 400x235 ホームページ制作・編集の最強で無料ソフトウェア2026「Visual Studio Code（VS Code）」

サイト：https://azure.microsoft.com/ja-jp/products/visual-studio-code

 

Visual Studio Code（VS Code）は、あらかじめ用意されたパーツを配置するツールではなく、

HTMLやCSSなどのコードを直接書いてサイトを作るための「エディタ（編集ソフト）」。

メリットとデメリットを整理しましたので、ご自身のスタイルに合うか検討してみてください。

 

VS Code2 400x239 ホームページ制作・編集の最強で無料ソフトウェア2026「Visual Studio Code（VS Code）」

Visual Studio Code のここがすごい（メリット）

  • プロと同じ環境が手に入る： 世界中のプロのエンジニアが使っているソフトが完全無料です。
  • 圧倒的な軽さと拡張性： 動作が非常に軽く、「拡張機能（プラグイン）」を追加することで、コードを自動で整えたり、スペルミスを指摘してくれたりと、自分好みにカスタマイズできます。
  • どんなデザインも自由自在： テンプレートの制約がないため、コードさえ書ければミリ単位でこだわった世界に一つだけのサイトが作れます。
  • WordPressとの相性が抜群： すでにWordPressを使われている場合、テーマの編集（PHPやCSSの調整）を行うにはVS Codeが最も効率的です。

VS Code3 400x267 ホームページ制作・編集の最強で無料ソフトウェア2026「Visual Studio Code（VS Code）」

注意が必要な点（デメリット）

  • 「見たまま」では作れない： Wixのように「画像をマウスで動かして配置」という操作はできません。コードを1行書くごとに、ブラウザでどう見えるかを確認する作業が必要です。
  • サーバーやドメインは自前で用意： VS Codeは「作るための道具」なので、公開するには別途サーバー（無料レンタルサーバーなど）へファイルをアップロードする手間がかかります。

 

VS Codeはこんな人にオススメ

  • 「HTMLやCSSを少し勉強して、構造からしっかり理解したい」
  • 「WordPressのテーマを自分で細かくカスタマイズしたい」
  • 「将来的にWeb制作のスキルを身につけたい」

一方で、「デザインだけサクッと終わらせたい」という場合は、STUDIOやWixの方が

ストレスなく進められるかも。

 

VS Code を使うなら、入れておきたい「神」拡張機能

もしインストールされたなら、以下の3つを入れるだけで制作効率が劇的に変わります。

  1. Japanese Language Pack：メニュー画面をすべて日本語にします。
  2. Live Server：コードを書き換えると、ブラウザの表示がリアルタイムで自動更新されるようになります（保存するたびに更新ボタンを押す必要がなくなります）。
  3. Prettier：ぐちゃぐちゃになったコードを、ショートカット一つで一瞬できれいに整列させてくれます。

Visual Studio Code を日本語化する手順

① 左の「拡張機能」をクリック

左側のメニューにある四角が4つのアイコンをクリックします。

② 検索欄に入力

検索ボックスに 「　Japanese Language Pack　」 と入力します。

③ インストール

表示される Japanese Language Pack for Visual Studio Code

を Install（インストール）

 

VS Code5 400x267 ホームページ制作・編集の最強で無料ソフトウェア2026「Visual Studio Code（VS Code）」

④ インストール後

右下の　Change Language and Restart　をクリック。

すると再起動されて日本語表示になります。

 

Visual Studio Code をブラウザ自動表示させ手順

Live Server を使います。

① 拡張機能を開く　（キーボード　Ctrl + Shift + X）

② 検索欄に　Live Server　と入力

③ これをインストール　（Live Server　作者　Ritwick Dey）

 

使い方
① HTMLファイルを開く　例　index.html

② コード表示されているどこでも右クリックして

Open with Live Server　をクリック。

③ ブラウザが自動で開きます

例　http://127.0.0.1:5500/index.html

 

コードをショートカット一つできれいに整列させる

Prettier をインストールします。

① 拡張機能を開く　（キーボード　Ctrl + Shift + X）

② 検索欄に　Prettier　と入力

Prettier – Code formatter

提供：James Long

③ これをインストール　

 

使い方
① HTMLファイルを開く　例　index.html

② キーボード　Shift + Alt + F

以上

 

最後にVisual Studio Codeの注意点

最初にファイルを読み込むとCSSが反映されません。

ほぼ全員が最初にハマります。

最初にファイルを開く際には、「フォルダーを開く」から進んでください。

開きたいファイルの最上階のフォルダを開くとしっかりCSSは反映されます。

 

VS Code4 230x400 ホームページ制作・編集の最強で無料ソフトウェア2026「Visual Studio Code（VS Code）」

しまい

Comment(0) | Trackback(0)

TAGS: / | 2026年3月16日 |