アウトライナーには、ドキュメント内の要素とクリップのツリービューが表示されます。[アウトライナー] パネルの表示、非表示は、[ウィンドウ] メニューで切り替えることができます。
アウトライナーの要素のリストでは、ステージ上の要素と同じ機能をいくつか利用できます。たとえば、アウトライナーで要素をクリックして選択する、要素を右クリックしてその要素固有のコマンドのポップアップ メニューを表示する、編集ダイアログがあるコンポーネントをダブルクリックして編集ダイアログを開く、といった操作が可能です。
整理
複数ページの HTML5 広告や HTML ドキュメントの場合、アウトライナーでドキュメント内の各ページにある要素を整理できます。グループ編集モードでは、グループ内の要素のみが表示されます。
デフォルトでは、アウトライナーには詳細モードのタイムライン内のレイヤと同じ順序で要素が一覧表示されます。デザインビューの設定で、要素の表示順序を DOM 順に切り替えることができます。
要素を展開する、または折りたたむ: アウトライナー内の要素の横にある矢印をクリックして、ネスト要素の表示と非表示を切り替えることができます。
すべてのネスト要素を展開する、または折りたたむ: 要素の横にある矢印をダブルクリックすると、その要素の下に表示されるすべての要素を展開したり折りたたんだりできます。また、Windows の場合は Ctrl キー、Mac の場合は ⌘ キーまたは Alt キーを押しながら矢印をクリックしても、同じことが行えます。
要素を並べ替える: 要素をリスト内の目的の場所にドラッグします。要素が移動する場所に黄色の線が表示されます。子要素を別の親要素にドラッグすることもできます。
要素をネストする: 要素を親要素となる要素上にドラッグすることで、要素をネストできます。親要素となる要素の周囲に黄色のボックスが表示されます。
選択
選択した内容は、ステージ、詳細モードのタイムライン、アウトライナーに反映されます。つまり、ある要素をこのいずれかで選択すると、他の 2 つでもその要素が選択されます。Google Web Designer は必要に応じて、ネスト要素内の別のレベルまたは別のページに切り替えます。現在の親要素のラベルは黄色で表示されます。
要素の選択: 選択する要素をクリックします。
複数の要素の選択: 同じ親要素を共有している複数の要素を選択できます。
- Ctrl キー（Windows）または ⌘ キー（Mac）を押しながら、追加で選択する要素をクリックします。
- 要素の範囲を選択するには、最初の要素をクリックして、Shift キーを押しながら最後の要素をクリックします。
要素の選択解除: Ctrl キー（Windows）または ⌘ キー（Mac）を押しながら、選択を解除する要素をクリックします。
要素内への移動: 要素をダブルクリックしてその内部に移動すると、その要素を現在の親要素にすることができます。既存の子要素を編集したり、親要素の下に新しい要素をネストしたりすることができます。要素のコンポーネントに編集ダイアログがある場合は、ダブルクリックすると編集ダイアログが開きます。
要素のタイプとステータス
アウトライナーでは、各要素のタイプを示すアイコンが、要素 ID、名前、テキスト コンテンツ（存在する場合）とともに表示されます。また、以下のステータス アイコンも表示されます。
- ひし形のアイコンは、要素に動的データ バインディングがあることを示します。
- ガイドレイヤには、クリックするとガイドレイヤを通常の要素に戻すことができるアイコンが表示されます。
- 非表示の要素とロックされている要素はステータス アイコンで示され、そのアイコンをクリックすると、その要素を再表示またはロック解除できます。表示されている要素やロックされていない要素にカーソルを合わせると、その要素を非表示またはロックできるアイコンが表示されます。
各要素タイプのアイコン
ページ
| メインページ | |
| ページ |
要素
| グループ | |
| div | |
| 画像 | |
| amp-img（AMP ドキュメント内の画像） | |
| 動画要素です | |
| テキスト コンテナ | |
| 番号付きリスト | |
| 箇条書き | |
| リンク |
図形
| パス（ペンツールで描画） | |
| 長方形 | |
| 楕円 | |
| 線 |
コンポーネント
| ジェスチャー コンポーネント | |
| 画像ボタン コンポーネント | |
| パララックス コンポーネント | |
| タップ領域コンポーネント | |
| タップして通話 / テキスト送信コンポーネント | |
| 360 度ギャラリー コンポーネント | |
| カルーセル ギャラリー コンポーネント | |
| ギャラリー ナビゲーション コンポーネント | |
| スワイプ ギャラリー コンポーネント | |
| 翻訳ギャラリー コンポーネント | |
| amp-carousel コンポーネント | |
| 音声コンポーネント | |
| 動画コンポーネント | |
| YouTube コンポーネント | |
| 3D モデルビューア コンポーネント | |
| 画像効果コンポーネント | |
| パーティクル エフェクト コンポーネント | |
| スプライト シート コンポーネント | |
| Swirl コンポーネント | |
| ボタン コンポーネント | |
| チェックボックス コンポーネント | |
| プルダウン コンポーネント | |
| ラベル コンポーネント | |
| 数値入力コンポーネント | |
| ラジオボタン コンポーネント | |
| スライダー コンポーネント | |
| テキスト フィールド コンポーネント | |
| カレンダーに追加コンポーネント | |
| 日付の入れ替えコンポーネント | |
| 地図コンポーネント | |
| ストリートビュー コンポーネント | |
| iframe コンポーネント | |
| 星評価コンポーネント |
背景要素
| 長方形背景シェイプ | |
| 楕円背景シェイプ | |
| ポリゴン背景シェイプ |
クリップ
| 音声クリップ | |
| 動画クリップまたは画像クリップ |
ステータス アイコン
| ダイナミック バインディングまたはバリエーション バインディングあり | |
| ガイドレイヤ | |
| 非表示 / 表示（カーソルを合わせると表示） | |
| ロック / ロック解除（カーソルを合わせると表示） |
フィルタリング
アウトライナーに表示される要素のリストはフィルタリングできます。要素がフィルタに一致する場合、親要素と他の祖先要素も表示されるため、一致する要素がドキュメント構造内のどこにあるかを確認できます。
要素をフィルタリングするには、[アウトライナー] パネルの上部にある虫メガネアイコン の横のスペースをクリックし、要素 ID、名前のプロパティ値、タグ名、グループ名の一部を入力します。テキスト コンテンツによってはテキスト要素も一致として表示されます。アセットの名前を入力すると、そのアセットを使用するコンポーネントも一致として表示されます。
要素タイプのフィルタを使用することもできます。
要素タイプのフィルタ
アウトライナーには、テキストや図形などの特定の要素タイプのみを表示するフィルタが含まれています。パネルの上部で、アウトライナーに表示する要素タイプのアイコンをクリックします。要素タイプの複数のフィルタがアクティブになっている場合は、アクティブなフィルタのいずれかに一致する要素が表示されます。
要素タイプのフィルタのアイコン
| 画像と動画を表示 | |
| コンポーネントを表示 | |
| テキストを表示 | |
| 図形を表示 |