PhpStorm 2020.2 ヘルプ

HTML

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

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

HTML ファイルを作成する

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

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

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

Path completion in HTML

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

Generating a reference by dragging and dropping

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

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

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

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

    Wrapping a text in a tag

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

ドキュメントの検索

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

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

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 を押すか、メインメニューから表示 | クイックドキュメントルックアップを選択します。

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

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

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

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

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

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

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

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

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

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

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

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

    ブラウザアイコンポップアップの表示を抑制するには、HTML ファイルの場合チェックボックスをオフにします。

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

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

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

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

埋め込みイメージの表示

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

PhpStorm でイメージを表示する

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

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

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

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

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

  2. 開いたイメージダイアログで、目的の外部エディターへのパスを指定します。

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

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

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

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

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

構文ハイライトの構成

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

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

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

最終更新日 :

関連ページ:

HTML、CSS、および JavaScript でのライブ編集

ライブ編集機能を使用すると、HTML、CSS、または JavaScript コードに加えた変更は、ページをリロードせずにブラウザーにすぐに表示されます。ライブ編集は、デバッグセッション中にのみ使用できます。詳細については、Chrome での JavaScript のデバッグを参照してください。ライブ...

ブラウザーの構成

PhpStorm には、HTML ファイルの出力の実行、デバッグ、またはプレビュー中に IDE から自動的にインストールおよび起動できる最も一般的なブラウザの事前定義リストが付属しています。PhpStorm は、標準の手順に従ってブラウザをインストールすることを前提としており、各インストールに、ブラ...

色とフォントの構成

開発者として、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを使用します。色とフォントスタイルは、このテキストの書式設定に使用され、一目で理解しやすくなります。PhpStorm は、好適な色とフォントを定義するカラースキームを使用しています。配色は...

Markdown

Markdownは、プレーンテキストにフォーマット要素を追加するための軽量のマークアップ言語です。PhpStorm は Markdown ファイルを認識し、それらに専用のエディターを提供し、レンダリングされた HTML をライブプレビューで表示します。Markdown エディターは、見出しの管理、太...