activities
latest
false
重要 :
このコンテンツの一部は機械翻訳によって処理されており、完全な翻訳を保証するものではありません。
UiPath logo, featuring letters U and I in white
ワークフローに関するアクティビティ
Last updated 2024年12月6日

開発ツール

[フォームを作成] アクティビティの [開発ツール] プロパティを使用して、フォームをデバッグしたり、CSS スタイルを試したりできます。有効化すると、実行時に開発者ツールである開発ツールが開きます。

このチュートリアルでは、開発ツールで CSS スタイルを試す方法について説明します。

重要: 開発ツールで追加したカスタマイズは一時的なものです。CSS スタイルをフォームに永続的に適用するには、HTML 要素コンポーネントにカスタム CSS クラスを作成し、そこに、開発ツールで試すコードを入力する必要があります。

チュートリアル

開発ツールを使用するには、以下の手順を実行します。

  1. [フォームを作成] アクティビティの [プロパティ] パネルで、以下をオンにします。

    1. 開発ツール

    2. サニタイズを無効化。このプロパティを指定すると、フォームのパフォーマンスが向上します。

  2. フォーム コンポーネントをフォーム デザイナーに追加します。この例では、 HTML 要素 コンポーネントをドラッグ アンド ドロップします。このコンポーネントを使用して、他のフォーム コンポーネントの外観をカスタマイズします。

    1. HTML 要素コンポーネントの [表示] タブで、[コンテンツ] セクションに移動します。

    2. 他のコンポーネントの外観を変更する CSS <style> クラスを入力します。<style> タグを記述し、クラスの名前を入力します。

      この CSS クラスの名前を覚えておいてください。この名前は、CSS スタイルを他のフォーム コンポーネントに適用するときに使用します。

    3. 2.3. ユースケースに一致するプロパティを CSS クラスに追加します。この例では、background-color プロパティを追加し、green に設定します。以下の CSS コードをご覧ください。
      <style> .customclass{background-color: green;} </style><style> .customclass{background-color: green;} </style>
    4. 2.4. コンポーネントを保存します。

  3. テキスト フィールド コンポーネントをフォーム デザイナーにドラッグ アンド ドロップします。

    1. [表示] タブの [カスタム CSS クラス] フィールドに移動し、HTML 要素で作成した CSS クラスの名前を入力します。この例では、「customclass」と入力します。
    2. コンポーネントとフォームを保存します。

  4. ファイルを実行します。[開発ツール] ウィンドウが開きます。

    1. 次のアイコン docs image をクリックして、フォーム レンダラーテキスト フィールド コンポーネントを選択します。作成した CSS クラスが開発ツールの [スタイル] タブに表示されます。この例では、customclass が表示されます。


    2. 開発ツールで、作成した CSS クラスに移動して CSS スタイルをリアルタイムで試します。この例では、customclass 内に border-style プロパティを追加し、solid に設定します。
    3. 別の border-color プロパティを追加し、deeppink に設定します。
  5. CSS スタイルを試したら、フォームに永続的に適用できます。HTML 要素コンポーネントの [コンテンツ] セクションに移動し、試してみたプロパティを CSS クラスに追加します。

    この例では、customclassborder-style プロパティと border-color プロパティを追加します。
    <style> .customclass{background-color: green;
      border-style: solid;
      border-color: deeppink;}
    </style><style> .customclass{background-color: green;
      border-style: solid;
      border-color: deeppink;}
    </style>
  6. コンポーネントとフォームを保存します。

サンプル ワークフロー

ワークフロー全体を確認するか、今後の参考にするには、XAML の例をダウンロードしてください。

  • チュートリアル
  • サンプル ワークフロー

このページは役に立ちましたか?

サポートを受ける
RPA について学ぶ - オートメーション コース
UiPath コミュニティ フォーラム
Uipath Logo White
信頼とセキュリティ
© 2005-2024 UiPath. All rights reserved.