選択した文字列をまとめてHTMLタグで囲む２つの方法

# 前提

自分が使っているエディタは、Visual Studio Codeです。
VSCode以外のエディタに同じ機能があるかは分かりません。

そして、自分はMacを使っているため、下記で用意している画像素材はMacのみになります。

# 概要

自分がHTMLファイルを編集していた時に思ったこと。それは「◯行目から◯行目をまとめて△△タグで囲いたい」です。行に限らず、１行の中の「このテキストだけをタグで囲みたい」という場合にも使えます。

以前は、こんなやり方で要素を囲んでいました。

・ 囲みたい要素の先頭にタグを記述する。
![スクリーンショット 2020-10-31 11.16.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699659/abb2c498-5c54-d9f9-3f8c-484ee790e8c2.png)
・ 閉じタグをコピーして要素の一番後ろにペースト
![スクリーンショット 2020-10-31 11.17.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699659/eef837b0-a76f-c85f-856c-ee8832fec895.png)

正直、この操作はかなり面倒だし、囲みたい要素が何十行ととても多い場合、ペーストする場所を見失ってしまうことも、学習初期の頃はあると思います。

このように閉じタグをコピペすることなく、選択した文字列を一発で囲む方法があるので解説してみます。

# 方法① Emmet：ラップ変換

結論、この方法を使うのがベストです。
もう一つの方法も下で解説していますが、正直この方法だけで知っておけばいいと思います。

## 0. Emmet記法について

この要素をタグで囲む方法は、Emmetを知らない方でも簡単に使うことができます。

Emmetを知っていたほうがより便利に使えますので、Emmetについて知りたい方は、はにわまんさんがあげている下記の記事を参照してみてください。
[Emmetで素早くHTML/CSSコーディング！書き方と対応ツールの紹介](https://haniwaman.com/emmet/)

Emmetは5〜10分程度で勉強できるかと思います。

## 1. 設定方法

### 1-1. 設定方法 ( Windowsの場合 )

__[ Step 1 ]__
・ VSCodeを開く
・ 画面左上の ファイル を選択する
・ ユーザー設定を選択する
・ キーボードショートカットを選択する

__[ Step 2 ]__
・ Emmet：ラップ変換 ( wrapWithAbbrevation ) を探す
　　補足：「 Emmet ラップ 」とか「 Emmet wrap 」などで検索すればすぐに出ます。
・ 「 Emmet：ラップ変換 」をダブルクリック or その左にある＋( プラス )マークをクリック

__[ Step 3 ]__
・ 登録したいショートカッキーを入力
・ Enterキーで登録

これで設定は完了です。

### 1-2. 設定方法 ( Macの場合 )

__[ Step 1 ]__
・ VSCodeを開く
・ 画面左上の Code を選択する
・ 基本設定 を選択する
・ キーボードショートカット を選択する
![スクリーンショット 2020-10-31 12.17.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699659/9c3519ba-ec86-90c9-491f-2a7d66383f96.png)

__[ Step 2 ]__
・ Emmet：ラップ変換 ( wrapWithAbbrevation ) を探す
　　補足：「 Emmet ラップ 」 とか「 Emmet wrap 」などで検索すればすぐに出ます。
・ 「 Emmet：ラップ変換 」 をダブルクリック or その左にある＋( プラス )マークをクリック
![スクリーンショット 2020-10-31 12.18.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699659/bcdcae5a-65a4-3a3b-3429-d72c87d9a4f7.png)

__[ Step 3 ]__
・ 登録したいショートカッキーを入力
・ returnキーで登録
![スクリーンショット 2020-10-31 12.35.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699659/f2dbb70d-b00f-d3a0-d197-f878e65b2a0a.png)

これで設定は完了です。

自分は「 Command + M 」で登録しています。画像が「 Shift + Command + M 」になっているのは、Macのスクリーンショットの操作によるものです。

__補足__
画像のように「Shift + Command + M」だと、下に「 １つの既存のコマンドがキーバインドを使用しています 」と書いています。このようにデフォルトで登録されているショートカットキーがたくさん存在します。それでも登録はできますが、デフォルトでの登録がされていないキーの組み合わせで登録するのがいいと思います。

## 2. 使い方 ( Windows / Mac 共通 )

・ 囲みたい要素を選択する
![スクリーンショット 2020-10-31 12.19.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699659/32196f95-2a29-1c56-1fb1-f15323502766.png)

・ 登録したショートカットキーを入力する
・ ( Emmet記法で )コードを入力する
![スクリーンショット 2020-10-31 12.22.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699659/321254e3-fa64-a2e5-0a16-5744f1afdae9.png)

段落ごとではなく、同じ行の中の「このテキストだけを囲みたい」といった場合でも、操作可能です。
例えばspanタグで囲むような場合です。
![スクリーンショット 2020-10-31 12.24.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699659/88a20045-b4f4-8e00-d840-a41579f4279b.png)

これで操作は完了です。


# 方法② VSCode拡張機能「htmltagwrap」

## 1. 設定方法 ( Windows / Mac 共通 )

__[ Step 1 ]__
・ VSCodeを開く

__[ Step 2 ]__
・ 拡張機能「 htmltagwrap 」で検索
・ htmltagwrap をインストール
![スクリーンショット 2020-10-31 12.46.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699659/c92b7182-bce3-74c3-8b4e-143bb6ecf949.png)

これで設定は完了です。

## 2. 使い方

## 2-1. 使い方 ( Windowsの場合 )

・ 囲みたい要素を選択する
・ Alt + W を入力
・ 初期のタグはpタグなので、囲いたいタグ名に編集する ▷ Enterキー

これで操作は完了です。

## 2-2. 使い方 ( Macの場合 )

・ 囲みたい要素を選択する
・ Option + W を入力
・ 初期のタグはpタグなので、囲いたいタグ名に編集する ▷ returnキー
![スクリーンショット 2020-10-31 12.47.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699659/537bc133-1844-f771-96c4-7662279a3267.png)

これで操作は完了です。

# どちらの機能を使うのが良い？

結論 __「 方法① Emmet：ラップ変換 」__ を使うべきです。

冒頭でもこの結論を述べましたが、自分が方法①をオススメしている理由は以下です。

その理由は、__拡張機能「 htmltagwrap 」はEmmetに対応していないからです。__よって、クラス名などの入力をまとめて行うことができません。

個人的には、Emmetを知らない人でも、記法を学んでから方法①を実践する方が今後の作業スピードの短縮効果があると思っています。