検証、レビュー、Vlogなどはこちら

【VScode Cursor対応】HTML記述を高速化させるラップ変換機能(タグで囲む)

当ページのリンクには広告が含まれています。
  • URLをコピーしました!
ティアラ

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

suzuto

それならタグ変換機能を使ってみよう!

こんにちは、suzutoです。

HTMLを書いていて後でタグで囲みたくなった時に楽な方法はないかなと探していたらラップ変換機能という便利機能があったので共有します。

ラップ変換機能を使うと、今よりHTML記述を高速化させることができますので、ぜひお試しください。では詳しく見ていきましょう!

本記事の内容

【VScode Cursor対応】ラップ変換機能(タグで囲む)の使い方

「VScode」でも「Cursor」でも設定は同じです。今回は「Cursor」の画面で説明していきます。

まずは、ラップ変換のショートカットキーを変えていきます。(デフォルトでもいいのですが、少々使いにくいので変更推奨です!)

メニュー画面→「基本設定」→「キーボードショートカット」を選択。

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

デフォルトでは「command + Shift + P」でラップ変換の機能を表示させる設定になっています。

少し長いのでお好みでショートカットキーの変更を行います。お好みで設定できます。

(ボクの場合は「command + W」に設定しました。)

ショートカット設定が完了したら実際に使ってみます。

まずは、タグで囲みたいタグや文字を選択してラップ変換のショートカットキー(設定下キー)を押します。

すると、ラップ変換の検索欄が出現するので、囲みたいタグ名を入力します。これで対象をタグで囲むことができます。

さらにタグで囲むことができます。

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

さいごに

使い方の手順をおさらいしてみましょう!

「タグで囲みたい対象を選択」→「ショートカットでwrap変換を呼び出す」→「囲みたいタグを入力してEnter」

ラップ変換を使うと、HTMLを高速化できます。

地味ですがかなり便利なのでぜひ使ってみてください。後からタグを追加したい場合などにとても便利ですよ。

 

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

suzutoのアバター suzuto デジタルクリエイター

30代|デジタルクリエイター|Webデザイン|
ロイヤルティーカッププードルと暮らしてます。デザインやカメラ、撮影、編集に関することを書いています。お仕事の依頼はお問い合わせより

本記事の内容