コードビューでの移動

コードビューでは、他のプロジェクトファイルの表示、ドキュメント内のさまざまな場所への移動、コードの検索ができます。

ファイルの参照

Google Web Designer がコードビューのときは、左側の [ファイル] パネルにプロジェクトフォルダ内のファイルとサブフォルダのリストが表示されます。パネルは自動的に更新され、リストへの変更が反映されます。

ファイルを開く

パネル内のファイルを選択して、新しいタブで開きます。次のファイル形式を開くことができます。

Web Designer で作成した .html ソースファイル

その他の .html ファイル*

.css*

.js*

.json*

.svg*

.xml*

^{* コードビューでのみ編集できます。}

画像ファイル（.jpg / .jpeg、.png、.gif 形式）を開いて表示することもできます。画像のサムネイルを表示するには、ファイルパネルの画像のファイル名にカーソルを合わせます。

Web Designer で開けないファイルはグレー表示されます。

他のプロジェクトや他のフォルダのファイルを開くには、[ファイル] > [開く...] メニューコマンドを使用します。

ファイルのリストをフィルタする

[ファイルをフィルタ] にファイル名の一部を入力すると、それに一致するファイルのみが表示されます。

ファイルパネルを非表示にする

[ファイル] パネルの右上隅にある [折りたたむ] ボタンをクリックすると、ファイルのリストを非表示にできます。[展開する] ボタンをクリックすると、ファイルのリストを再び表示できます。

ドキュメント内での移動

デザインビューで要素を選択してコードビューに切り替えると、選択した要素に該当するコードにカーソルが移動します。

行への移動

フッターバーの行番号または列番号をクリックして移動先の値を入力し、Enter キーを押します。

ミニマップの使用

ウィンドウの右側にあるミニマップには、コードビューのドキュメント全体が縮小表示されます。エディタに表示されているコードの部分は、ミニマップではハイライト表示されます。

ミニマップ内をクリックするとドキュメントの該当部分に移動でき、上下にドラッグするとドキュメントをスクロールできます。

ミニマップはコードビューの設定でオフにできます。

コードの検索

テキストを検索するには、次のように操作します。

[編集] > [検索] を選択するか、Ctrl+F キー（Windows の場合）または ⌘+F キー（Mac の場合）を押して、ウィンドウ下部の検索バーを開きます。

[検索...] に検索キーワードを入力します。

必要に応じて次の検索オプションを切り替えます。

正規表現（.*）

大文字と小文字を区別（Aa）

単語単位（）

選択範囲で検索（）

一致箇所の総数が表示され、カーソル以降の最初の一致箇所がハイライト表示されます。

次の一致箇所を検索するには、をクリックするか、Ctrl+G キー（Windows の場合）または ⌘+G キー（Mac の場合）を押します。

前の一致箇所を検索するには、をクリックするか、Shift+Ctrl+G キー（Windows の場合）または Shift+⌘+G キー（Mac の場合）を押します。

すべての一致箇所を選択して同時に編集するには、[すべて検索] をクリックします。

Esc キーを押すか、X をクリックして、検索バーを閉じます。

テキストを検索のうえ置換するには、次のように操作します。

[編集] > [検索と置換] を選択するか、Ctrl+Shift+F キー（Windows の場合）または ⌘+Shift+F キー（Mac の場合）を押して、ウィンドウ下部の検索と置換バーを開きます。

[検索...] に検索キーワードを入力し、[置換...] に置換後のテキストを入力します。

テキストの置換に加えて、テキストの検索の場合と同じ方法（上記を参照）も使用できます。

現在の一致箇所を置換して次の一致箇所を検索するには、[置換] をクリックします。

すべての一致箇所を置換するには、[すべて置換] をクリックします。