ボタンタグ

ボタンタグ

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

<button> 

<button>タグはボタンを定義します。

親タグ : <pc>
子タグ   : --

属性

1. テキスト

テキスト 属性は、ボタンにラベルを定義します。 

可能な値
  • 文字列

構文 <button text='さらに詳しく'/>
出力  

 注意:  

  • テキスト 属性は任意です。 
  • テキスト はソース属性として機能します。つまり、 サイズ、太字、斜体、フォントファミリー および 色 は、ボタンのラベルのスタイリング属性であり、 テキストが指定されている場合にのみ適用されます。

2. サイズ

サイズ属性は、ボタンのラベルのフォントサイズを定義します。

可能な値
  • 1から9までの数字。 

構文 <button text='詳しく知る' size='5'/>
出力  

注意:  

  • サイズ属性は任意です。値が指定された場合にのみ適用されます。

3. 太字

太字属性は、ボタンのラベルに太字のフォントスタイルを追加します。

可能な値

デフォルト値 

構文 <button text='知る' bold='true'/>
出力  

 注意:  

  • 太字属性は任意です。値が指定された場合のみ適用されます。

4. イタリック

イタリック 属性は、ボタンのラベルのフォントを斜体にします。

可能な値 

デフォルト値 

構文 <button text='Know More' italic='true'/>
出力  

 注意:  

  • イタリック 属性は任意です。値が指定されている場合にのみ適用されます。   

5. fontFamily
5. フォントファミリー

fontFamily属性は、ボタンのラベルのフォントスタイルを指定します。

可能な値 
  • Arial
  • ジョージア
  • ラト
  • プロキシマノヴァ
  • ロボト
  • ロボトスラブ

構文 <button text='Know More' fontFamily='Georgia'/>
出力  

 注意:  

  • fontFamily 属性は任意です。値が指定された場合にのみ適用されます。 値 が指定されています。
  • 値に対して、fontFamily が指定されていない場合、テキストはアプリケーションテーマの fontFamily を取得します。各アプリケーションテーマは異なる fontFamily を使用します。

6. 

色の属性は、ボタンのラベルのフォントの色を指定します。

可能な値 
  • 16 進数のカラー値。16 進数のカラーコードについては、 こちらのページ を参照してください。

構文 <button text='Know More' color='#000000'/>
出力  

 注意:  

  • 属性は任意です。値が指定された場合にのみ適用されます。

7. bgColor
7. bgColor
7. bgColor(背景色)

bgColor属性は、ボタンの背景色を指定します。

可能な値 
  • 16 進数の色の値です。参照は こちらのページ をご覧ください。16 進数の色コードが記載されています。

構文 <button text='Know More' bgColor='#047B33'/>
出力  

 注意:  

  • bgColor 属性は任意です。値が指定されている場合にのみ適用されます。

8. タイプ

type属性は、ボタンの形状を定義します。

「可能な値」
  • フラット
  • 丸みを帯びた

デフォルト値 

  • フラット

構文 <button text='詳しく知る' type='rounded'/>
出力  

 注意:  

  • タイプ 属性は任意です。 

8. 角丸

cornerRadius属性は、ボタンの角の半径を定義します。 

可能な値 
  • ピクセル単位の数値

構文 <button text='Know More' cornerRadius='10px'/>
出力  

 注意:  

  • cornerRadius 属性は任意です。 

9. マージン

マージン 属性は、ボタン要素とその親コンテナーのすべての4つの側面の間に指定されたスペースを生成します。 

可能な値 
  • ピクセル単位の数値

構文 <button text='Know More' margin='50px'/>
出力  

 注意:  

  • マージン 属性は任意です

10. marginTop
10. marginTop
10. marginTop
10. marginTop
10. marginTop
10. marginTop
10. marginTop
10. marginTop
10. marginTopmarginTop属性は、ボタンの上側とその親コンテナーの間に指定された量の空間を生成します。

可能な値 
  • ピクセル単位の数値

構文 <button text='Know More' marginTop='50px'/>
出力  

 注意:  

  • marginTop 属性は任意です

11. 右マージン

marginRight属性は、ボタンの右側とその親コンテナーの間に指定されたスペースを生成します。

可能な値 
  • ピクセル単位の数値

構文 <button text='Know More' marginRight='400px'/>
出力  

 注意:  

  • marginRight 属性は任意です

12. marginBottom
12. marginBottom
12. marginBottom
12. marginBottom
12. marginBottom
12. marginBottom
12. marginBottom
12. marginBottom
12. marginBottommarginBottom 属性は、ボタンの下側とその親コンテナーの間に指定された量の空間を生成します。

可能な値 
  • ピクセル単位の数値

構文 <button text='詳しく知る' marginBottom='50px'/>
出力  

 注意:  

  • marginBottom 属性は任意です

13. marginLeft
13. marginLeft
13. marginLeft
13. marginLeft
13. marginLeft
13. marginLeft
13. marginLeft
13. marginLeft
13. marginLeftmarginLeft 属性は、ボタンの左側とその親コンテナの間に指定された量の空間を生成します。

可能な値 
  • ピクセル単位の数値

構文 <button text='Know More' marginLeft='400px'/>
出力  

 注意:  

  • marginLeft 属性は任意です

14. 行動

アクション 属性は、ボタンをクリックしたときにトリガーされるアクションを指定します。 

可能な値 
  • リンク
  • フォーム
  • レポート
  • ページ
  • 機能

アクション 構文

リンク

<button text='ボタンのラベル'   action='Link'   url='開くURL'/>*

フォーム

<button text='ボタンのラベル'   action='Form'   componentLinkName='Zoho Creatorフォームを開くためのlinkname'   appLinkName='フォームが属するZoho Creatorアプリケーションのlinkname' />*
レポート <button text='ボタンのラベル'   action='レポート'   componentLinkName='Zoho Creatorレポートを開くためのリンク名'   appLinkName='レポートが属するZoho Creatorアプリケーションのリンク名' />*
ページ <button text='ボタンのラベル'   action='Page'   componentLinkName='Zoho Creator ページへのリンク名'   appLinkName='Zoho Creator アプリケーションへのリンク名' />*
機能 <button text='ボタンのラベル'   action='機能'   functionName='トリガーするカスタム機能の名前' />*

* 以下の各アクションタイプの詳細をご学習ください。

 注意:  

  • アクション 属性は任意です。
  • アクション 属性はソース属性として機能します。つまり、次の属性のいずれか: url、componentLinkName、appLinkName、functionName、parameters、successMsg、target、popupWidth および popupHeight は、アクションが指定された場合にのみ適用されます。

15. URL

URL属性は、ボタンをクリックしたときに開かれるリソースの位置を指定します。

可能な値 
  • url が他のウェブサイトを指している
  • url がZoho Creatorアカウント内のコンポーネントを指している

例:

注意:  

  • url属性は任意です。 
  • <action='Link'>の場合にのみ適用されます。

16. コンポーネントリンク名

componentLinkName属性は、ボタンをクリックしたときに開かれるZoho Creatorコンポーネントのリンク名を指定します。

可能な値 
  • Zoho Creatorアプリケーションのコンポーネントを開くためのリンク名。すべてのアプリケーションのすべてのコンポーネントのリンク名については、このページを参照してください。

アクション 構文
フォーム <button action='Form' componentLinkName='User_Details'/>
レポート <button action='Report' componentLinkName='User_Details_Report'/
ページ <button action='Page' componentLinkName='User_Dashboard'/>

 注:  

  • componentLinkName 属性は任意です。 
  • <action='Form'/'Report'/'Page'> の場合にのみ有効です。

17. appLinkName
17. appLinkNameの設定

appLinkName属性は、関連するコンポーネントが属するZoho Creatorアプリケーションの名前を指定します。

可能な値 
  • Zoho Creatorアプリケーションのリンク名を開きます。 リンク名を確認するには、 このページを参照してください。Zoho Creatorアカウント内のすべてのアプリケーションのリンク名が表示されます。

アクション 構文
フォーム <button action='Form' componentLinkName='User_Details' appLinkName='Resource_management'/>
レポート <button action='Report' componentLinkName='User_Details_Report' appLinkName='Resource_management'/>
ページ <button action='Page' componentLinkName='User_Dashboard' appLinkName='Resource_management'/>

 注意:  

  • appLinkName 属性は任意です。 同じアプリケーションに属しているアクションに関連付ける場合、appLinkNameを指定する必要はありません。
  • <action='Form'/'Report'/'Page'/'Function'> の場合にのみ適用されます。

18. 関数名

functionName 属性は、ボタンをクリックしたときにトリガーされるカスタム関数の名前を指定します。

可能な値 
  • Zoho Creatorアプリケーションのどれかに定義されたカスタム関数です。アプリケーション内のカスタム関数のリストを取得するには、「設定」→「拡張機能」→「カスタム関数」を選択してください。

  • <button action='機能' functionName='send_email'/>

注意:  

  • 関数名 は、デフォルトのネームスペースまたはカスタムネームスペースに属しています。
  • カスタムネームスペースに属している場合:<関数名='namespace_name.function_name'>
  • 関数名 属性は任意です。
  • <action='Function'> と関数名を指定する必要がある場合にのみ適用されます。

19. パラメーター

パラメーター 属性は、アクションに関連付けられるパラメーターを指定します。

可能な値 
  • 「フォーム」「レポート」「ページ」の場合、パラメーターは、対応するコンポーネントのパーマリンクに追加されるクエリストリングを指します。パーマリンクのフォーム、レポート、ページのクエリストリングの使用方法については、このページを参照してください。
  • 「機能」の場合、パラメーターは、選択したカスタム関数の引数を指します。

アクション 構文

フォーム

<button text='ボタンのラベル'   action='Form' componentLinkName='User_Details'   appLinkName='Resource_management'  parameters='App_name=${name}'/>

または

<button text='ボタンのラベル'   action='Form' componentLinkName='User_Details'   appLinkName='Resource_management'  parameters='App_name=Zoho Creator'/>

レポート

<button text='ボタンラベル'   action='Report'   componentLinkName='User_Details'   appLinkName='Resource_management' parameters='App_name=${name}' />

または

<button text='ボタンラベル'   action='Form' componentLinkName='User_Details'   appLinkName='Resource_management'  parameters='User_Name='Rob'/>

 

ページ <button text='ボタンのラベル'   action='Page'   componentLinkName='Zoho Creator ページのリンク名'   appLinkName='Zoho Creator アプリケーションのリンク名に属する' parameters='App_name=${name}' />*

 注意:  

  • パラメーター 属性は任意です。
  • <action='Form'/'Report'/'Page'/'Function'> の場合にのみ適用されます。
  • パラメーターは、Name='Rob' のような静的な値またはページパラメーターのいずれかです。
  • ページパラメーターは、 App_name=${name} のように指定する必要があります。ここでnameはページパラメーターです。 

20. 成功メッセージ

successMsg 属性は、関連する関数の実行が成功したときに表示されるメッセージを指定します。

可能な値
  • 文字列

  • <button action='機能' functionName='send_email' successMsg='正常に送信されました!'/>

注:  

  • successMsg 属性は任意です。
  • <action='Function'>の時にのみ適用されます。

21. ワークフローの実行

executeWorkflow属性を使用すると、確認後にアクションを実行できます。confirmationMsg属性は、実行前に表示される確認アクション要求のメッセージを指定します。

可能な値
  • 文字列

  • <button action='機能' functionName='send_email' executeWorkflow='afterConfirmation' confirmationMsg='実行しますか?' confirmButtonText='はい' cancelButtonText='いいえ/>

注意:  

  • confirmationMsg 属性は任意です。
  • <action='Function'>の時にのみ適用されます。

22. ターゲット

ターゲット 属性は、ボタンをクリックしたときにリンクされたアクションが開く場所を指定します。

可能な値 
  • 新しいウィンドウ 
  • 同じウィンドウ
  • ポップアップ

デフォルト値 

  • 新しいウィンドウ

注意:

  • これは、<action='Link'/'Form'/'Report'/'Page'> の場合にのみ適用されます

23. ポップアップ幅

popupWidth属性は、リンクが開かれるポップアップウィンドウの幅を指定します。

可能な値 
  • パーセンテージまたはピクセルの値

24. ポップアップの高さ

popupHeight属性は、リンクが開かれるポップアップウィンドウの高さを指定します。

可能な値 
  • パーセンテージまたはピクセルでの数値

    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training



              Zoho Desk Resources

              • Desk Community Learning Series


              • Digest


              • Functions


              • Meetups


              • Kbase


              • Resources


              • Glossary


              • Desk Marketplace


              • MVP Corner


              • Word of the Day









                                Resources

                                Videos

                                Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                eBooks

                                Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                Webinars

                                Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                CRM Tips

                                Make the most of Zoho CRM with these useful tips.