風仙洞｜HTML/CSS 初心者のための VS Code 設定

HTML/CSS 初心者のための VS Code 設定

作成：2021/04/07｜追記：2023/08/09

目次

はじめに
インストールと日本語化
追加の拡張機能
画面の外観（構成）設定
メニューバーが消えた!?

VS Code、すなわち Microsoft 製のコード・エディタ Visual Studio Code である。各種プログラムを書くための機能があるが、私はプログラミングを勉強したことがないので、もっぱら HTML/CSS でのWebページ作成用に使っている。使い始めて１ヶ月になるので、私なりに設定したことを紹介したい。

Visual Studio Code の画面サンプル — Visual Studio Code

はじめに

私が初めてWebページを作成しようと思ったのは 2000 年頃。以来使った HTML 作成ソフトを列記すると下のリストのようになる。

PageMill
WZ Editor 3 + htmlex
ez-HTML（2005/12～2020/06）
Brackets（2020/06～2021/03）
Visual Studio Code（2021/03～）

最初は HTML を知らなくてもワープロ風にWebページを作成できるという謳い文句に釣られて、Adobe 社が開発した PageMill というソフトを買ったのだが、結局なじめずに１ヶ月で放棄した。

その１年後くらいに、パソコン通信でのレス書きに愛用していたビレッジセンター製の WZ Editor が Ver.3 の時に、HTML 作成用のマクロ htmlex と HTML の教本がセットで発売されたので購入。このマクロと教本にはだいぶお世話になった。NIFTY SERVE（現「@nifty」）のホームページ・スペース提供サービスに持っていた私のWebサイト向けに各ページを作成しただけでなく、当時勤めていた会社でベスト・セラーのページを HTML 4.01 で作成した。しかし、Ver.4 にバージョン・アップしたときに html 専用のマクロは用意されず、重くて使いにくくなってしまった。

そんな時に ez-HTML という須田さん開発の HTML エディタに出会った。2005 年 12 月のことである。 ez-HTML はリンクウェアで、作成したページのどこかに小さなリンク用バナーを設置すれば無料で使用できたが、大いに気に入ったのでシェアウェア送金した。会社のWebサイト作成も ez-HTML で行っていた。

しかし、時は流れ 2020 年 6 月。世間はとうに XHTML 1.x から HTML5 の時代になっていたのに、数年前から Ver.7.71 のままで HTML5 対応の新版は開発されなかったので、ついにしびれを切らして HTML エディタを物色。

いくつか有名どころがある中で、私の身の丈に合った感じだったのが Adobe 社開発の無料のエディタ Brackets 。

インストールして使い方を研究しながら、過去に作成したサイト各ページの文字コード変更（Shift_JIS → UTF-8）に着手し、次いで HTML のバージョンを XHTML 1.0 から HTML5 に変更、更に秋には単純ながらレスポンシブ化にも成功した。１０月には「日本古代史ネットワーク」のサイト作成も行うようになった。

ようやく新しいWebページ作成環境に馴染んだと思っていたのだが、2021 年 3 月 1 日、何と Brackets の開発終了と 2021 年 9 月 1 日をもってのサポート終了予告が報道された（現在は有志によって開発が引き継がれている）。

そこで選んだのが Microsoft 謹製のコード・エディタ Visual Studio Code （以下 VS Code と短縮）。各種プログラミング言語に対応しているので、プログラミングが出来ず、HTML/CSS を書くだけの私には機能過剰で使いにくいのではないかと敬遠していたのだが、バージョンアップが活発なのと、既に HTML エディタとして多数派になっているので、情報も集めやすいだろうと思ったからである。

インストールと日本語化

VS Code はMicrosoftのサイトからダウンロードできる。Windows7/8/10（64bit/32bit）だけでなく、Linux の各ディストリビューションや macOS にも対応している。2021/04/04 現在、最新版は Ver.1.55。ありがたいことに無料で使用できる。

ダウンロードに続いてインストールしたら、日本人としてはメニューを日本語化しておきたい。インストールするともうメニューが日本語化されていた Brackets と比べると一手間増えるのは残念なところである。Windows 版の場合、手順はいくつかあるが、

左上端のアイコンのうち上から5番目（拡張機能）をクリック
検索欄に「japanese」と入力
検索結果の中から「Japanese Language...」を選択
「Japanese Language Pack for Visual Studio Code」の紹介が表示されたのを確認したら、インストール・ボタンをクリック
VS Code を再起動

を紹介する。日本語化パックには、単にメニューを日本語化するだけでなく、

Brackets Keymap：キーバインディングを Brackets 風にカスタマイズ
Live Server：ソースコードの変更を標準のWebブラウザーでリアルタイムプレビュー
CSS Peek：CSSクラスの定義を参照
IntelliSense for CSS class names in HTML：ワークスペースで利用されているCSSクラスを自動補完

も含まれていた（2020/06 当時）。現在（2023/08）は日本語化単独になっているのかもしれない。少なくとも CSS Peek は非推奨拡張機能になっている。

追加の拡張機能

どうしてもインストールしておきたいのが Image preview。日本語化パックと同じように、左上のアイコン並びの中から５番目の「拡張機能」アイコンをクリックし、検索欄に「image preview」と入力すれば見つかる。

拡張機能の紹介画面では、画像ファイル名を記述した行番号の右隣にアイコンのように小さなサムネイル画像が見えることしか例示されていないが、もっと重要なのは、src 属性の値であるパスとファイル名部分にマウスカーソルをホバーすると、

サムネイル画像
「Reveal in Side Bar」
「Open Containing Folder」
画像の横縦ピクセル数

が表示されること。初期設定のままでは、素っ気なく「リンク先を表示（ctrl + クリック）」としか出ない。Brackets でもサムネイル画像とピクセル数表示はありがたかった。

なお、「Reveal in Side Bar」をクリックすると、画像が含まれるフォルダの中味を左のエクスプローラーで表示し、「Open Containing Folder」をクリックすると、Windows のエクスプローラーが画像の含まれるフォルダを表示する。

Encode Decode は、各種エンコード、デコードを行う拡張機能であるが、私はリンク先の日本語名ファイルに対して URL 変換（URL Encode）するときに使っている。通常 HTML ではファイル名として日本語を使うと有効にならないが、URL Encode という手法で有効になるのである。他の拡張機能と同じように、検索してからインストールする。

使い方は、

変換したいファイル部分を範囲選択
「表示」→「コマンドパレット」（または Ctrl + Shift + P）でコマンドパレットを表示
「Convert Selection」を選択
約２０個ある選択肢の下の方の「String to Encoded Url」を選択

するのが一番原始的。慣れればキーボード・ショートカットで Ctrl + Alt + C ですぐにこの機能を呼び出し、検索欄に「u」と入力すると、候補が絞られるのでスマート。

ファイル名をローマ字化するだけで済む時は不要だが、英語にリネームするよりは簡単だし、ダウンロードする人にとっては日本語のままである方が便利であろう。

もうひとつ、Zenkaku-Hankaku もインストールした。この拡張機能は、

全角 → 全角：ひらがな → カタカナ
全角 → 全角：カタカナ → ひらがな
全角 → 半角：英数
全角 → 半角：英数記号
全角 → 半角：英字
全角 → 半角：記号
全角 → 半角：数字
全角 → 半角：全角カナ → 半角カナ
半角 → 全角：英数
半角 → 全角：英数記号
半角 → 全角：英字
半角 → 全角：記号
半角 → 全角：数字
半角 → 全角：半角カナ → 全角カナ

の変換を行える。変換したい範囲を選択した上で、コマンドパレットを表示した後、コマンドプロンプト（>＝入力待ち状態）の時に「zen」或いは「hank」と入力すると、変換パターンの候補が現れるので、使いたいものを選択すれば良い。長い論文を HTML 化しているとき、どうにも面倒なのが、年号や日付、数字の半角/全角の不統一。Word で論文を書く人はどうして統一しないのだろうか？　この拡張機能を使えば一挙に統一できる......かも知れない。

結局、現在（2023/08）インストールして有効にしている拡張機能は次の１０個である。2021/11/28 当時は CSS Peek をインストールしていたが、非推奨になったのでアンインストールした。

Debugger for Firefox
Encode Decode
HTML to CSS autocompletion
Image preview
IntelliSense for CSS class names in HTML
Japanese Language Pack for Visual Studio Code
Live Server
SVG
XML Tools
Zenkaku-Hankaku

画面の外観（構成）設定

拡張機能の次は外観（構成）の設定。

初めて VS Code を起動すると、右のような画面になる（※クリックすると別ウィンドウで拡大表示）。

メニュー・バーの「表示」→「外観」で各部分を表示するかどうかの設定を行う。もちろん、チェック印の付いているものが表示される。下の画面例では、

上端（緑）：メニュー・バー
下端（黄）：ステータス・バー
左端（赤）：アクティブ・バー
左から２番目（赤紫）：サイド・バー
右側の広い部分：エディタ領域

となっている。メニュー・バーは他の Windows ソフトと同じであり、エディタ領域は VS Code がコード・エディタであるから説明は不要であろう。面白いのが、アクティブ・バーの上から５つのアイコンで選択された機能がサイド・バーに表示されるところ。ちなみに Brackets では、この部分はエクスプローラーの固定であった。

アクティブ・バーにある各アイコンは、上から

エクスプローラー
検索
ソース管理
実行とデバック
拡張機能
アカウント
管理

である。私には「ソース管理」と「実行とデバッグ」は縁が無さそうだ(^^;;;

スタータス・バーは、左下の問題通知アイコン・グループ（？）と、「ようこそ」画面では表示されないが、右下の情報領域（？）に分けられる。情報領域には、下の画像のように、左から

位置情報
タブ設定
文字コード
改行コード設定
言語モード
ブラウザ連携（？）
フィードバック・ツイート
通知

が表示される。「言語モード」はいろいろ選択できるが、HTML/CSS を書いている分には初期設定の「自動検出」で問題ないと思う。

日本語化パックにも含まれる拡張機能 Live Server をインストールし、HTML を書いていて「ブラウザ連携」部分が「Go Live」になっている場合は、それをクリックすると一瞬の「Starting」を経てパソコンで標準設定されているブラウザがプレビュー表示する。「Port:5500」になっている時は、そこをクリックすると、一瞬の「Disposing」を経て「Go Live」に変わる。

例えばこのページの場合、Ｗｅｂページ作成用の「fengxian」フォルダから VS Code を起動し、「fengxian」フォルダの下の「pc」フォルダにあるので、ブラウザの URL 欄は、

(Chrome)
127.0.0.1:5500/pc/vscode_settings_for_html_beginners.html
(Edge)
http://127.0.0.1:5500/pc/vscode_settings_for_html_beginners.html

という表示になる。

もちろん、ブラウザのアドレス欄にある 127.0.0.1 は localhost の IP アドレスであり、5500 はポート番号である。

配色テーマは、作業能率とも関連するので重要だと思う。選択は、左下の歯車型管理アイコンをクリック → 配色テーマで行う。ライトテーマ４つ、ダークテーマ９つ、ハイコントラスト１つが予め用意されている他に、拡張機能として別の配色テーマをインストールできるようになっている。選択肢の少ない Brackets よりもずっと多い。

初期設定は「Dark+」だが、私のお気に入りは「Monokai-Dimmed」。視認性に優れている一方、Dimmed のない「Monokai」と違って眩しくない。

「外観」の「ミニマップを表示する」オプションは、下の画像のようにエディタ画面の右端に 120px くらいの幅（位置と幅は変更可）で一種のサムネイル画像を表示するものであるが、私はあまり役に立つとは思わない。画面幅を 1000px 以上にしている場合は邪魔にもならないとは思うけれども......。

「階層リンクの表示」オプションは、上の画像のように、開いているファイルのタブの下に階層を表示するものであるが、画面が見にくくなるだけだと思う。

「Zen Mode」はエキスパート向けの設定である。メニュー・バー、アクティブ・バー、サイド・バーが消えてしまい、エディタ部分だけになる。それだけでなく、Windows のデスクトップやタスク・バー、起動している他のソフトのウィンドウまで隠してしまう（IME バーだけは隠れないが......）。

まさに全集中禅モードだが、私はそこまで解脱していない！　間違ってこのモードに入ってしまったら、今は幽鬼と化した Internet Explorer では、メニュー・バーが通常非表示にしていても、Alt キーを押下するとメニュー・バーが現れたことを思い出そう。そうやって Zen Mode を解除して、ふぅ......実は Ctrl + K → Z でも解除できるのだが、ヒント無しにこのキーボード・ショートカットを思いつく人は少ないだろう。

最後に、エディタの右端折り返しについて。VS Code の初期設定では右端折り返しをしないようになっていて、「表示」→「右端で折り返す」の設定/解除により右端で折り返すように設定できる。目敏い人は Alt + Z で設定できることにも気がつくかも知れない。しかし、ファイルを開く度に設定するのは面倒である。そこで自動的に折り返すように設定する方法を紹介する。

画面左下の「管理」アイコンをクリック
「設定」をクリック
検索窓に「editor: word wrap」と入力して Enter
設定値を「off」以外にする
- on：画面幅で折り返す
- wordWrapColumn：指定の文字数で折り返す
- bounded：上記２つの少ない方で折り返す

メニューバーが消えた!?

VS Code でＷｅｂページを書いていると、メニューバーの

ファイル
編集
選択
表示
移動
実行
ターミナル
ヘルプ

というメニュー項目が消え、左上に三本線の画像が現れることがある。Ｗｅｂページにもよくあるハンバーガー・メニューである。

私は右側の４項目はまず使わないが、編集に含まれる「最近使用した項目を開く」と表示に含まれる「コマンドパレット」はよく使う。代わりに現れるハンバーガー印をクリックすればメニュー項目が現れるが、一手間増える。

そこで人知れず悩んでいたのだが、解決法がわかった。

関係する設定箇所は２つある。「メニュー」→「ファイル」→「ユーザー設定」→「設定」の「ウィンドウ」項目で

Enable Menu Bar Mnemonics のチェックを OFF
Command Center のチェックを OFF

である。

「ウィンドウ」の項目に設定箇所があることを忘れてしまった場合は、「設定」画面で検索窓にキーワードを入力して検索するのも手である。あ、でも「mnemonics」なんて記憶の女神「ムネモシュネ」を語源とする単語、ギリシャ神話に詳しくないと知らないよな......(^^;;;