視覚補助を表示または非表示にする

重要:  この記事は機械翻訳されています。機械翻訳についての「免責事項」をお読みください。この記事の英語版を参照するには、ここをクリックしてください。

デザイン ビューでページを操作している場合、コンテンツ領域や余白、スペースなど通常はデザイン ビューに表示されないページ要素の変更が必要になる場合があります。この場合、視覚補助を使用すると、非表示の、または空白のページのデザイン要素をすべて表示し、ページの構造とレイアウトを完全に制御できるようになります。視覚補助は、コンテンツ、デザイン、レイアウト、ページの構造の操作を簡単にします。

このトピックでは、視覚補助について紹介し、各視覚補助の機能を説明し、デザイン ビューで操作する場合に視覚補助をすばやく表示または非表示にする方法を示します。

このトピックの内容

視覚補助とは

それぞれの視覚補助の表示

視覚補助を非表示を切り替える

視覚補助とは

視覚補助は、デザイン ビューのページに表示し、ページ上のすべての非表示要素と空の要素、およびプロパティを表示するためのインジケータです。視覚補助を使用すると、空白の HTML タグや非表示の Microsoft ASP.NET コントロールなど、スタイルが非表示で空白の要素を見つけることができます。また視覚補助を使用することにより、ページ上のページ要素、スペース、コンテンツ ブロック、コンテンツ領域 (ASP.NET ページとダイナミック Web テンプレート) の余白とスペースを表示することができます。

視覚補助を非表示にすると、デザイン ビューのページ レイアウトは、次の図に示すようにブラウザのページ レイアウトと非常に似たものになります。

視覚補助をオフにしたデザイン ビューのページ

次の図では、同じページ — デザイン ビューですが既定の視覚補助を表示していない — が異なる外観で表示されます。

既定の視覚補助をオンにしたデザイン ビューのページ

視覚補助を表示する場合、一部の要素はさまざまな色の点線で表示されます。各点線は異なる視覚補助を表します。たとえば、前の例の可視境界線視覚補助では、コンテンツ領域がピンクの点線、テーブル要素が白の点線、編集不可能な領域が淡い灰色でそれぞれ表示されます。選択した視覚補助に応じて、ページ上にコンテンツ領域、スタイルが非表示または不可視にマークされた要素、非表示の ASP.NET コントロール、ASP.NET コントロール エラーを表示することができます。次のセクションでは、それぞれの視覚補助を詳細に説明します。

ページの先頭へ

視覚補助で表示されるものとは

このセクションでは、Microsoft Office SharePoint Designer 2007 で使用できる視覚補助を挙げ、それぞれの視覚補助の用途と動作 (および用途の制限) を説明し、デザイン ビューでの視覚補助の外観を示します。

Microsoft SharePoint サイトのページには、通常は多くのページ、多くのデザイン要素が使用されています。視覚補助の機能を詳細に特定し、表示する場合、空白のページを作成し、要素をいくつか挿入する方法が簡単です。

ブロック選択

ブロック選択視覚補助は、2 とおりの様式で表示されます。

  • ブロック内をクリックすると、そのブロックの周囲に矩形が点線で表示されます。

  • 対応するタグ名も [クイック タグ セレクタ] に表示されます。このタグをクリックすると、ブロックが選択され、余白とスペースが表示されます。

ブロック選択視覚補助は、段落、リスト、リスト アイテム、フォーム、unpositioned div、アドレス、block quote、横線、中央のタグに使用できます。

注: 点線の矩形、余白、サイズ変更ハンドルは、ブロック選択視覚補助が選択されていない場合でも、画像、positioned div、テーブルなどの一部の要素で使用できます。

内部にカーソルを置いて、ブロック選択視覚補助をオンにしたブロック

[クイック タグ セレクタ] のブロックを選択する場合は、矢印をクリックし、[タグの選択] をクリックします。この場合、ハンドルと同時にブロックの余白とスペースが表示されます。ハンドルを使用して、ブロックとブロックの余白およびスペースのサイズを変更できます。次の図に示すように、余白は淡赤で、スペースは淡青で表示されます。

注: [クイック タグ セレクタ] でブロックを選択すると、余白とスペース視覚補助を表示していない場合でも、ブロックの余白とスペースが表示されます。

対応するタグをクイック タグ セレクターで選んだ、選択済みブロック

1. 対応するタグ名を表示した [クイック タグ セレクタ]

2. 淡赤で表示される余白

3. 淡青で表示されるスペース

4. ブロックのサイズ変更ハンドル

5. 余白のサイズ変更ハンドル

ページ内で位置の定まった要素 (画像など) を移動するには、要素をドラッグします。該当する要素のブロックに対応するタグを、ページ内の希望する位置までドラッグします。

可視境界線

可視境界線視覚補助は、ページ上の境界線が非表示の要素、または境界線のない要素の周囲に、境界線を点線で表示します。可視境界線は、テーブル、配置された要素、フォーム コンテナ、コンテンツ領域などの要素の周囲に表示されます。画像などの固有のスタイルを持つ要素は、視覚補助が選択されても可視境界線が表示されません。可視境界線は、境界線のない一定サイズの要素 (幅と高さの固定された要素) の周囲にも表示されます。段落をサイズ変更し、ページ内の任意の場所をクリックすると、その段落の要素に可視境界線が表示されます。

マスタ ページでは、次の図に示すように、コンテンツ領域にピンクの点線が、テーブル要素に白の点線が、編集不可能な領域が淡い灰色に表示されます。

可視境界線視覚補助をオンにしたページ

1. コンテンツ領域にピンクの点線が表示される。

2. テーブル要素に白い点線が表示される。

3. 編集不可能な領域は淡い灰色で示される。

空のコンテナ

空のコンテナ視覚補助は、次の図に示すように、ページ上の空の要素の周囲に点線を示します。

注: デザイン ビューでは、Office SharePoint Designer 2007 は他のブラウザが表示しないため、空の要素を表示しません。空のコンテナ視覚補助を表示すると、ページ上のすべての空の要素が表示され、デザイン ビューのページ レイアウトが変わる場合がありますが、ブラウザでは変化しません。

空のコンテナ視覚補助をオンにしたページ

1. ページ上の点線の矩形で囲まれた空の要素

余白とスペース

余白とスペース視覚補助は、ページ要素の周囲の余白とスペースを表示します。余白は淡赤で、スペースは淡青で表示されます。この視覚補助は、各ページ要素の余白と空白を表示します。

注: 余白とスペースの変更に、余白とスペース視覚補助を使用することはできません。代わりに、要素を選択し、ブロック選択視覚補助を使用し、サイズ変更ハンドルをドラッグします。

余白とスペース視覚補助をオンにしたページ

1. 淡青で表示されるスペース

2. 淡赤で表示される余白

CSS Display:none 要素

CSS Display:none 要素視覚補助は、ページの対応するスタイル シートで定義された要素を display:none として表示します。

注: このような要素は、ブラウザに表示されません。

CSS Visibility:hidden 要素

CSS Visibility:hidden 要素視覚補助は、ページの対応するスタイル シートで定義された要素を visibility:hidden として表示します。

注: このような要素はブラウザに表示されませんが、そのレイアウトはデザイン ビューで表示できます。

ASP.NET 非ビジュアル コントロール

ASP.NET 非ビジュアル コントロール視覚補助は、ページ上に表示されないすべての ASP.NET コントロール - HiddenField コントロールや Data Source コントロールなど - を表示します。

非ビジュアル ASP.NET コントロールを示すページ

1. ASP.NET ページの ASP.NET 非ビジュアル コントロールの外観

ASP.NET コントロールのエラー

ASP.NET コントロールのエラー視覚補助は、ページ上の ASP.NET コントロールにエラーが発生した場合 (データ ソースへの接続の失敗や、間違ったページ プロパティの存在など)、エラー メッセージを表示します。

ASP.NET コントロールのエラーを示すページ

テンプレートの領域名

テンプレートの領域名視覚補助は、コンテンツ領域の周囲に紫の境界線を表示し、また各コンテンツ領域の名前を示すプレースホルダを表示します。

注: この視覚補助は、ASP.NET マスタ ページまたはダイナミック Web テンプレートのいずれかで作成されたページにのみ表示できます。

テンプレートの領域名視覚補助をオンにしたページ

1. ASP.NET マスタ ページの紫の境界線で示されたコンテンツ領域

ページの先頭へ

視覚補助を表示または非表示にする

デザイン ビューで作業する場合、視覚補助の表示と非表示をすばやく切り替えられます。たとえば、コンテンツ領域の作業を容易にする場合は視覚補助を表示します。または、デザイン ビューのページ レイアウトをブラウザに表示されるページ レイアウトに近づける場合は、視覚補助を非表示にできます。

  1. デザイン ビューで編集するページを開きます。

    注: [視覚補助] コマンドは、ページ ビューのいずれか 1 つで使用できます。また [視覚補助] コマンドは、デザイン要素を操作する必要のないスタイル シートなどのファイルでは使用できません。

  2. 視覚補助を表示または非表示にするには、次のいずれかの操作を行います。

    • [表示] メニューの [視覚補助] をポイントし、[表示] をクリックします。サブメニューで選択されたすべての視覚補助が表示または非表示になります。視覚補助を個別に表示または非表示にするには、[視覚補助] サブメニューでクリックします。

    • Ctrl + / キーを押します。[視覚補助] サブメニューで選択されたすべての視覚補助が表示または非表示になります。

    • ステータス バーの視覚補助インジケータをダブルクリックします。[視覚補助] サブメニューで選択されたすべての視覚補助が表示または非表示になります。

      注: [視覚補助] サブメニューで選択した視覚補助は、非表示を選択するまで選択されたままです。これは、Ctrl + / キーを押す、またはステータス バーをダブルクリックして視覚補助を表示する場合、[視覚補助] サブメニューで現在選択されている視覚補助が常に表示されることを意味します。

次の図に、視覚補助を表示または非表示にする方法を示しています。

[視覚補助] サブメニューを示す [表示] メニュー

1. [表示] をクリックして、選択されているすべての視覚補助を表示または非表示にする。

2. [表示] の選択の後、個々の視覚補助をクリックして表示または非表示にする。

3. 選択した視覚補助の外観。既定の視覚補助もある。

4. 選択していない視覚補助の外観。

[視覚補助] がオンまたはオフかをすばやく確認するには、ステータス バーをチェックします。またステータス バーの [視覚補助] セクションをダブルクリックすると、[視覚補助] 設定の [On] と [Off] を切り替えられます。

ステータス バーの視覚補助インジケータ

また、ステータス バーの [視覚補助] セクションにポインタを合わせると、[視覚補助] 設定の現在のステータスが Office SharePoint Designer 2007 のページ レイアウトにどのように影響しているかを説明する注釈が表示されます。

ステータス バーの視覚補助の注釈

ページの先頭へ

注: 機械翻訳についての免責事項: この記事の翻訳はコンピューター システムによって行われており、人間の手は加えられていません。マイクロソフトでは、英語を話さないユーザーがマイクロソフトの製品、サービス、テクノロジに関するコンテンツを理解するのに役立てるため、こうした機械翻訳を提供しています。記事は機械翻訳されているため、用語、構文、文法などに誤りがある場合があります。

スキルを磨く
トレーニングの探索
新機能を最初に入手
Office Insider に参加する

この情報は役に立ちましたか?

ご意見をいただきありがとうございます。

フィードバックをお寄せいただき、ありがとうございます。Office サポートの担当者におつなぎいたします。

×