
HTMLでタグで後からタグで囲むのが面倒くさい、、、何かいい方法はないかしら?



それならタグ変換機能を使ってみよう!
こんにちは、suzutoです。
HTMLを書いていて後でタグで囲みたくなった時に楽な方法はないかなと探していたらラップ変換機能という便利機能があったので共有します。
ラップ変換機能を使うと、今よりHTML記述を高速化させることができますので、ぜひお試しください。では詳しく見ていきましょう!
【VScode Cursor対応】ラップ変換機能(タグで囲む)の使い方


「VScode」でも「Cursor」でも設定は同じです。今回は「Cursor」の画面で説明していきます。
まずは、ラップ変換のショートカットキーを変えていきます。(デフォルトでもいいのですが、少々使いにくいので変更推奨です!)
メニュー画面→「基本設定」→「キーボードショートカット」を選択。


「キーボードショートカット」の検索欄で「emmet wrap」と入力して検索。


デフォルトでは「command + Shift + P」でラップ変換の機能を表示させる設定になっています。
少し長いのでお好みでショートカットキーの変更を行います。お好みで設定できます。
(ボクの場合は「command + W」に設定しました。)
ショートカット設定が完了したら実際に使ってみます。
まずは、タグで囲みたいタグや文字を選択してラップ変換のショートカットキー(設定下キー)を押します。
すると、ラップ変換の検索欄が出現するので、囲みたいタグ名を入力します。これで対象をタグで囲むことができます。


さらにタグで囲むことができます。
Emmetなのでクラスをつけたい場合は「.」を使うとクラス名が付与できます。(ちなみにidの場合は「#」を使う)。


さいごに
使い方の手順をおさらいしてみましょう!
「タグで囲みたい対象を選択」→「ショートカットでwrap変換を呼び出す」→「囲みたいタグを入力してEnter」
ラップ変換を使うと、HTMLを高速化できます。
地味ですがかなり便利なのでぜひ使ってみてください。後からタグを追加したい場合などにとても便利ですよ。