PhpStorm 2019.3ヘルプ

HTML

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

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

HTMLファイルを作成する

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

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

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

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

ドキュメントの検索

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

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

  • Ctrl+Q を押すか、メインメニューから表示 | クイック・ドキュメント・ルックアップを選択します。PhpStormは、タグまたは属性の簡単な説明を含むドキュメントポップアップを開きます。

    • タグまたは属性がすべてのバージョンのブラウザで使用可能な場合、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

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

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

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

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

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

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

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

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

  1. ファイル | URL を開くを選択します。

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

埋め込みイメージの表示

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

イメージページのプレビューの外観を確認して設定します。

PhpStormでイメージを表示するには

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

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

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

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

  1. イメージページ(WindowsおよびLinuxの場合はファイル | 設定 | エディター | イメージ、macOSの場合はPhpStorm | 環境設定 | エディター | イメージ)の外部エディターへのパスを設定します。

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

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

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

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

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

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

構文強調表示の構成

好みや習慣に応じてHTML対応の構文強調表示を設定できます。

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

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

最終更新日: 2020年1月15日

関連ページ:

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

ライブ編集機能を使用すると、HTML、CSS、またはJavaScriptコードに加えた変更は、ページを再ロードせずに直ちにブラウザに表示されます。ライブ編集はデバッグセッション中にのみ使用可能です。ライブ編集は、HTML、CSS、またはJavaScriptを含むまたは生成する他のファイルタイプで機能...

ブラウザの設定

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

色とフォントの構成

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

Emmetサポート

EmmetおよびEmmetバージョン1.1は、HTML、CSS、またはJSXコードの開発を高速化するツールキットです。PhpStormを移動せずにEmmetコードテンプレートを使用できます。テンプレートをマークアップに展開するには、その略語を入力して展開キーまたはショートカットを押します。デフォルト...

Markdown

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