コードの書式設定

[アーティクル]
10/11/2017

Microsoft Expression Web では、コードの外観を変更するオプションや、コードの書式を再設定するその他のオプションを設定できます。

基本的な書式 (改行、余白、およびインデント) を使用すると、コードの読み取りや編集が簡単になります。コードの書式を変更しても、Web ページの外観には影響しません。Expression Web では、これらの書式設定機能を利用して、タグ、属性、値、およびスクリプトのフォントの色やサイズをそれぞれ設定できます。

メモ :
既存のコードで記述されたページを開くと、既定ではそのページのコードの書式が維持されます。[ページ編集オプション] ダイアログボックスの [コードの書式設定] タブの設定値は、新しく作成する Web ページと、追加または編集するコンテンツにのみ適用されます。

コード表示オプションを設定するには

[ツール] メニューで [ページ編集オプション] をクリックします。

[ページ編集オプション] ダイアログボックスの [全般] タブにある [コードビューのオプション] で、次の操作を行います。

項目	目的
テキストを折り返す	コードのすべての行を編集ウィンドウの現在の幅に合わせて折り返します。
自動インデント	Enter キーまたは Return キーを押したときに、現在のレベルのインデントを保持して改行します。
行番号	コードの各行の左側に一意の番号を表示します。
マージン	編集ウィンドウの左に余白を追加し、1 行または複数行をクリックまたはドラッグで選択できるようにします。
無効な HTML を強調表示する	無効な HTML を特定の文字色 (既定値は赤色) と背景色 (既定値は黄色) で表示します。これらの設定は [ページ編集オプション] ダイアログボックスの [色の設定] タブで設定できます。ヒント : 無効なコードまたは互換性のないコードに関する詳細な情報をフローティングウィンドウに表示するには、[コード] ビューで、強調表示されたコードまたは下線が引かれたコードをポイントします。
互換性のない HTML を強調表示する	HTML 標準と互換性のないコードの下に波線の下線を表示します。

ヒント :
[コードビュー] ツールバーでもこれらのオプションを設定できます。詳細については、「[コードビュー] ツールバー」を参照してください。

コードの書式を設定するには

[ツール] メニューで [ページ編集オプション] をクリックします。

[ページ編集オプション] ダイアログボックスの [コードの書式設定] タブで、次の操作を行います。

項目	目的
リセット	オプションを既定値にリセットします。
タグ名を小文字にする	タグを小文字で入力します。大文字は小文字に変換されます。
属性名を小文字にする	属性の名前を小文字で入力します。大文字は小文字に変換されます。
属性名をアルファベット順にする	HTML 属性をアルファベット順に入力します。
タグ内で改行する	タグ内での改行を許可します。1 つのタグを 1 行に収める処理を行いません。
タブのサイズ	[コード] ビューで Tab キーを押したとき、およびコードのインデント書式オプションを使用するときにインデントする空白文字数を設定します。
インデント	入れ子になったコードの左余白のサイズと単位を設定します。
右余白	コードの右余白のサイズを設定します。
スペースとしてタブを挿入する	タブをスペースとして扱います。
タグ	特定タグの書式を設定するには、書式設定するタグを選択し、[改行] セクションおよびその下の各オプションを設定します。たとえば、通常は各リストアイテムの後に表示されるリストアイテムの終了タグ (</li>) を非表示にするには、[タグ] の [li] を選択し、[終了タグを表示しない] を選択します。
CSS	CSS の特定コンポーネントの書式を設定するには、設定するコンポーネントを選択し、[書式設定] で目的のオプションを設定します。たとえば、スタイルの宣言ブロックを開始する開始中かっこ ({) の後に特定の数のスペースを挿入するには、[CSS] の [左かっこ] を選択し、[後のスペース数] ボックスで、設定するスペースの数を指定します。
新しい行のプロパティにインデントを付ける	Expression Web によって記述される CSS 属性にインデントを設定します。
スタイル生成時に短縮形のプロパティを使用する	スタイルを生成するときに、設定済みのプロパティを適用します。たとえば、このオプションがオンの場合は、Expression Web ではスタイルの枠線の属性を設定するだけで、枠線の幅、色、およびスタイルの値が設定されます。このオプションをオフにすると、Expression Web は各枠線属性に属性と値を設定します。

メモ :
コード書式指定オプションには、既存のすべてのページに反映されるものと、指定した後で作成する新規ページのみに反映されるものがあります。既存ページのコードの書式を再設定するには、「既存ページのコードの書式を再設定するには」の手順を参照してください。

既存ページのコードの書式を再設定するには

書式を再設定する Web ページを開きます。
[コード] ウィンドウで、右クリックして、[HTML の書式変更] をクリックします。

特定ページのコード書式に基づいてコードの書式オプションを設定するには

設定の基になる Web ページを開いて、[ツール] メニューの [ページ編集オプション] をクリックします。
[ページ編集オプション] ダイアログボックスの [コードの書式設定] タブで、[現在のページを基準にする] をクリックし、[OK] をクリックします。

コードの色を指定するには

[ツール] メニューで [ページ編集オプション] をクリックします。

[ページ編集オプション] ダイアログボックスの [色の設定] タブで、次の操作を行います。

項目	目的
コードビューの設定	コードの表示設定に切り替えます。
リセット	オプションを既定値に設定します。
表示アイテム	書式を設定するアイテムを選択します。
アイテムの前景、アイテムの背景、スタイル	[表示アイテム] で選択したアイテムのコードの書式を設定します。

コードのフォントを指定するには

[ツール] メニューで [ページ編集オプション] をクリックします。
[ページ編集オプション] ダイアログボックスの [フォントの設定] タブで、[コードビュー] の [フォント] および [サイズ] の値を設定します。

コードの特定行をインデントするには

Web ページの [コード] ビューで、インデントするコードの行にカーソルを置くか、インデントするコードを選択します。
[編集] メニューの [コードビュー] をポイントし、[インデント] または [インデント解除] をクリックします。

次の方法で共有