連載
» 2018年11月30日 05時00分 公開

Visual Studio Code TIPS:VS Codeでフォントを拡大/縮小するには

VS Codeを使っている最中に、突然、フォントサイズが変わってしまったら、本稿に示したコマンドでフォントサイズをリセットしよう。

[かわさきしんじ,Insider.NET編集部]
「Visual Studio Code TIPS」のインデックス

連載「Visual Studio Code TIPS」

 Visual Studio Code(以下、VS Code)では、エディタに表示している文字のフォントサイズをダイナミックに変更できる。また、VS Codeウィンドウに表示されるGUI要素全体を拡大/縮小して表示することも可能だ(アクセシビリティー機能に分類される)。本稿では両者の方法を解説する。ここでは紹介しないが、ユーザー設定/ワークスペース設定でeditor.fontsize項目をカスタマイズすることもできる。

  操作
エディタのフォントを拡大/縮小/リセットする コマンドパレットで以下のコマンドを実行
拡大:[エディターのフォントを拡大]
縮小:[エディターのフォントを縮小]
リセット:[エディターのフォントのズームをリセット]
ウィンドウのGUI要素を拡大/縮小/リセットする コマンドパレットで以下のコマンドを実行
拡大:[表示: 拡大]
縮小:[表示: 縮小]
リセット:[表示: ズームのリセット]
フォントサイズの変更方法

エディタのフォントを拡大/縮小/リセットする

 エディタに表示される文字サイズを、VS Codeの実行時に動的に変更するにはコマンドパレットから以下のコマンドを実行する。

  • 拡大:[エディターのフォントを拡大]
  • 縮小:[エディターのフォントを縮小]
  • リセット:[エディターのフォントのズームをリセット]

 コマンドパレットでこれらのコマンドを検索するには「font zoom」などと入力するのが簡単だ。実際にフォントサイズを変更している様子を以下に示す。

エディタのフォントサイズを変更している様子 エディタのフォントサイズを変更している様子

 これらにはキーボードショートカットが割り当てられていないので、頻繁に使用するのであれば、割り当てるようにしよう。また、[Ctrl]キーを押しながら、マウスホイールを上下に移動させることで、エディタのフォントサイズを変更するためのeditor.mouseWheelZoom項目もある(ユーザー設定/ワークスペース設定)。

[Ctrl]キーとマウスホイールによるフォントサイズ変更を有効化(新しい設定エディタ) [Ctrl]キーとマウスホイールによるフォントサイズ変更を有効化(新しい設定エディタ)

ウィンドウのGUI要素を拡大/縮小/リセットする

 ウィンドウに表示されるGUI要素(テキスト、アイコンなど)をまとめてズームイン/ズームアウト/サイズのリセットを行うことも可能だ。これにはコマンドパレットで以下のコマンドを実行する(コマンドパレットで「view zoom」などと入力して絞り込むとよい)。

  • 拡大:[表示: 拡大]
  • 縮小:[表示: 縮小]
  • リセット:[表示: ズームのリセット]

 これらのコマンドでズームイン/ズームアウトしたところを以下に示す。

[表示: 拡大]コマンド/[表示: 縮小]コマンドなどによるVS Codeウィンドウのズームイン/ズームアウト [表示: 拡大]コマンド/[表示: 縮小]コマンドなどによるVS Codeウィンドウのズームイン/ズームアウト

 こちらの方法では、ズームイン/ズームアウトを1回行うたびに20%ずつ拡大/縮小が行われる。また、ズームイン/ズームアウトによってどれだけの拡大/縮小が行われたか(ズームレベル)がwindow.zoomLevel項目に保存され、次回のVS Code起動時にもそのズームレベルが復元されるようになっている。ズームレベルは整数値で指定され、そのデフォルト値は0となっている(デフォルトの大きさ)。[表示: 拡大]コマンドを1回実行すると、20%拡大され、ズームレベルは1増える。逆に[表示: 縮小]コマンドを1回実行すると、20%縮小され、ズームレベルは1減少する。

 なお、カスタムタイトルバーを使用している場合、こちらのコマンドを実行すると、タイトルバーのサイズも変更される。

カスタムタイトルバーを使用している場合には、[表示: 拡大]コマンドによりタイトルバーも拡大表示される カスタムタイトルバーを使用している場合には、[表示: 拡大]コマンドによりタイトルバーも拡大表示される

 これらのコマンドはアクセシビリティー機能に分類されていることから、弱視の方がVS Codeを使いやすくなるように、カスタムタイトルバーの拡大表示/ズームレベルの永続化などが行われているということだろう。プレゼンテーションなどを行う際に、エディタのフォントサイズを変更するだけであれば、最初に説明した方法を使えばよいだろう。

「Visual Studio Code TIPS」のインデックス

Visual Studio Code TIPS

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。