作成: 2021/04/07

作成:2021/04/07

風仙洞

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

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

Visual Studio Code

※ 画像をクリックすると別ウィンドウで拡大表示

  1. はじめに
  2. インストールと日本語化
  3. 追加の拡張機能
  4. 画面の外観(構成)設定

はじめに

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

  1. PageMill
  2. WZ Editor 3 + htmlex
  3. ez-HTML
  4. Brackets
  5. Visual Studio Code

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

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

ez-HTML

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

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

Brackets

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

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

ようやく新しい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 版の場合、手順はいくつかあるが、

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

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

も含まれている。「Brackets Keymap」は Brackets のキーバインディングに慣れていなければアンインストールして差し支えないが、他の3つは残しておきたい。

追加の拡張機能

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

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

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

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

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

使い方は、

  1. 変換したいファイル部分を範囲選択
  2. 「表示」→「コマンドパレット」(または Ctrl + Shift + P)でコマンドパレットを表示
  3. 「Convert Selection」を選択
  4. 17個ある選択肢の16番目「String to Encoded Url」を選択

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

「画像選択onVSCode」を URL に変換

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

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

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

画面の外観(構成)設定

初めての起動時の画面

拡張機能のインストールが終わったので、今度は外観(構成)設定。

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

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

VS Code の画面構成設定

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

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

  1. エクスプローラー
  2. 検索
  3. ソース管理
  4. 実行とデバック
  5. 拡張機能
  6. アカウント
  7. 管理

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

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

情報領域
  1. 位置情報
  2. タブ設定
  3. 文字コード
  4. 改行コード設定
  5. 言語モード
  6. ブラウザ連携(?)
  7. フィードバック・ツイート
  8. 通知

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

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

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

という表示になる。

Chrome 上の localhost URL

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

「配色テーマ」へ

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

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

配色テーマ:Dark+(初期設定)
配色テーマ:Monokai-Dimmed

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

ミニマップ(右端)と階層リンク(上部赤マーク)

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

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

Zen Mode

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

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

  1. 画面左下の「管理」アイコンをクリック
  2. 「設定」をクリック
  3. 検索窓に「editor: word wrap」と入力して Enter
  4. 設定値を「off」以外にする
    • on:画面幅で折り返す
    • wordWrapColumn:指定の文字数で折り返す
    • bounded:上記2つの少ない方で折り返す
    「editor: Word Wrap」のオプション

である。ただし、検索して探さない場合、どこにこの設定箇所があるのか未だにわからない(^^;;;

  1. はじめに
  2. インストールと日本語化
  3. 追加の拡張機能
  4. 画面の外観(構成)設定