VS Codeでimgタグのwidth, height属性を自動入力する方法
![](https://webspe.net/wp-content/uploads/2023/05/vscode-auto-width-height.jpg)
ページのCLS対策のため、imgタグにwidth, height属性を記入することは重要です。
しかし、画像毎に一々サイズを調べながら、手動でwidth, height属性を入力していくのは非常に手間がかかります。
そんな時、VS Code(Visual Studio Code)のemmet機能を使うことで、width, height属性を自動で入力することが出来ます。(標準機能のため、拡張機能をインストールする必要もありません)
この記事で詳しいやり方を解説していきます。
VS Codeでwidth, height属性を自動入力する方法
VS Codeでwidth, height属性を自動入力する方法を解説していきます。
今回の例では、以下のように幅640px、高さ429pxの画像を使用しました。
![解説で使用する画像の幅と高さ](https://webspe.net/wp-content/uploads/2023/05/sample-image.jpg)
まずは、この画像を呼び出すimgタグの行にカーソルを合わせます。(※画像のパスは正しく入力されている必要があります)
![imgタグにカーソルを合わせる](https://webspe.net/wp-content/uploads/2023/05/vscode-img-tag.jpg)
imgタグにカーソルを合わせた状態でcommand
+shift
+P
と入力します。
コマンドパレットの検索欄が表示されるので、「image」と入力します。
![VS Codeのコマンドパレット](https://webspe.net/wp-content/uploads/2023/05/vs-code-command-1024x195.jpg)
「Emmet: イメージ サイズの更新」のみが表示された状態になるので、Enter
を押します。
![画像のwidth, height属性が入力された様子](https://webspe.net/wp-content/uploads/2023/05/vs-code-inserted-width-height.jpg)
VS Codeが画像の幅と高さを自動で取得し、width属性・height属性が自動で入力されました。
この方法を使用するには、画像のsrc属性が完全な文字列で入力されている必要があります。
例えば、WordPressで使用するようなPHPのコード等が含まれている場合は使用できません。
<!-- 自動入力できない例 -->
<img src="<?php echo get_stylesheet_directory_uri();?>/img/image.svg" alt="">
以下のようにimgタグにsrcset属性が含まれている場合も、src属性に指定した画像のサイズを元にwidth, height属性が自動入力されます。
<img
srcset="./img/image.jpg 1x, ./img/image@2x.jpg 2x"
src="./img/image.jpg"
alt=""
/>
Retia(高解像度)ディスプレイ用のwidth, height自動入力方法
以下の記事で解説している通り、Retinaディスプレイなどの対応のため、2倍や3倍サイズの画像を使用する場合があります。
その場合、2倍サイズの画像であれば、実際には1/2のサイズでWebページに表示したいため、widthとheight属性にも1/2の値が入力されることが望ましいです。
VS CodeのEmmet機能は、この辺りも上手く実行してくれます。
やり方はとても簡単で、2倍サイズの画像であれば@2x
、3倍サイズであれば@3x
を、画像ファイル名の末尾に記入するだけです。
- image@2x.jpg
- image@3x.jpg
例として、以下のように2倍サイズである「image@2x.jpg」を、imgタグで表示する場合を考えます。
この画像は、幅が1280px、高さが858pxです。
![2倍サイズの画像の例](https://webspe.net/wp-content/uploads/2023/05/double-size-image-sample.jpg)
この画像をimgタグで呼び出します。
![2倍サイズの画像をimgタグで表示する](https://webspe.net/wp-content/uploads/2023/05/vscode-2x-image-tag.png)
前述した手順通り、imgタグにカーソルを合わせた状態で、command
+shift
+P
でコマンドパレットを開き、「image」と入力 →「Emmet: イメージ サイズの更新」が表示された状態でEnter
を押します。
![2倍サイズの画像にwidth, height属性が1/2の値で自動入力された様子](https://webspe.net/wp-content/uploads/2023/05/image-2x-width-height-inserted.jpg)
すると、画像の幅と高さの1/2の値が、width, height属性にそれぞれ自動入力されます。
複数のimgタグに一括でwidth, heightを自動入力する方法
複数あるimgタグの内、任意のimgタグの<img
までをドラッグして選択した状態にします。
![<img loading=](https://webspe.net/wp-content/uploads/2023/05/vscode-multiple-img-tag.jpg)
この状態で、command
+shift
+L
を入力します。
すると、ファイル内の全てのimgタグが選択された状態になります。
![全てのimgタグが選択された様子](https://webspe.net/wp-content/uploads/2023/05/vscode-img-all-selected.jpg)
その後は同様に、command
+shift
+P
でコマンドパレットを開き、「image」と入力 →「Emmet: イメージ サイズの更新」が表示された状態でEnter
を押します。
![全てのimgタグにwidth, height属性が自動入力された様子](https://webspe.net/wp-content/uploads/2023/05/all-image-width-height-inserted-1024x198.jpg)
以上で、選択した全てのimgタグに、width, height属性が自動で入力されます。
まとめ
VSCodeでimgタグのwidth, height属性を自動入力する方法について解説しました。
今回解説した方法を使用して、効率よくコーディング作業を進めましょう。
また、VSCodeでの作業をより効率化してくれる拡張機能を以下の記事で紹介しているので、是非ご覧ください。