• line

kintone有効活用番外編。色の指定実践編。

kintone SI

実際のアプリで色の指定を実践してみる

前回、HTML、CSSでの色の変更方法の詳細をご紹介しました。

kintone有効活用番外編。色の指定方法。

今回はkintone上でどう変化するか具体的に見てみましょう。

kintone有効活用。チェックボックスが小さくてチェックしにくい。CSSでチェックボックスをボタンにカスタマイズ。でご紹介したコードで試してみます。

アプリの画面と指定場所

アプリの画面は次の画像の通りで、kintone標準の水色をあてています。
入力画面

ボタンの表示を変えるコードは次の通りです。


.input-checkbox-item-cybozu label {
margin-top: 3px;
display: block;
width: 200px;
text-align: center;
line-height: 40px;
font-size: 18px;
font-weight: bold;
color: #ffffff;
background: #3498db;
cursor:pointer;
}


該当のコードは次の1行です。
赤が34、緑が98、青成分がdbという指示になっています。

background: #3498db;


これを真っ赤なボタンにしてみましょう。
背景色を#FF0000と指示します。

background: #FF0000;


CSSを読み込んでアプリを更新すると・・・・・・

入力画面

ボタンが赤くなりました。
無数の色が使えますし、ボタンに乗っている文字の色も変えられます。
色々試してみましょう。




ゴートップではkintoneを活用した業務の効率化のご相談を承っております。

現在の業務に課題を抱えている方は是非ゴートップにお問い合わせください。



詳しくは当社kintoneソリューションサービスのページをご覧ください。




お問い合わせ

  • line

お問い合わせ

お気軽にお電話ください。

0120-98-0016