WebStorm 2024.1 ヘルプ

HTML

WebStorm は、構文やエラーのハイライト、コードスタイルに応じたフォーマット、構造検証、コード補完、デバッグセッション中のオンザフライプレビュー(ライブ編集)やコードエディターの専用プレビュータブなど、HTML を強力にサポートします。

HTML ツールプラグインを有効にする

この機能は、デフォルトで WebStorm にバンドルされて有効になっている HTML ツール(英語)プラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。

  1. Ctrl+Alt+S を押して設定を開き、プラグインを選択します。

  2. インストール済みタブを開き、HTML ツールプラグインを見つけて、プラグイン名の横にあるチェックボックスを選択します。

HTML 仕様は、設定 Ctrl+Alt+S言語 & フレームワーク | スキーマと DTD ページのデフォルトの HTML 言語レベル設定で構成できます。デフォルトでは、W3C の仕様 HTML 5.0 が想定されます。

HTML ファイルを作成する

  1. ファイル | 新規に移動し、リストから HTML ファイルを選択します。

  2. 表示されるダイアログで、拡張子を付けずに新しいファイルの名前を入力します。新しいファイル名の前にディレクトリ構造全体を入力できます。ネストされたディレクトリがまだ存在しない場合は、作成されます。

    Create an HTML file

    WebStorm は、HTML ファイルテンプレートに基づいてスタブファイルを作成し、エディターで開きます。

HTML ファイルで参照を作成する

<script><link><img> タグ内で、WebStorm は、参照しているファイルへのパスの補完を提案します。

Path completion in HTML

または、プロジェクトツールウィンドウで、参照する JavaScript、CSS、イメージファイルを選択し、HTML ファイルにドラッグします。WebStorm は、<head> 内に <script><link>、または <img> タグを生成します。<img> タグの場合、WebStorm は width 属性と height 属性も生成します。

Generating a reference by dragging and dropping

コードフラグメントをタグでラップする

  1. ラップするコードフラグメントを選択して Ctrl+Alt+T を押すか、メインメニューからコード | 囲むを選択します。

  2. リストからタグで囲むを選択します。WebStorm は、選択を括弧のペア(<> および </>)で囲みます。

  3. 左括弧 <> の内側にタグを入力します。WebStorm は、終了括弧 </> のタグを自動的に埋めます。

    Wrapping a text in a tag

コードの生成の詳細を参照してください。

ドキュメントの検索

ほとんどの HTML タグと属性について、WebStorm は対応する MDN 記事の要約を表示できます。この要約は、ドキュメントポップアップに表示されます。これには、タグまたは属性の非推奨ステータス、およびさまざまなブラウザーとの互換性に関する情報も表示されます。

タグまたは属性がすべてのバージョンのブラウザーで使用可能な場合、WebStorm はその互換性に関する情報を表示しません。

HTML quick documentation: attribute is available in all versions of browsers

それ以外の場合、ドキュメントポップアップにはタグまたは属性をサポートするブラウザーとそのバージョンも一覧表示されます。

HTML quick documentation: compatible browsers are listed

タグまたは属性が廃止予定の場合、ポップアップはこのステータスについても通知します。

HTML quick documentation: status Deprecated for <big> タグ " src="https://resources.jetbrains.com/help/img/idea/2024.1/ws_html_quick_doc_deprecated.png" class="article__bordered-element" title="HTML  クイックドキュメント: <big> タグのステータスは非推奨 " data-dark-src="https://resources.jetbrains.com/help/img/idea/2024.1/ws_html_quick_doc_deprecated_dark.png" width="600" height="385"></big></figure><section class=

タグまたは属性のドキュメントを表示する

  • タグまたは属性にキャレットを置き、Ctrl+Q を押すか、メインメニューから表示 | クイックドキュメントルックアップを選択します。

  • タグまたは属性の上にマウスを移動すると、WebStorm はすぐにその参照をドキュメントポップアップに表示します。

    この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下のドキュメントポップアップの動作の構成を参照してください。

ドキュメントポップアップの動作を構成する

  • コードシンボルの上にマウスを移動したときにドキュメントの自動的な表示をオフにするには、ポップアップで the Show Options Menu icon をクリックし、マウス移動時に表示するオプションを無効にします。

  • ドキュメントポップアップを速くまたは遅く表示するには、設定ダイアログ(Ctrl+Alt+S)を開き、エディター | 一般 | コード補完に移動してから、ドキュメントのポップアップを表示するチェックボックスを選択して遅延時間を指定します。

ブラウザーでタグと属性の MDN ドキュメントを開く

  • ドキュメントポップアップ Ctrl+Q で、下部のリンクをクリックします。

  • Shift+F1 を押すか、メインメニューから表示 | 外部ドキュメントを選択します。

HTML ファイルのプレビュー出力

HTML コードの出力は、組み込みの WebStorm プレビューで開くことも、外部の任意のブラウザーで開くこともできます。

デフォルトでは、ブラウザーまたは組み込みプレビューで HTML ファイルを開いた後、この HTML ファイル (またはリンクされた JavaScript またはスタイルシートファイル) が手動または自動で保存されるたびに、WebStorm はページを自動的に再読み込みします。「保存して保存する」を参照してください。変更を元に戻します

入力時にページを再読み込みするようにデフォルトの動作を変更して、HTML または関連ファイルへの変更がブラウザーまたは組み込みプレビューにすぐに表示されるようにすることができます。以下の自動再ロードを構成するを参照してください。

WebStorm 組み込みプレビュー

WebStorm の組み込みプレビューにより、ブラウザーに切り替えてページをリフレッシュする必要がなくなるため、作業が高速化されます。プレビューは別のエディタータブで開かれ、再読み込みの動作に応じて、入力時または変更の保存時に自動的に再読み込みされます。

Built-in preview: default reload on save

WebStorm 組み込みプレビューを開く

  • メインメニューで、表示 | ブラウザーで開くに移動し、リストから the WebStorm icon ビルトインプレビューを選択します。

  • または、コードの上にマウスを移動してブラウザーアイコンのポップアップを表示し、the WebStorm icon をクリックします。

ブラウザーで HTML ファイルをプレビューする

HTML コードが本番環境で適切にレンダリングされることを確認するには、特定のブラウザーで HTML ファイルをプレビューします。

組み込みの WebStorm Web サーバーを使用している場合、再ロードの動作に応じて、変更を保存するとき、または入力すると、ページが自動的に再ロードされます。

  • 表示 | ブラウザーで開くに移動し、リストから目的のブラウザーを選択します。

    デフォルトの WebStorm ブラウザーを開くには、デフォルトを選択します。

  • または、コードの上にカーソルを置くとブラウザーアイコンのポップアップが表示され、目的のブラウザーを示すアイコンをクリックします。 Chrome Firefox Safari Edge Opera

  • ブラウザーが 1 つしかない場合は、Alt+F2 を押してください。

ポップアップでブラウザーアイコンを設定する

設定ダイアログ(Ctrl+Alt+S)を開き、ツール | ウェブブラウザーとプレビューに移動します。

  • 一部のアイコンを非表示にするには、不要なブラウザーのアクティブチェックボックスをオフにします。

  • ポップアップ全体を非表示にするには、HTML ファイル用チェックボックスをオフにします。

自動再ロードを構成する

デフォルトでは、ブラウザーまたは組み込みプレビューで HTML ファイルを開いた後、この HTML ファイル (またはリンクされた JavaScript またはスタイルシートファイル) が手動または自動で保存されるたびに、WebStorm はページを自動的に再読み込みします。「保存して保存する」を参照してください。変更を元に戻します

Reloading a HTML page on save

ページの再ロードをトリガーするファイルを保存すると、WebStorm は了解ツールチップを表示します。

Reload on save: Got it tooltip

入力時にページを再読み込みするようにデフォルトの動作を変更して、HTML または関連ファイルへの変更がブラウザーまたは組み込みプレビューにすぐに表示されるようにすることができます。

Built-in preview: reload preview on change
  1. 設定 Ctrl+Alt+Sツール | ウェブブラウザーとプレビューページに移動します。または、了解ツールチップの構成をクリックします。

  2. 再ロードの動作領域で、ブラウザーでページを再ロードおよび組み込みプレビューでページを再ロードリストから、Web ブラウザーおよび組み込みプレビューでページの自動再ロードをトリガーするアクションを選択します。デフォルトでは、保存時が選択されています。

    • 対応する HTML ファイルまたはリンクされたファイルを更新するときにページを再ロードするには、変更時を選択します。

    • 自動アップロードを抑制するには、無効を選択します。

エディターで Web ページの HTML ソースコードを表示する

  1. Ctrl+Shift+A を押し、リストから URL からソースコードを開く ... を選択します。

  2. 表示される URL を開くダイアログで、Web ページの URL アドレスを入力するか、リストから以前に開いた URL を選択します。

埋め込まれたイメージを表示する

WebStorm は、HTML ファイルに埋め込まれたイメージを表示するいくつかの方法を提供します。ソースへのナビゲーションを使用するか、外部のグラフィカルエディターでイメージを開くか、オンザフライでイメージをプレビューするを使用できます。

WebStorm でイメージを表示する

  • プロジェクトツールウィンドウ ( 表示 | ツールウィンドウ | プロジェクト ) で、イメージファイルを見つけて選択します。

    あるいは、エディター内のイメージへの参照にキャレットを置き、Ctrl+B を押します。

  • 別のタブではなくポップアップでイメージをプレビューするには、そのイメージへの参照を選択して Ctrl+Shift+I を押します。

外部エディターでイメージを表示する

  • プロジェクトツールウィンドウ ( 表示 | ツールウィンドウ | プロジェクト ) で、イメージファイルを右クリックし、外部エディターに移動を選択します。

    または、Ctrl+Alt+F4 を押します。

    WebStorm は、OS でデフォルトで使用されているエディターでイメージを開きます。IDE がファイルを開く別のイメージエディターを設定できます。

デフォルトの外部エディターを変更する

  1. エディターでイメージを右クリックし、コンテキストメニューから外部エディターへのパスを編集を選択します。

    Ctrl+Shift+A を押して Edit Path to External Editor と入力することもできます。

  2. 外部エディターへのパスダイアログで、イメージを開くアプリケーションへのパスを指定し、保存をクリックします。

    Specifying the path to an external editor

インクルードファイルの抽出

HTML コードの断片を別のインクルードファイルに抽出できます。<script> タグ内の JavaScript コードブロック全体も同様に抽出できます。WebStorm はまた、選択されたフラグメントの複製の代わりに参照を追加することを提案します。

  1. エディターで、抽出するコードブロックを選択し、メインメニューまたは選択したコンテキストメニューからリファクタリング | 抽出 | インクルードファイルの抽出を選択します。

  2. 表示されるインクルードファイルの抽出ダイアログで、拡張子を付けずにインクルードファイルの名前とそれを格納するディレクトリを指定します。事前定義されたディレクトリをそのまま使用するか、別のディレクトリを選択することができます。

  3. 準備ができたら OK をクリックします。WebStorm は、選択したソースコードをターゲットディレクトリ内の指定されたファイルに抽出し、ソースファイルに対応するリファレンスを生成します。

構文ハイライトを構成する

好みや習慣に応じて HTML 対応の構文ハイライトを設定できます。

  1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | カラースキームの切り替え | HTML に移動します。

  2. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。

カスタム HTML タグを構成する

WebStorm は、すべての標準 HTML タグを認識し、マークアップ内のすべての不明なタグを報告します。カスタム HTML タグに依存するフレームワークを使用している場合、そのようなタグも不明として報告されます。その場合、誤検知になります。

  • 単一の HTML タグを既知のカスタムタグのリストに追加するには、ハイライトされたタグにキャレットを置き、Alt+Enter を押してカスタム HTML タグに [ タグ ] を追加を選択します。

  • 複数のカスタム HTML タグを構成するには、設定ダイアログ (Ctrl+Alt+S) のエディター | インスペクションページに移動し、HTML | 不明なタグインスペクションを見つけて、右側のインスペクションオプションでカスタム HTML タグのリストを構成します。

関連ページ:

HTML、CSS、JavaScript でのライブ編集

ライブ編集機能を使用すると、HTML、CSS、JavaScript コードに加えた変更は、ページを再ロードせずにブラウザーにすぐに表示されます。ライブ編集は、HTML、CSS、JavaScript を含む、または生成する他のファイルタイプに対して機能します。Node.js アプリケーションのデバッグのときにライブ編集を使用することもできます。詳細については、「Node.js アプリケーションでのライブ編集」を参照してください。デフォルトでは、ライブ編集は HTML および CSS ファイルに対し...

コードの生成

WebStorm は、一般的なコード構造と繰り返し要素を生成する複数の方法を提供し、生産性の向上に役立ちます。これらは、新しいファイルを作成するときに使用されるファイルテンプレート、コンテキスト、さまざまなラッパー、文字の自動ペアリングに基づいて異なる方法で適用されるカスタムまたは事前定義されたライブテンプレートのいずれかです。さらに、WebStorm はコード補完および Emmet のサポートを提供します。に移動して、生成できる利用可能な構成を含むポップアップメニューを開きます。ライブテンプレート...

変更の保存と復元

WebStorm は、ファイルに加えた変更を自動的に保存します。保存は、実行、デバッグ、バージョン管理操作の実行、ファイルまたはプロジェクトのクローズ、IDE の終了などのさまざまなイベントによってトリガーされます。ファイルの保存は、サードパーティのプラグインによってトリガーすることもできます。自動保存をトリガーするイベントのほとんどは事前定義されており、構成することはできませんが、変更が失われることはなく、ローカルヒストリーですべてを見つけることができます。自動保存動作を設定する設定ダイアログ...

色とフォント

開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。WebStorm では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択を押して設定を開き、を選択します。あるいは...

JavaScript

WebStorm を使用すると、JavaScript および Node.js を使用して最新の Web、モバイル、デスクトップアプリケーションを開発できます。WebStorm は、React、Angular、Vue.js、その他のフレームワークもサポートし、Web 開発用のさまざまなツールとの緊密な統合を提供します。JavaScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、コードインスペクションおよびクイックフィックス...