IntelliJ IDEA 2026.1 Help

Emmet

Emmet(英語) ツールキットは、HTML、CSS、JSX によるコーディングを強化します。 IntelliJ IDEA を移動せずに Emmet コードテンプレートを使用できます。 テンプレートを正しいマークアップに展開するには、その 略語(英語)を入力して Tab を押します。 Tab を別のキーに置き換えるには、「略語拡張キーを構成する 」を参照してください。

例: HTML ファイルで table>tr*3>td*2 と入力し、 Tab を押して 3 × 2 テーブルのスタブを取得します。

<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>

より複雑な例として、 table#myid>tr.row$*3>td*2 と入力して Tab を押して同じテーブルを取得しますが、 id 属性と各テーブル行のカスタムクラスを使用します。

<table id="myid"> <tr class="row1"> <td></td> <td></td> </tr> <tr class="row2"> <td></td> <td></td> </tr> <tr class="row3"> <td></td> <td></td> </tr> </table>

詳細は、 Emmet チートシート(英語)を参照してください。

IntelliJ IDEA は、RGBA カラー、暗黙、デフォルト、ブール属性を書き込むための新しい構文、 タグの更新アクションなどの機能をサポートしています。

Emmet を有効にして構成する

IntelliJ IDEA では、ネイティブの Emmet テンプレートに加えて、 エディター | ライブテンプレート 設定ページ Ctrl+Alt+S の Zen CSS、 Zen HTML、 Zen XSL ノードにリストされている 200 を超える追加の HTML、CSS、XSL ライブテンプレートを使用できます。

  1. Ctrl+Alt+S を押して設定を開き、 エディター | Emmet を選択します。

  2. 開いた Emmet ページで、Emmet の省略形を展開するキーを選択します。デフォルトでは、 Tab が選択されています。

  3. 特定の言語（HTML、CSS、JSX）で Emmet を有効または無効にするには、 エディター | Emmet | <言語> に移動し、 <言語> Emmet を有効にする チェックボックスを切り替えます。 Emmet ページのコントロールを使用して、さまざまな言語コンテキストで Emmet を構成します。

IntelliJ IDEA を使用すると、Emmet ライブテンプレートを使用およびカスタマイズしたり、カスタムテンプレートを追加したりできます。 次のテンプレートテキストを含むテンプレート エントリ とします。

<entry type="$TYPES$">$END$ <entry>

エントリのリストを生成するには、 “entry-list<entry[number=$]*5″ を入力して Tab を押すだけです。 デフォルトでは、 個数 属性は 型 の前に生成されます。 生成される位置をカスタマイズするには、テンプレートに ATTRS 変数を追加する必要があります。例：

<entry type="$TYPES$" $ATTRS$>$END$ <entry>

ATTRS 変数は、デフォルト値として空の文字列を持つ必要があり、スキップする必要があります。

Emmet でライブテンプレートを使用する

  1. Ctrl+Alt+S を押して設定を開き、 エディター | ライブテンプレート を選択します。

  2. 開いた ライブテンプレート ページで、 Zen HTML、 Zen CSS 、または Zen XSL テンプレートグループを展開し、使用するテンプレートの横にあるチェックボックスをオンにします。

  3. リスト内のテンプレートを選択すると、フォーカスは テンプレートテキスト領域に移動し、そこには選択したテンプレートの設定が表示されます。

  4. テンプレートテキスト フィールドで、必要なテキストと変数をテンプレート本体に追加します。

  5. 変数の編集 ボタンをクリックします。 開いている テンプレート変数の編集ダイアログで、 デフォルト値 フィールドにデフォルトの変数値を指定し、必要に応じて 定義済みはスキップ チェックボックスを選択します。

略語拡張キーを構成する

デフォルトでは、ネイティブ Emmet 省略形および追加のライブテンプレートは Tab を押すことで展開されます。 追加のライブテンプレートに対して、IntelliJ IDEA ではデフォルトの展開キーを再定義できます。 このカスタム設定はネイティブ Emmet サポートのデフォルト設定を上書きしないことに注意してください。このキーのどちらかを使用してテンプレートを展開できるようになります。

ネイティブ Emmet の略語の拡張キーを構成する

  1. Ctrl+Alt+S を押して設定を開き、 エディター | Emmet を選択します。

  2. 開いた Emmet ページで、 略語を展開するキー リストからデフォルトの Tab の代わりに新しい拡張キーを選択します。

Emmet ライブテンプレートの拡張キーを構成する

  1. Ctrl+Alt+S を押して設定を開き、 エディター | ライブテンプレート を選択します。

  2. 開いた ライブテンプレート ページで、 Zen HTML、 Zen CSS 、または Zen XSL テンプレートグループを展開し、目的のテンプレートを選択します。 フォーカスは テンプレートテキスト領域に移動します。

  3. 展開 リストからテンプレートを展開するキーを選択します。

コードのブロックを Emmet テンプレートで囲む

  1. エディターで、囲むコードブロックを選択して Ctrl+Alt+J を押すか、メインメニューから コード | 囲む | ライブテンプレート を選択します。

  2. テンプレートの選択 リストから Emmet を選択します。

    テンプレートのコンテキストメニューを選択

  3. 使用する Emmet の略語を入力し、 Enter を押します。

    Emmet: タイプの省略形

    右側のリストに注意してください。 下矢印をクリックして、最近適用された Emmet ライブテンプレートの履歴を表示します。

    最近適用された Emmet ライブテンプレートの履歴

    また、色の表示に気をつけてください。 有効な Emmet 省略形を入力すると、背景は緑色になります。 ただし、存在しない省略形を入力すると背景が赤くなります。

    入力した略語は存在せず、背景が赤に変わります

編集ポイント間を移動する

HTML と XML では、 編集ポイント間、つまり Emmet テンプレートを適用できるコードのポイント間を移動できます。

  • キャレットを前の編集点に移動するには、 移動 | 前の Emmet 編集ポイント を選択するか、 Alt+Shift+[ を押します。

  • キャレットを次の編集点に移動するには、 移動 | 次の Emmet 編集ポイント を選択するか、 Alt+Shift+] を押します。

2026 年 3 月 30 日
ライブテンプレートを共有するアノテーション