VS Code - 選択文字列部分をhtmlタグで囲む(wrap)方法3通り

HTMLコーディングしていると、 選択した文字列をdivタグやpタグ等で囲みたい場合があります。

Visual Studio Codeではタグで囲む方法がいくつかあるので、 ここでは3通りの方法を紹介します。

選択行が一行の場合

タグで囲みたい選択行が一行の場合に便利な方法です。

例えば、「あいうえお」 という文字列を p タグで囲みたい場合は、 p{あいうえお} と入力し、Enterを押します。

すると、<p>あいうえお</p> というように p タグで囲まれます。

要は、タグ{選択文字列}です。


あいうえおかきくけこ

 ↓ 文字列を p{} で囲む

p{あいうえおかきくけこ}

 ↓Enterキー で展開される

<p>あいうえおかきくけこ</p>

 ↓次に「かきくけこ」をsmall{} で囲む

<p>あいうえおsmall{かきくけこ}</p>

 ↓ Enterキー で展開される

<p>あいうえお<small>かきくけこ</small></p>

こんか感じでタグで囲むことができます。

但し、この方法は選択行が1行の場合のみで、複数行の場合は使えません。

EmmetのWrap with Abbreviation を使用する

この方法なら複数行でもタグで囲むことができます。

まずタグで囲みたい部分を選択します。

「Ctrl + Shift + P」でコマンドパレットを表示し、 「Emmet: Wrap with Abbreviation」を表示させてEnterキーを押します。

コマンドパレット

タグの入力ボックスが出てくるので囲みたいタグ p や div 等を入力してEnterキーを押すと 選択部分がタグで囲まれます。

タグを入力

この方法はコマンドパレットを表示して、 「Emmet: Wrap with Abbreviation」を呼び出すというプロセスが必要なので少し面倒です。

拡張機能「htmltagwrap」を使う

Visual Studio Code の拡張機能「htmltagwrap」をインストールして使います。

htmltagwrap

使い方を説明すると、

・まずタグで囲みたい部分を選択します。(複数行もOKです)

・ショートカットキー「Alt + W」を押すと、選択部分がデフォルトで p タグで囲まれます。

pタグ

上図のカーソル部分は点滅状態になっています。

もしdivタグで囲みたい場合は、そのまま続けて「div」と入力すると div タグで囲まれます。

divタグ

ショートカットキー「Alt + W」を覚えて追えばいいだけなので、この方法が一番おすすめです。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする