記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

vscodeフォントの種類・サイズ設定方法【初心者向け】

vscodeでフォントの種類・サイズ設定方法を初心者の方向けに解説。 フォントの種類・サイズ設定を行なうことでより使いやすくカスタマイズする事ができます。写真を使い、詳しく解説していますので、初心者の方も安心して読み進める事ができます。

カテゴリ: Visual Studio Code

vscodeでは「font-family」「font-size」を設定することができます。
デフォルトでは、下記のようになっていますが、

font-family、font-sizeを変更すると下記のような表示にする事ができます。

設定を変更する理由としては、自分なりに見やすい書体、文字の大きさにすることにより、効率的に開発を行うためです!
今回は、vscodeで「font-family」「font-size」の設定方法を初心者の方向けに詳しく解説していきます。

vscodeとは?

初心者の方向けに、まずはそもそものvscodeについて簡単に説明していきます。

Visual Studio Code(vs code)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

Visual Studio Codeが人気のある理由として5点があがられます。

1.オープンソースであり、誰でも無償で利用する事ができる。
2.Windows版・macOS版・Linux版と各OSに対応している。
3.多くの言語に対応している(英語、日本語、フランス語、ドイツ語、中国語、ロシア語)などその他、各国の言語に対応している。
4.拡張機能が豊富(デバック機能、コード補完、ソースコードのシンタックスハイライトなど)
5.軽量で早く動く(余計な機能は最初から省かれているので、ストレスなく動く)

以上5点の利便性から、最も多くのユーザーに選ばれている開発ツールだと言われています。
様々な機能追加、設定を変更する事ができ、今回は「font-family」「font-size」「font-weight」の設定方法について解説します。

設定方法

vscodeの「font-family」「font-size」の設定方法は主に2種類あり。

1.「設定」画面で設定する方法
2.設定ファイル「settings.json」に直接記入する方法

上記2点あり順番に解説していきます。

1.「設定」画面で設定する方法

方法1は設定画面から設定していく方法です。

まずは、設定画面を開きます。
ショートカットキー、mac:【Cmd】+【,】 。windows:【Ctl】+【,】。
もしくは「Code」→「基本設定」→「設定」で設定画面を開きます。

設定画面。

そして変更されたフォントが、すぐに見てわかりやすいように、画面表示指定します。
ウィンドマークを押し画面を2分割。

確認したいファイルを右画面にドラックアンドドロップしファイルを開きます。
これで確認しながら作業を進める事ができます。

font-family変更

設定画面上部の「設定の検索バー」に「フォント」と入力して検索。
フォントに関連する項目がでてきます。

この中から「Editor: Font Family」という項目を探します。
現在は、「Menlo, Monaco, ‘Courier New’, monospace」というfont-family名が指定されています。

font-family名「Consolas, ‘MS 明朝’, monospace」に変更

変更前の文字の書体(Menlo, Monaco, ‘Courier New’, monospace)

変更後の文字の書体(Consolas, ‘MS 明朝’, monospace)
これで簡単に、font-familyを変更する事ができました。

font-sizeの変更

font-sizeを変更するには、「Editor: Font Size」を探します。

font-sizeの数値を変更する事で変更する事ができます。
今回は「18」を指定

font-size12の時

font-size18の時
font-sizeを変更する事ができました。

候補ウィジェットのfont-size変更

候補ウィジェットとは下記のような、vscodeが入力例を出してくれるこのポップアップのことです。

この候補ウィジェットのfont-size変更するには、「Editor: Suggest Font Size」を探し。

数値を入力、今回は「18」を入力。

このように、font-sizeより大きく指定すれば、大きく候補ウィジェットを表示する事ができます。

ターミナルのfont-familyの設定

ターミナルとはテキストエディタの下記の箇所の事であり。

ターミナルを開くには「ターミナル」→「New Terminal」で開く事ができます。

ターミナルのfont-familyを変更するには、「Terminal › Integrated: Font Family」を探し

「Terminal › Integrated: Font Family」に変更したいfont-family「Consolas, ‘MS 明朝’, monospace」を指定

ターミナルfont-familyを変更前

ターミナルfont-familyを変更後

ターミナルのfont-sizeの設定

「Terminal › Integrated: Font Size」を探します。

「Terminal › Integrated: Font Size」の大きさを指定
今回は「18」に指定

下記のようにターミナルの文字サイズを大きくする事ができました。

2.設定ファイル「settings.json」に直接記入する方法

方法2は、設定ファイルに直接記述していく方法です。

まずは「settings.json」ファイルを開きます。
settings.jsonファイルを開くには、ショートカットキーmac:【command】+ 【,】 Win: 【Ctrl】 + 【,】 または、「Code」→「基本設定」→「設定」で設定画面を開きます。

右上のアイコンをクリック

settings.jsonファイルを開きます.

font-familyを変更する方法

settings.jsonファイルに
“editor.fontFamily”: “”,を記述、ダブルコーテションの中に、変更したfont-family名を記載。

font-familyを変更前

今回は、「onsolas, ‘MS 明朝’, monospace」を記載し変更。
font-familyを変更後

font-sizeを変更するには

settings.jsonファイルに”editor.fontSize”:を記載

指定したい数字を記入、今回は「20」を記載。
下記のように文字サイズを変更できています。

まとめ

今回は、vscodeでの「font-family」「font-size」の設定方法を紹介しました。

vscodeの「font-family」「font-size」の設定方法は主に2種類あり。
1.「設定」画面で設定する方法
2.設定ファイル「settings.json」に直接記入する方法
を解説してきました。
本記事を参考にvscodeを見やすく使いやすくしてみてください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。