MENU
  • カメラ
  • 動画編集
  • 写真編集
  • Webデザイン
  • お問い合わせ
ティアグラフ
  • カメラ
  • 動画編集
  • 写真編集
  • Webデザイン
  • お問い合わせ
  • カメラ
  • 動画編集
  • 写真編集
  • Webデザイン
  • お問い合わせ
 検証、レビュー、Vlogなどはこちら

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

2024 6/15
コーディング
2024年6月15日
当ページのリンクには広告が含まれています。
  1. ホーム
  2. コーディング
  3. 【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を高速化できます。

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

 

コーディング
コーディング

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

Follow @bell_LoneWolf Follow Me
よかったらシェアしてね!
  • URLをコピーしました!
  • Photoshopで大理石風の背景を作る方法
  • 【VScode Cursor設定】タブのスペースを減らす方法

この記事を書いた人

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

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

関連記事

  • 【VScode Cursor設定】タブのスペースを減らす方法
    2024年6月16日
  • 【Webサイト制作】簡単!ハンバーガーボタンの作り方【後編】
    2024年4月20日
  • 【Webサイト制作】簡単!ハンバーガーボタンの作り方【前編】
    2024年4月18日
  • CSSアニメで作るカラーボールのイメージ画像
    【CSSアニメ】回転する綺麗なカラーボールの作り方
    2024年4月14日
  • ライトモードとダークモードの切り替えイメージサムネイル
    【Webサイト制作】ダークモードとライトモードの切り替えを実装してみよう!
    2024年4月13日
  • JavaScriptアニメのサムネイル
    【JavaScriptアニメ】タイトルの周りに動く枠線を作る方法
    2024年4月12日
  • 【CSS】背景透過画像とCSSアニメーションでオシャレなキラキラバナーを表示させる方法
    2024年1月29日
category
  • ChatGPT (7)
  • Webデザイン (14)
  • カメラ (28)
  • コーディング (8)
  • デザインツール (22)
  • 仕事 (6)
  • 写真 (13)
  • 写真編集 (12)
  • 動画編集 (18)
サイト管理人プロフィール
プロフィール

suzuto(スズト)
ティアグラフの管理人です。
30代|フォトグラファー|Webクリエイター|
ロイヤルティーカッププードルと暮らしてます。
写真や動画、デザインに関することを書いています。お仕事の依頼はお問い合わせより

◆写真素材コチラ
◆Xコチラ
◆お問い合わせはコチラ
アシスタントプロフィール
プロフィール

ティアラ
管理人のアシスタント兼撮影モデル
ロイヤルティーカッププードルの女の子
11月6日生まれ 九州出身
趣味はモデルとグルメ
ハリウッド女優を目指している
◆ティアラのInstagramコチラ
人気記事
  • 【ファイナルカットプロ】縦動画の作成方法を解説します
  • 【iPhoneでペット撮影】可愛く撮影する3つのコツ
  • 【ファイナルカットプロ】やっておくべきオススメ設定4選【動画編集をもっと効率的に】
Portfolio

【ポートフォリオまとめサイト】

 

© ティアグラフ.

本記事の内容