IntelliJ IDEA 2021.1 ヘルプ

HTML

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

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

HTML ファイルを作成する

  • メインメニューからファイル | 新規を選択し、次にリストから HTML ファイルを選択します。IntelliJ IDEA は HTML ファイルテンプレートに基づいてスタブファイルを作成し、それをエディターで開きます。

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

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

Path completion in HTML

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

Generating a reference by dragging and dropping

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

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

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

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

    Wrapping a text in a tag

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

ドキュメントの検索

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

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

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> tag

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

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

  • タグまたは属性の上にマウスポインターを置くと、IntelliJ IDEA はドキュメントポップアップにその参照をすぐに表示します。

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

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

  • ドキュメントの表示を自動的にオフにするには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | コード編集に移動して、マウス移動でクイックドキュメントを表示するチェックボックスをオフにします。

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

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

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

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

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

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

IntelliJ IDEA は、組み込みのプレビューをエディタータブで開き、HTML ファイルまたはリンクされた CSS ファイルと JavaScript ファイルに加えた変更を保存し、プレビューを自動的に再読み込みします。これにより、ブラウザーに切り替えてページをリフレッシュする必要がなくなるため、作業が速くなります。

IntelliJ IDEA 組み込みプレビューを開く

  • メインメニューから表示 | ブラウザーで開くを選択し、リストから the IntelliJ IDEA icon 組み込みのプレビューを選択します。

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

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

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

  • メインメニューから表示 | ブラウザーで開くを選択し、リストから目的のブラウザーを選択します。

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

  • または、マウスポインターをコードの上に置いてブラウザーアイコンのポップアップを表示し、目的のブラウザーを示すアイコンをクリックします。 Chrome Firefox Safari Edge Opera

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

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

  • 設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、ツール | ウェブブラウザーに進みます。

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

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

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

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

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

埋め込みイメージの表示

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

IntelliJ IDEA でイメージを表示する

  • プロジェクトツールウィンドウでイメージファイルを選択して F4 を押します。

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

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

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

  • プロジェクトツールウィンドウでイメージファイルを選択し、外部エディターに移動を選択するか、Ctrl+Alt+F4 を押します。

    IntelliJ IDEA opens the image in the editor that is used in your OS by default. You can configure another image editor in which the IDE will open files.

Change the default external editor

  1. Right-click an image in the editor and select Edit Path to External Editor from the context menu.

    You can also press Ctrl+Shift+A and type Edit Path to External Editor .

  2. In the Path to External Editor dialog, specify the path to the application in which you want to open images and click 保存 .

    Specifying the path to an external editor

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

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

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

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

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

構文ハイライトの構成

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、エディター | カラースキーム | HTML に移動します。

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

関連ページ:

HTML、CSS、JavaScript でのライブ編集 | IntelliJ IDEA

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

ファイルテンプレート | IntelliJ IDEA

ファイルテンプレートは、作成する新しいファイルのデフォルトコンテンツの仕様です。作成するファイルのタイプに応じて、テンプレートは、そのタイプのすべてのファイルで期待される初期コードとフォーマットを提供します(業界または言語の標準、企業ポリシー、またはその他の理由による)。例: これは、定型コード、作成者に関するメタ情報などです。IntelliJ IDEA は、新しいファイルを作成するときに提案される、サポートされているすべてのファイルタイプの定義済みテンプレートを提供します。推奨されるファイルタ...

コードの生成 | IntelliJ IDEA

IntelliJ IDEA は、一般的なコード構造と繰り返し要素を生成するための複数の方法を提供し、生産性の向上に役立ちます。これらは、新しいファイルを作成するときに使用されるファイルテンプレート、コンテキスト、さまざまなラッパー、または文字の自動ペアリングに基づいて異なる方法で適用されるカスタムまたは定義済みのライブテンプレートのいずれかです。さらに、IntelliJ IDEA はコード補完および Emmet サポートを提供します。このトピックでは、Java 固有の標準コード構成(コンストラクター...

外部ツール | IntelliJ IDEA

サードパーティのアプリケーションを外部ツールとして定義し、IntelliJ IDEA から実行できます。IntelliJ IDEA を使用すると、プロジェクトから外部ツールにコンテキスト情報をコマンドライン引数(現在選択されているファイルやプロジェクトのソースパスなど)として渡し、ツールによって生成された出力を表示し、実行前にツールを起動するように構成できます。/debug 構成など。IntelliJ IDEA に追加できる外部ツールにはいくつかの種類があります。ローカルツールは、コンピューター...

色とフォントの構成 | IntelliJ IDEA

開発者として、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを使用します。色とフォントスタイルは、このテキストのフォーマットに使用され、一目で理解しやすくなります。IntelliJ IDEA は、好適な色とフォントを定義するカラースキームを使用しています。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択設定 / 環境設定ダイアログで、を選択します。配色を選択する...

Testify ツールキットの使用 | IntelliJ IDEA

プログラミングは必ずしも単純なプロセスではありません。特に、小さなコードをアプリケーションに追加し、アプリケーション全体が意図したとおりに動作するようにする必要がある場合。この場合、テストはコードの品質を維持し、信頼性を向上させるのに役立ちます。IntelliJ IDEA は Testify ツールキットをサポートしています。Testify は、アサーション、モックオブジェクト、テストスイートを扱ういくつかのパッケージを提供しています。Testify を使用すると、スイートとメソッドを定期的なテ...