HTML
IntelliJ IDEA は、構文やエラーのハイライト、コードスタイルに沿ったフォーマット、構造の検証、コード補完、コードエディター内の 専用プレビュ―タブでのオンザフライプレビューなど、強力な HTML サポートを提供します。
HTML 仕様は、 言語 & フレームワーク | スキーマと DTD 設定ページ Ctrl+Alt+S のデフォルトの HTML 言語レベル設定で構成できます。 デフォルトでは、W3C の仕様 HTML 5.0 が想定されます。
HTML ファイルを作成する
に移動し、リストから HTML ファイル を選択します。
表示されるダイアログで、拡張子を付けずに新しいファイルの名前を入力します。 新しいファイル名の前にディレクトリ構造全体を入力できます。 ネストされたディレクトリがまだ存在しない場合は、作成されます。
IntelliJ IDEA は、 HTML ファイルテンプレートに基づいてスタブファイルを作成し、エディターで開きます。
HTML ファイルで参照を作成する
<script>、 <link> 、または <img> のタグ内でファイルへのパスの入力を開始すると、 IntelliJ IDEA はパスの補完候補を表示します。
または、 プロジェクト ツールウィンドウ（Alt+1 ）で、参照したい JavaScript、CSS、または画像ファイルを選択し、HTML ファイルにドラッグします。 IntelliJ IDEA は、 <head> 内に <script>、 <link> 、または <img> タグを生成します。 <img> タグの場合、IntelliJ IDEA は height 属性と プロパティの値 属性も生成します。
コードフラグメントをタグでラップする
ラップするコードフラグメントを選択して Ctrl+Alt+T を押すか、メインメニューから を選択します。
リストから タグで囲む を選択します。 IntelliJ IDEA は、選択を括弧のペア（
<>および</>）で囲みます。左括弧
<>の内側にタグを入力します。 IntelliJ IDEA は、終了括弧</>のタグを自動的に埋めます。
コードの生成 の詳細を参照してください。
ドキュメントの検索
ほとんどの HTML タグや属性について、IntelliJ IDEA は対応する MDN 記事から概要を表示できます。 この概要は ドキュメント ポップアップに表示され、タグや属性の使用すべきではない状況や、さまざまなブラウザーとの互換性に関する情報も合わせて表示されます。
タグまたは属性がすべてのバージョンのブラウザーで使用可能な場合、IntelliJ IDEA はその互換性に関する情報を表示しません。
それ以外の場合、 ドキュメント ポップ上へにはタグまたは属性をサポートするブラウザーとそのバージョンも一覧表示されます。
タグまたは属性が廃止予定の場合、ポップ上へはこのステータスについても通知します。
タグまたは属性のドキュメントを表示する
タグまたは属性にキャレットを置き、 Ctrl+Q を押すか、メインメニューから を選択します。
タグまたは属性の上にマウスを移動すると、IntelliJ IDEA はすぐにその参照を ドキュメント ポップ上へに表示します。
この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下の ドキュメントポップ上への動作の構成を参照してください。
ドキュメントポップアップの動作を構成する
コードシンボルの上にマウスを移動したときにドキュメントの自動的な表示をオフにするには、ポップアップで
をクリックし、 マウス移動時に表示する オプションを無効にします。ドキュメント ポップアップを速くまたは遅く表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動してから、 ドキュメントのポップアップを表示する チェックボックスを選択して遅延時間を指定します。
ブラウザーでタグと属性の MDN ドキュメントを開く
ドキュメント ポップアップ Ctrl+Q で、下部のリンクをクリックします。
Shift+F1 を押すか、メインメニューから を選択します。
HTML ファイルのプレビュー出力
HTML コードの出力は、組み込みの IntelliJ IDEA プレビューで開くことも、外部の任意のブラウザーで開くこともできます。
デフォルトでは、ブラウザーまたは組み込みプレビューで HTML ファイルを開いた後、この HTML ファイル（またはリンクされた JavaScript またはスタイルシートファイル）が手動または自動で保存されるたびに、IntelliJ IDEA はページを自動で再読み込みします。 変更の保存と元に戻す を参照してください。
入力時にページを再読み込みするようにデフォルトの動作を変更して、HTML または関連ファイルへの変更がブラウザーまたは組み込みプレビューにすぐに表示されるようにすることができます。 以下の 自動再ロードを構成するを参照してください。
IntelliJ IDEA 組み込みプレビュー。
IntelliJ IDEA の組み込みプレビューにより、ブラウザーに切り替えてページをリフレッシュする必要がなくなるため、作業が高速化されます。 プレビューは別のエディタータブで開かれ、再読み込みの動作に応じて、入力時または変更の保存時に自動的に再読み込みされます。
IntelliJ IDEA 組み込みプレビューを開く
メインメニューで、 に移動し、リストから
を選択します。または、コードの上にマウスを移動してブラウザーアイコンのポップ上へを表示し、
をクリックします。
ブラウザーで HTML ファイルをプレビューする
HTML コードが本番環境で適切にレンダリングされることを確認するには、特定のブラウザーで HTML ファイルをプレビューします。
組み込みの IntelliJ IDEA Web サーバーを使用している場合、再ロードの動作に応じて、変更を保存するとき、または入力すると、ページが自動的に再ロードされます。
に移動し、リストから目的のブラウザーを選択します。
IntelliJ IDEA デフォルトブラウザーを開くには、 デフォルト を選択します。
または、コードの上にカーソルを置くとブラウザーアイコンのポップアップが表示され、目的のブラウザーを示すアイコンをクリックします。
ブラウザーが 1 つしかない場合は、 Alt+F2 を押してください。
ポップ上へでブラウザーアイコンを設定する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
一部のアイコンを非表示にするには、不要なブラウザーの アクティブ チェックボックスをオフにします。
ポップ上へ全体を非表示にするには、 HTML ファイル用 チェックボックスをオフにします。
自動再ロードを構成する
デフォルトでは、ブラウザーまたは組み込みプレビューで HTML ファイルを開いた後、この HTML ファイル（またはリンクされた JavaScript またはスタイルシートファイル）が手動または自動で保存されるたびに、IntelliJ IDEA はページを自動で再読み込みします。 変更の保存と元に戻す を参照してください。
ページの再ロードをトリガーするファイルを保存すると、IntelliJ IDEA は 了解 ツールチップを表示します。
入力時にページを再読み込みするようにデフォルトの動作を変更して、HTML または関連ファイルへの変更がブラウザーまたは組み込みプレビューにすぐに表示されるようにすることができます。
ツール | ウェブブラウザーとプレビュー 設定ページ Ctrl+Alt+S に移動します。 または、 了解！ ツールチップで 構成 をクリックします。
再ロードの動作 領域で、 ブラウザーでページを再ロード および 組み込みプレビューでページを再ロード リストから、Web ブラウザーおよび組み込みプレビューでページの自動再ロードをトリガーするアクションを選択します。 デフォルトでは、 保存時 が選択されています。
対応する HTML ファイルまたはリンクされたファイルを更新するときにページを再ロードするには、 変更時 を選択します。
自動アップロードを抑制するには、 無効 を選択します。
エディターで Web ページの HTML ソースコードを表示する
Ctrl+Shift+A を押し、リストから URL からソースコードを開く ... を選択します。
表示される URL を開く ダイアログで、Web ページの URL アドレスを入力するか、リストから以前に開いた URL を選択します。
埋め込まれたイメージを表示する
IntelliJ IDEA は、HTML ファイルに埋め込まれたイメージを表示するいくつかの方法を提供します。 ソースへのナビゲーションを使用するか、 外部のグラフィカルエディターでイメージを開くか、 オンザフライでイメージをプレビューするを使用できます。
IntelliJ IDEAで画像を表示
プロジェクト ツールウィンドウで、イメージファイルを見つけて選択します。
あるいは、エディター内のイメージへの参照にキャレットを置き、 Ctrl+B を押します。
別のタブではなくポップ上へでイメージをプレビューするには、そのイメージへの参照を選択して Ctrl+Shift+I を押します。
外部エディタで画像を表示
プロジェクト ツールウィンドウで、イメージファイルを右クリックし、 を選択します。
または、 Ctrl+Alt+F4 を押します。
IntelliJ IDEA は、OS でデフォルトで使用されているエディターでイメージを開きます。 IDE がファイルを開く 別のイメージエディターを設定できます。
デフォルトの外部エディタを変更
エディターでイメージを右クリックし、コンテキストメニューから 外部エディターのパスを編集… を選択します。
Ctrl+Shift+A を押して
Edit Path to External Editorと入力することもできます。外部エディターへのパス ダイアログで、画像を開くアプリケーションのパスを指定し、 保存 をクリックします。
インクルードファイルの抽出
HTML コードの断片を別のインクルードファイルに抽出できます。 <script> タグ内の JavaScript コードブロック全体も同様に抽出できます。 IntelliJ IDEA はまた、選択されたフラグメントの複製の代わりに参照を追加することを提案します。
エディターで、抽出するコードブロックを選択し、メインメニューまたは選択したコンテキストメニューから を選択します。
表示される インクルードファイルの抽出ダイアログで、拡張子を付けずにインクルードファイルの名前とそれを格納するディレクトリを指定します。 事前定義されたディレクトリをそのまま使用するか、別のディレクトリを選択することができます。
準備ができたら OK をクリックします。 IntelliJ IDEA は、選択したソースコードをターゲットディレクトリ内の指定されたファイルに抽出し、ソースファイルに対応するリファレンスを生成します。
構文ハイライトを構成する
好みや習慣に応じて HTML 対応の構文ハイライトを設定できます。
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
カラースキームを選択し、デフォルトから引き継がれたハイライト設定を受け入れるか、 色とフォント に記載された手順 に従ってカスタマイズしてください。
カスタム HTML タグを構成する
IntelliJ IDEA はすべての標準 HTML タグを認識しており、マークアップ内の不明なタグを報告します。 カスタム HTML タグを利用するフレームワークを使用している場合、そのようなタグも不明なタグとみなされ報告されますが、この状況は誤検知です。
単一の HTML タグを既知のカスタムタグのリストに追加するには、ハイライトされたタグにキャレットを置き、 Alt+Enter を押して カスタム HTML タグに [ タグ ] を追加 を選択します。
複数のカスタム HTML タグを構成するには、 設定 ダイアログ (Ctrl+Alt+S) の ページに移動し、 インスペクションを見つけて、右側のインスペクションオプションでカスタム HTML タグのリストを構成します。
HTML でのクラウド補完と行全体補完
IntelliJ IDEA は HTML コードで クラウド補完と 行全体補完を提供します。
行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを用いて、コード行全体を提案します。 Ultimate サブスクリプションがあれば、IntelliJ IDEA ですぐに使え、追加のライセンスは必要ありません。
HTML で行全体コード補完を有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | インライン補完 を選択します。
ローカルのFull Line 補完候補を有効にする チェックボックスを選択し、 HTML チェックボックスが選択されていることを確認します。
AI アシスタント を搭載したクラウド補完では、プロジェクトのコンテキストに基づいて、単一の行、コードブロック、さらには関数全体をリアルタイムで自動補完できます。
クラウド補完は、コンテキストを考慮して構文的に許容可能なソリューションを提案し、さまざまな コードインスペクションを事前に実行して、エラーの原因となるバリエーションを拒否します。
HTML でクラウド補完を有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | インライン補完 を選択します。
Enable cloud completion suggestions チェックボックスを選択し、 HTML チェックボックスが選択されていることを確認します。
