スペースフィールドを利用して自分で設置したボタンに色をつけたり、文字色を指定したい

初めて投稿します。うまく投稿できていなければ、ご指導ください。

はじめようkintone API の第3回 レコード詳細にもボタンを設置しよう!

https://developer.cybozu.io/hc/ja/articles/201952870

を勉強して、スペースフィールドを利用して、A、B、C という3つのボタンを置きました。

この3つのボタンにそれぞれに違った色を指定して付けたいのですが、どうすればよいのか、調べに調べましたが、わかりません。どなたか、ご指導いただけませんでしょうか。

よろしくお願いいたします。

 

HTMLのカラーコード等は理解できる前提で進めます(カラーコード一覧はこの辺りを参照して下さい )。何通りか設定方法があります。

①JavaScriptで作成したボタンのstyle属性にアクセスして色を設定

    const myIndexButton = document.createElement('button');

myIndexButton.style.backgroundColor = '背景色';
myIndexButton.style.color = '文字色';
myIndexButton.style.borderColor = '罫線色';

こんな形で設定できます(スタイルをキャメルケースで記述することになりますが、この辺りの理解はある程度使えるようになってからで問題ありません)。色以外の設定もできます(一覧はこちら )。

②CSSで設定

    const myIndexButton = document.createElement('button');

myIndexButton.className = 'my-index-button';

.my-index-button {
background-color: '背景色';
color: '文字色';
border-color: '罫線色';
}

このような形で設定します。JavaScriptでボタンにクラス名を与え、CSSでクラス名に対して装飾を指定します。JavaScriptで書く場合と違って、同じクラス名のものを複数使い同じスタイルにする場合、総合的に記述量が減ります(対して①の方法では、同じスタイルにする場合都度記述する必要があります)。

他にも方法はありますが、ひとまず①の方法を覚えて、②の方が有用な場面等が出てきたら、という認識で良いと思います。

mls-hashimoto

瞬時でのご回答、誠にありがとうございます。実装したところ、イメージ通りのものができました。

また、今後、どのあたりを勉強すればよいのかも、わかりました。大変、大変、参考になりました。

思い上がりかもしれませんが、おそらく、「第3回 レコード詳細にもボタンを設置しよう!」を勉強した方は、私と同じような要望を持たれると思いますので、多くの方に有益な回答をいただけたと思います。

ありがとうございました。

 

 

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。