Visual Studio Code（VSCode）は、プログラミングやWeb制作で広く利用されているコードエディターです。
コードを書くためのソフトというイメージが強いものの、PNGやJPEG、SVG、WebPなどの画像をプロジェクト内で確認することもできます。
特にWeb制作では、画像ファイルを確認しながらHTMLやCSSを編集できるため便利です。
ただし、VSCodeはPhotoshopやGIMPなどのような本格的な画像編集ソフトではありません。
PNGやJPEGのトリミング、色補正、レタッチなどを行いたい場合は、画像編集ソフトや拡張機能などを併用する必要があります。
ここでは、VSCodeで画像を表示する基本的な方法から、SVGの編集方法、画像をWebページに表示する方法、画像が表示されない場合の対処法まで詳しく解説します。
VSCodeでは画像を直接表示できる
エクスプローラーから画像を開く
VSCodeでは、プロジェクト内に保存されている画像ファイルをエクスプローラーから直接開くことができます。
例えば、次のようなファイル構成になっているとします。
project/
├─ index.html
├─ css/
│ └─ style.css
└─ images/
├─ logo.png
├─ main-visual.jpg
└─ icon.svgVSCode左側のエクスプローラーから「images」フォルダーを開き、「main-visual.jpg」などの画像ファイルをクリックします。
画像ファイルを開くと、エディター領域に画像のプレビューが表示されます。
画像を確認するだけであれば、基本的に追加の拡張機能をインストールする必要はありません。
画像を固定タブで開く
VSCodeでは、エクスプローラー上のファイルを1回クリックすると、プレビューモードで開かれる場合があります。
プレビューモードでは、別のファイルをクリックすると同じタブが再利用されることがあります。
複数の画像を開いた状態にしておきたい場合は、ファイルをダブルクリックすると固定タブとして開くことができます。
画像とHTMLやCSSを見比べながら作業したい場合に便利です。
VSCodeで確認できる代表的な画像形式
Web制作で使われる一般的な画像を表示できる
VSCodeでは、Web制作で一般的に使用される次のような画像ファイルを確認できます。
.png
.jpg
.jpeg
.gif
.webp
.svgただし、それぞれのファイル形式によって扱い方には違いがあります。
例えばPNGやJPEGは主に画像としてプレビューします。
一方、SVGはXMLをベースとしたテキスト形式なので、画像として確認するだけでなく、ソースコードを直接編集することもできます。
VSCodeで画像を拡大・縮小する
画像ビューアーで細部を確認する
画像を開いた際には、画像ビューアーを使って拡大・縮小しながら確認できます。
大きな画像の場合は全体を確認し、小さなアイコンなどの場合は拡大して細部を確認すると便利です。
例えば、次のようなポイントを確認できます。
画像がぼやけていないか
余白が不自然ではないか
トリミング位置が適切か
アイコンの細部が崩れていないか
想定している画像が配置されているか利用できる操作やUIは、VSCodeのバージョンによって多少異なる場合があります。
複数の画像をまとめて確認する方法
Image Carouselを利用する
比較的新しいVSCodeには、複数の画像や動画をまとめて確認できるImage Carousel機能があります。
エクスプローラー上で画像やフォルダーを右クリックし、「Open Images in Carousel」などの項目を選択すると、複数のメディアファイルを連続して確認できます。
例えば、次のように複数の商品画像がある場合に便利です。
product-01.jpg
product-02.jpg
product-03.jpg
product-04.jpg1枚ずつファイルを開き直さなくても、画像を切り替えながら確認できます。
Image Carouselはバージョンによって仕様が異なる
Image Carouselは比較的新しく追加された機能のため、VSCodeのバージョンによって利用方法や設定が異なる場合があります。
環境によっては、次の設定が関係する場合があります。
"imageCarousel.explorerContextMenu.enabled": trueただし、この機能はVSCodeのアップデートによって仕様が変更される可能性があります。
利用できない場合は、VSCodeを最新版に更新したうえで設定画面を確認するとよいでしょう。
VSCodeでSVG画像を編集する方法
SVGはコードとして編集できる
SVGは、PNGやJPEGとは異なり、XMLをベースにしたテキスト形式の画像です。
そのため、VSCodeを使ってコードを直接編集できます。
例えば、次のようなSVGがあるとします。
<svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
viewBox="0 0 200 200"
>
<circle
cx="100"
cy="100"
r="80"
fill="#0066ff"
/>
</svg>このコードでは、円が描画されています。
fill属性は塗りつぶしの色を指定しています。
fill="#0066ff"これを次のように変更します。
fill="#ff6600"すると、円の色を変更できます。
SVGのサイズを変更する
SVGでは、widthとheightを変更することで表示サイズを指定できます。
例えば、
width="200"
height="200"を、
width="400"
height="400"に変更すると、指定される表示サイズが大きくなります。
ただし、SVGではviewBoxも重要です。
例えば、
viewBox="0 0 200 200"はSVG内部の座標系を指定しています。
SVGを編集する場合は、widthやheightだけでなく、viewBoxとの関係も意識するとよいでしょう。
HTMLやCSSからSVGのサイズを変更する
Webサイトで使用するSVGでは、ファイル内部のサイズを変更するのではなく、CSSからサイズを指定する方法もよく使われます。
HTMLは次のように記述します。
<img src="./images/logo.svg" alt="ロゴ" class="logo">CSSでは、次のように指定できます。
.logo {
width: 200px;
height: auto;
}この方法であれば、SVGファイルそのものを変更しなくても表示サイズを調整できます。
SVGをコードとして開く方法
テキストエディターに切り替える
SVGファイルを開いた際に画像プレビューとして表示される場合があります。
SVGコードを編集したい場合は、ファイルを右クリックし、「Open With…」や「Reopen Editor With…」などからテキストエディターを選択します。
環境によってメニュー名は多少異なることがあります。
テキストエディターで開けば、次のようなSVGコードを直接編集できます。
<svg>
...
</svg>SVGアイコンやロゴの色、サイズ、線などを細かく調整したい場合に便利です。
PNGやJPEGは直接コード編集できない
PNGやJPEGはSVGとは仕組みが異なる
PNGやJPEG、WebPなどは、SVGのようなテキストベースの画像ではありません。
そのため、VSCodeの通常のテキストエディターで画像を開いて、コードを書き換えるように編集することはできません。
例えば、次のような作業はVSCode標準機能だけでは本格的に行えません。
画像を切り抜く
明るさを変更する
色を補正する
背景を削除する
人物を消す
写真を合成する
文字を入れる
レタッチするこのような編集が必要な場合は、画像編集ソフトを利用するのが基本です。
VSCode標準機能は画像確認が中心
VSCodeの標準画像ビューアーは、基本的に画像を閲覧・確認するための機能です。
そのため、PNGやJPEGなどについては、
画像を確認する
画像サイズを確認する
プロジェクト内の画像を探す
Webページとの見た目を比較するといった用途に適しています。
VSCodeで画像編集機能を追加する方法
拡張機能を利用する
VSCodeでは、拡張機能をインストールすることで、標準機能にはない機能を追加できます。
WindowsやLinuxでは、
Ctrl + Shift + XmacOSでは、
Shift + Command + Xを押すとExtensionsビューを開けます。
検索欄に、
SVG
Image
Image Preview
Image Editorなどを入力すると、画像関連の拡張機能を探すことができます。
拡張機能は信頼できるものを選ぶ
VSCodeの拡張機能には、ファイルへのアクセスやネットワーク通信などを行えるものがあります。
そのため、むやみにインストールするのではなく、信頼できる拡張機能か確認することが重要です。
例えば、次のような項目を確認するとよいでしょう。
提供元
Verified Publisherかどうか
ダウンロード数
ユーザー評価
レビュー
最終更新時期
GitHubなどのリポジトリ
ライセンス更新が長期間止まっている拡張機能や、提供元が不明な拡張機能については慎重に判断する必要があります。
本格的な画像編集は専用ツールを利用する
VSCodeと画像編集ソフトを使い分ける
VSCodeはコード編集には非常に優れていますが、写真加工に特化したソフトではありません。
用途に応じて次のように使い分けると効率的です。
| 作業内容 | 適した方法 |
|---|---|
| PNG・JPEGの確認 | VSCode |
| WebPの確認 | VSCode |
| SVGのコード編集 | VSCode |
| SVGの色変更 | VSCode |
| SVGのサイズ調整 | VSCode |
| HTML・CSSで画像サイズ調整 | VSCode |
| 写真のトリミング | 画像編集ソフト |
| 色補正 | 画像編集ソフト |
| 背景削除 | 画像編集ソフト |
| 写真合成 | 画像編集ソフト |
| レタッチ | 画像編集ソフト |
| 画像への文字入れ | 画像編集ソフト |
Web制作では、
画像を画像編集ソフトで加工する
↓
プロジェクト内に保存する
↓
VSCodeでHTMLやCSSを編集する
↓
ブラウザーで最終表示を確認するという流れが一般的です。
HTMLで画像を表示する方法
img要素を使用する
Webページに画像を表示する場合は、HTMLのimg要素を使用します。
例えば、次のようなファイル構成になっているとします。
project/
├─ index.html
└─ images/
└─ sample.jpgこの場合は、次のように記述します。
<img src="./images/sample.jpg" alt="サンプル画像">src属性には画像ファイルのパスを指定します。
alt属性には、画像の内容を説明する代替テキストを設定します。
widthとheightを指定する
Webページの表示安定性を高めるため、画像本来のサイズが分かっている場合はwidthとheightを指定する方法も有効です。
例えば、
<img
src="./images/sample.jpg"
alt="サンプル画像"
width="1200"
height="800"
>のように記述します。
幅と高さを事前に指定しておくことで、ブラウザーが画像を読み込む前に表示領域を確保しやすくなり、レイアウトのズレを抑えることにつながります。
CSSで画像サイズを調整する方法
レスポンシブ対応する
Webサイトでは、画面サイズに応じて画像を縮小できるようにすることが重要です。
代表的な指定方法は次のとおりです。
img {
max-width: 100%;
height: auto;
}max-width: 100%を指定すると、基本的には親要素より画像が大きくなることを防げます。
height: autoによって、画像本来の縦横比を維持しながら高さが調整されます。
特定の画像だけサイズを指定する
特定の画像だけサイズを変更したい場合は、クラスを付けます。
<img
src="./images/sample.jpg"
alt="サンプル画像"
class="main-image"
>CSSでは次のように指定します。
.main-image {
width: 600px;
max-width: 100%;
height: auto;
}これにより、最大600pxを基本としながら、小さな画面では親要素に合わせて縮小できます。
CSSのbackground-imageで画像を表示する
背景画像として指定する
画像をHTMLのコンテンツではなく背景として表示したい場合は、CSSのbackground-imageを使用できます。
.hero {
background-image: url("../images/main-visual.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}HTMLは次のように記述できます。
<div class="hero">
<h1>Webサイトタイトル</h1>
</div>background-size: coverを指定すると、要素全体を覆うように背景画像を拡大・縮小できます。
imgとbackground-imageを使い分ける
画像そのものに意味がある場合は、基本的にimg要素を使用します。
例えば、
商品画像
人物写真
グラフ
説明用画像
記事内の写真などです。
一方、
背景模様
装飾画像
デザイン目的の背景写真などであれば、background-imageを使う方法があります。
アクセシビリティやSEOを考える場合も、意味を持つ画像と装飾用画像を適切に使い分けることが重要です。
Markdownで画像を表示する方法
Markdown記法で画像を指定する
VSCodeではMarkdown内に画像を表示することもできます。
Markdownでは次のように記述します。
Markdownプレビューを開けば、画像を含めた実際の表示を確認できます。
READMEやドキュメントを作成するときに便利です。
VSCodeで画像が表示されない場合の対処法
画像のファイルパスを確認する
画像が表示されない原因として特に多いのが、ファイルパスの間違いです。
例えば、
project/
├─ index.html
└─ images/
└─ photo.jpgという構成なら、
<img src="./images/photo.jpg" alt="">と指定できます。
一方、
project/
├─ pages/
│ └─ about.html
└─ images/
└─ photo.jpgという構成の場合は、about.htmlから1階層上に戻る必要があります。
<img src="../images/photo.jpg" alt="">相対パスは、HTMLファイルが存在する場所を基準に考えることが重要です。
ファイル名の大文字・小文字を確認する
画像ファイル名の大文字と小文字にも注意が必要です。
例えば、実際のファイル名が、
Photo.jpgなのに、
<img src="./images/photo.jpg" alt="">と記述すると、環境によっては画像が表示されません。
特にLinux系のWebサーバーでは、大文字と小文字が区別されます。
開発時のトラブルを減らすためにも、ファイル名は次のように小文字に統一しておくと管理しやすくなります。
main-visual.jpg
product-image-01.webp
company-logo.svg拡張子を確認する
ファイル名は正しくても、拡張子が間違っているケースがあります。
例えば、実際には、
photo.webpなのに、
<img src="./images/photo.jpg" alt="">と記述している場合です。
また、
.jpg
.jpegの違いにも注意しましょう。
画像ファイルが破損していないか確認する
VSCodeでも画像が開けない場合は、画像ファイル自体が破損している可能性があります。
OS標準の画像ビューアーやブラウザーでも開けるか確認すると、原因を切り分けやすくなります。
また、ファイルサイズが0バイトになっていないか確認することも重要です。
Git LFSを使用している場合も確認する
Git LFSを利用して画像を管理しているプロジェクトでは、画像そのものではなくLFSのポインターファイルしか取得できていない場合があります。
画像が正常に開けない場合は、Git LFSのデータを正しく取得できているかも確認するとよいでしょう。
VSCodeで画像を扱うときのおすすめの使い分け
画像の確認にはVSCodeを使う
次のような作業であれば、VSCodeだけでも十分対応できます。
PNGを確認する
JPEGを確認する
WebPを確認する
GIFを確認する
SVGを確認する
プロジェクト内の画像を探す
HTMLやCSSと画像を見比べる
複数の画像を確認するSVGの編集にはVSCodeが向いている
SVGはテキスト形式なので、VSCodeとの相性が非常によい画像形式です。
例えば、
色
サイズ
線の太さ
座標
形状
グラデーションなどをコードから変更できます。
ロゴやアイコンの細かな調整を行いたい場合にも便利です。
写真加工には画像編集ソフトを使う
JPEGやPNGについて、
トリミング
色補正
背景削除
合成
レタッチ
文字入れなどを行う場合は、専用の画像編集ソフトを利用するほうが効率的です。
VSCodeだけですべての画像編集を完結させようとするよりも、目的に合わせてツールを使い分けることが重要です。
VSCodeで画像を表示・編集するときのまとめ
VSCodeでは、PNGやJPEG、WebP、GIF、SVGなどの画像をプロジェクト内で確認できます。
Web制作では、
画像をVSCodeで確認する
↓
HTMLで画像を配置する
↓
CSSでサイズやレイアウトを調整する
↓
ブラウザーで最終確認するという流れで利用すると効率的です。
SVGについてはXMLをベースとしたテキスト形式なので、VSCode上でコードを直接編集できます。
色やサイズ、線、形状などを変更したい場合にも便利です。
一方、PNGやJPEGなどのトリミング、色補正、レタッチといった本格的な画像加工は、VSCodeの標準機能には向いていません。
そのような作業では、画像編集ソフトや目的に合った拡張機能を利用するのがおすすめです。
「画像を確認するならVSCode」「SVGをコードで編集するならVSCode」「写真を本格的に加工するなら画像編集ソフト」と役割を分けることで、効率よく画像を扱えるようになります。
以上、VSCodeで画像を表示・編集する方法についてでした。
最後までお読みいただき、ありがとうございました。
