こんにちは、さち です。
普段、ウェブサイトを作るときは「Visual Studio Code(以下:VSCode)」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。
今回は、この VSCode で「要素」を別の新しい HTML タグ(新しい要素)で簡単に囲む方法について書いていきます。
便利ですし意外とよく使うので、ぜひ覚えて使いこなして下さい!
欲しい機能は標準実装されている
<span>
タグが3個あります。これらすべてをサクッと<div>
で囲んでみましょう。
<span>
をすべて選択して、「ショートカットキー(※設定方法は後述)」を押します。
- 入力欄が出るので、囲みたい「HTML タグ」を Emmet 方式で書きます。
- すべての
<span>
を、mirapa
クラスを持つ<div>
で囲むことができました。
欲しかった機能は VSCode に標準で実装されています。拡張機能が必要ないのはありがたいですね。
しかし、問題なのは「機能」はあるけど「ショートカットキー」が割り当てられていないということ。
ショートカットキーを使いたい場合は、自分で割り当てる必要があります。その手順を次項で見ていきましょう。
ショートカットキーを割り当てる
「要素を新しいタグで囲む」機能に、自分が使いやすい「ショートカットキー」を新しく割り当ててみましょう。
- ウィンドウ左下(アクティビティバー)にある「(管理)」をクリック。
- 「キーボードショートカット」をクリック。
- 「検索」に
emmet wrap
と入力します。
- 「Emmet: ラップ変換」コマンドの左端にある「(キーバインドの追加)」アイコンをクリック。
- 割り当てたいショートカットキー(今回は Ctrl + Shift + G キー)を押して、Enter キーを押します。(ショートカットキーが他の機能と競合している場合はこちらの方法で解決する)
- ショートカットキーを割り当てることができました。
- これで、ショートカットキーを使用して……
- 簡単に「要素」を新しい「タグ」で囲めるようになりました。
コメント