オブジェクト属性の表示

[プロパティ] パネルには、キャンバス上で選択されたオブジェクトの属性が表示されます。たとえば、ハイパーリンクオブジェクトを選択すると、[プロパティ] パネルには、ハイパーリンクに関連するさまざまな属性 (例、[ドラッグ有効]) が表示されます。オブジェクトが選択されていない場合、HTML ページまたはドキュメント全体の一般属性が表示されます。[プロパティ] パネルは、HTML キャンバスまたはドキュメントキャンバスを使用している際に使用できます。属性は、カテゴリ別または名前順にソートすることができます。

[イベント] ボタンをクリックして、各イベントのプロパティを選択することもできます。[イベント] ボタンをクリックすると、オブジェクトへの関連付けが可能な JavaScript イベントのリストが表示されます。使用可能なイベントは、選択したオブジェクトのタイプにより異なります。たとえば、レポートオブジェクトに使用可能なイベントは、ボタンオブジェクトより多くあります。オブジェクトが選択されていない場合は、HTML ページのイベントが表示されます。各イベントの [...] (参照) ボタンをクリックすると、選択されているオブジェクトに対して、そのイベントの関数ブロックが作成されます。作成された関数は、[埋め込み JavaScript] および [埋め込み CSS] タブに表示されます。このタブで、選択したイベントが発生したときに実行する JavaScript コードを入力することができます。

[プロパティ] パネルのカスタマイズについての詳細は、オブジェクト属性の表示を参照してください。

色の選択

[背景色]、[境界色]、[色] などの色に関係するプロパティの場合、[色の選択] ダイアログボックスを使用する代わりに、各プロパティに色の 16 進数値を直接入力することもできます。[色の選択] ダイアログボックスで色を選択した場合、選択した色の 16 進数値が、対応する色プロパティに自動的に入力されます。[色の選択] ダイアログボックスについての詳細は、オブジェクト属性の表示を参照してください。

サイズ

選択したオブジェクトのサイズプロパティは、[左]、[上]、[幅]、[高さ] テキストボックスを使用して設定することができます。デフォルト設定はピクセル単位で、これらの設定は [LOCATION：左、上、幅、高さ] プロパティにも表示されます。[左]、[上]、[幅]、[高さ] テキストボックスでは [<設定しない>]、[自動]、[継承] のいずれかを選択することもできますが、[LOCATION] テキストボックスには値がピクセル単位でのみ表示されます。

HTML キャンバス上のオブジェクトの位置には、[位置] テキストボックスの値も影響します。デフォルト値は [絶対] ですが、次の値のいずれかに変更することができます。

• <設定しない>   要素は、最初に配置された ([静的] 以外) 上位要素を基準に相対的に配置されます。
• 継承   このプロパティは親要素から継承されます。
• 絶対   要素は、最初に配置された ([静的] 以外) 上位要素を基準に相対的に配置されます。これがデフォルト値です。
• 固定   要素は、ブラウザウィンドウを基準に相対的に配置されます。
• 相対   要素は、通常の位置を基準に相対的に配置されるため、[左] プロパティを [20px] に設定すると、要素の左端に 20 ピクセルが追加されます。
• 静的   複数の要素は、ドキュメントフローに表示される順序で描画されます。
• 初期値   このプロパティをデフォルト値に設定します。

コントロール

HTML キャンバスの [パラメータ] タブには、コントロールの [名前] または [ユニーク ID] 属性が自動的に表示されます。

• [プロパティ] パネルでコントロールの [名前] 属性を変更すると、新しい名前が [パラメータ] タブに自動的に反映されます。
• [名前] 属性が存在しないコントロールもあります。これらのコントロールでは、[プロパティ] パネルに [ユニーク ID] 属性が自動的に表示されます。

HTML オブジェクトのプロパティパネルのカスタマイズ - プロパティツールバーの使用

[プロパティ] パネルのツールバーには、[プロパティ] パネルの表示をカスタマイズするためのボタンおよびメニューがあります。

HTML コンポーネントのサイズ変更 - 子要素の自動サイズ変更オプションの使用

[子要素の自動サイズ変更] オプションを使用すると、HTML ページ上のすべての子コンポーネントのサイズを、そのページが表示されるモニタやデバイスの最大画面領域に収まるよう自動的に変更することができます。たとえば、利用可能領域のコンポーネント占有率は、1 つのコンポーネントでは 100 パーセントになりますが、2 つのコンポーネントではそれぞれ 50 パーセントになります。

HTML ページをさまざまなデバイス上で実行する場合にこのオプションを使用すると、コンポーネントやコントロールが画面領域外に表示されなくなります。ただし、これらのコンポーネントやコントロールを使用するには、スクロール操作が必要になります。使用するデバイスによっては、利用可能領域に適合するようコンポーネントの位置が変更される場合があります。たとえば、デスクトップモニタではレポートとグラフが左右に並んで表示されている場合でも、タブレット上で実行すると、両方のコンポーネントが上下に並べて配置される場合があります。同様に、24 インチのデスクトップモニタと 26 インチのデスクトップモニタで実行する場合にも、表示位置が変更されることがあります。

自動サイズ変更の [有効] プロパティには、ドキュメントレベルで動作するプロパティと、コンポーネントレベルで動作するプロパティがあります。

• 子要素の自動サイズ変更 - 有効   このプロパティは、ドキュメントレベルで設定します。[はい] に設定すると、ドキュメント内の一部またはすべての子コンポーネントのサイズが自動的に変更されます。

  子要素の自動サイズ変更の [有効] プロパティは、フォーム、グループボックス、パネルコンテナオブジェクトのコンポーネントレベルでも設定することができます。

• 自動サイズ変更 - 有効   このプロパティは、ドキュメント内のコンポーネントごとに設定します。このオプションは、次のいずれかに設定することができます。
  • はい   コンポーネントのサイズを自動的に変更します。

    コンポーネントの [最小幅] および [最小高さ] オプションを使用して、コンポーネントが極端に小さくなることを防止することができます。それぞれのテキストボックスに、幅、高さ、または両方の最小値をピクセル単位で入力します。コンポーネントのサイズが最小幅または最小高さに達すると、スクロールバーが表示され、コンポーネントのサイズがそれ以上に縮小されなくなります。

  • いいえ   ドキュメントおよび他のコンポーネントのサイズが変更された場合でも、特定のコンポーネントのサイズが自動的に変更されないようにします。HTML ページを実行すると、このオプションが設定されたコンポーネントが最初に表示されます。

既存の HTML ファイルで [子要素の自動サイズ変更] オプションを有効することも、このオプションを有効にした新しい HTML ファイルを作成することもできます。

既存の HTML ファイルで子要素の自動サイズ変更を有効にするには

手順
1. HTML ファイルを開きます。

   HTML キャンバスが開きます。

2. ドキュメントレベルの [プロパティ] パネルで、[子要素の自動サイズ変更] セクションの [有効] プロパティを [はい] に設定します。
3. ページ上の各コンポーネントのサイズを自動変更する場合は、コンポーネントごとに [自動サイズ変更の設定] の [有効] プロパティを [はい] に設定します。
4. HTML キャンバスを右クリックし、[レイアウトの更新] を選択します。

   コンポーネントのサイズが自動的に変更され、キャンバス上のブランク領域全体を占有します。

自動サイズ変更を有効にした新規 HTML ファイルを作成するには

手順
1. [ホーム] タブの [コンテンツ] グループで、[HTML/ドキュメント] をクリックします。

   別の方法として、コンテンツの作成がサポートされるフォルダを選択し、ハンバーガーメニューまたは [環境ツリー] パネルのコンテキストメニューを使用して、新しい HTML ファイルを作成することもできます。

   HTML/ドキュメントウィザードが開きます。

2. HTML ページの作成先ディレクトリに移動し、[次へ] をクリックします。

   HTML/ドキュメントウィザードの [テーマと設定] ウィンドウが開きます。

3. [その他の設定] エリアで、[レポート/グラフサイズの自動設定] のチェックをオンにします。

   このオプションを選択すると、ドキュメントレベルの [子要素の自動サイズ変更] セクションの [有効] プロパティが [はい] に設定されます。

4. [完了] をクリックします。

   HTML キャンバスが開きます。

5. ページ上の各コンポーネントのサイズを自動変更する場合は、コンポーネントごとに [自動サイズ変更の設定] の [有効] プロパティを [はい] に設定します。

子要素の自動サイズ変更オプションの使用

[子要素の自動サイズ変更] オプションを使用する際は、ネイティブ HTML キャンバスの通常の作業で要求される以上の操作と条件を伴います。これは、[子要素の自動サイズ変更] オプションを有効にすると、キャンバス上でコンポーネントが自動的に移動し、サイズが変更されるためです。

HTML キャンバスへのコンポーネントの追加

[子要素の自動サイズ変更] オプションが [はい] に設定されたキャンバスに新しいコンポーネントを追加すると、新しいコンポーネントの描画領域を確保するために既存のコンポーネントが一時的に外側へ移動します。描画後に既存のコンポーネントが再配置され、サイズが自動的に変更されます。

キャンバスがリフレッシュされない場合は、キャンバスを右クリックし、[レイアウトの更新] を選択します。キャンバス領域の下側および右側には、キャンバスからコンテキストメニューにアクセスにするための余白が表示されます。このキャンバス領域の余白は、実行時には表示されません。

注意：[レイアウトの更新] の実行でコンポーネントのサイズが変更されない場合は、プロパティを確認してください。ドキュメントレベルで [子要素の自動サイズ変更] の [有効] プロパティが [はい] に設定され、コンポーネントの [自動サイズ変更の設定] の [有効] プロパティが [はい] に設定されている必要があります。コンポーネントの [自動サイズ変更の設定] の [有効] プロパティが [いいえ] に設定されている場合、そのコンポーネントのサイズはキャンバス上でも、実行時にも自動変更されません。

コンポーネントの順序を変更するには、コンポーネントを別のコンポーネントの前面 (手前) または左側にドラッグします。

以下は、フォーム、グループボックス、パネルコンテナに適用されます。

• フォーム、グループボックス、パネルにコンポーネントおよびコントロールが配置されている場合、これらのコンテナの [子要素の自動サイズ変更] の [有効] プロパティを [はい] に設定し、さらに [自動サイズ変更の設定] の [有効] プロパティを [はい] に設定する必要があります。
• フォーム、グループボックス、パネルの子要素であるコンポーネントの場合、そのコンポーネントの [自動サイズ変更の設定] の [有効] プロパティは自動的に [はい] に設定されます。フォーム、グループボックス、パネルの子要素であるコントロールの場合、[自動サイズ変更の設定] の [有効] プロパティを手動で [はい] に設定する必要があります。
• フォーム、グループボックス、パネルでは、配置する列数を [列数] プロパティで設定する必要があります。たとえば、3 つのレポートまたはグラフを横に並べて配置する場合は、[列数] プロパティ値を 3 に設定します。

オブジェクトの [自動サイズ変更の設定] の [有効] プロパティが [いいえ] に設定されている場合、そのオブジェクトを利用可能領域の幅全体に表示するには、[幅] プロパティを [100%] に設定する必要があります。

注意：ページがロードされ、画面サイズが変更された後は、レポートおよびグラフは自動的に再実行されません。コンテンツをリフレッシュするには、レポートおよびグラフを再実行する必要があります。グラフの出力フォーマットが HTML5 の場合は、グラフコンテンツが自動的にリフレッシュされるため、再実行する必要はありません。

コンテナ内にコンテンツを追加するには

手順
1. コンテンツを追加するコンテナを選択して固定します。
2. [コンポーネント] タブの [一般要素] グループで、コンテナに追加するオブジェクト (例、テキストボックス) を選択します。
3. コンテナ内を再度クリックし、オブジェクトを追加します。たとえば、テキストボックスを描画し、テキストを入力します。
4. 追加したオブジェクトを選択します。

   要素のサイズを自動変更する場合は、[プロパティ] パネルで [自動サイズ変更の設定] の [有効] プロパティを [はい] に設定します。

   コンテナ内で要素を固定する場合は、[いいえ] を選択します。

5. キャンバスを右クリックし、[レイアウトの更新] を選択します。

   追加したコンテンツがコンテナの内側に表示されます。

コンテナの使用

オブジェクトの [自動サイズ変更の設定] の [有効] プロパティが [いいえ] に設定されている場合、そのオブジェクトを [子要素の自動サイズ変更] の [有効] プロパティが [はい] に設定されたコンテナ内に配置すると、そのオブジェクトはコンテナの左上に移動します。

コンテナの [子要素の自動サイズ変更] の [有効] プロパティが [はい] に設定されている場合、そのコンテナにレポートまたはグラフを追加すると、そのレポートまたはグラフの [自動サイズ変更の設定] の [有効] プロパティが自動的に [はい] に設定されます。

タブ、アコーディオン、ウィンドウコンテナの [子要素の自動サイズ変更] の [有効] プロパティが [はい] に設定されている場合、そのコンテナに複数のレポートまたはグラフを追加する際は、[列数] プロパティを使用します。ドロップダウンリストから列数を選択し、必要に応じてコンテナ内のコンテンツの位置を調整します。これにより、すべてのブラウザでコンテンツが同様に配列されます。[列数] プロパティを使用しない場合、ブラウザごとにコンテンツの配列が変わる場合があります。

色の選択ダイアログボックス