CSSだけで簡単にできるコラボフローカスタマイズ！

この記事は「コラボスタイル Advent Calendar 2024 その２」の16日目の記事となります。

※その１はこちら↓
コラボスタイル Advent Calendar 2024 その１

こんにちは。最近コストコで売っている湯田ヨーグルトにはまっているコニオこと小西です。
クリスマスまであと少しですね🎅
うちの4歳の子どもがクリスマスツリーにぶら下げているプレゼント用の袋を毎朝チェックして「サンタさん今日も来てないな～」と言っている姿を見てほっこりしています🥰

（早くプレゼント何にするか決めてよ。。）

さて今回は、CSSだけで簡単にできるコラボフローのカスタマイズをご紹介したいと思います！
コラボフローではJavascriptによるカスタマイズも可能ですが、CSSファイルによるカスタマイズも可能です。
フォームを作成してみたけど、ここの色やサイズを変更できればもっとわかりやすくなるのに。。と思われている方の参考になれば幸いです😊

※CSSファイルのカスタマイズ設定方法は以下記事を参照ください。

https://qiita.com/h-waji/items/4a431ee44bc956546aa4

パーツのテキストボックスの背景色を変更する

パーツのテキストボックスの背景色を変更する場合は、セレクタに#｛パーツID｝を指定し、background-colorプロパティで色を指定します。
複数パーツを指定する場合は、カンマ区切りでセレクタを指定します。

/* 必須項目の背景色を変更 */
#fid1,#fid2,#fid3 {
  background-color: pink;
}

上記CSSファイルを設定すると、以下のようにテキストボックス部分の背景色を変更することができます。
必須項目のテキストボックスの背景色を変更すれば、一目で必須項目がわかりますね！

文字サイズを変更する

パーツ入力時の文字サイズを変更する場合は、セレクタに#｛パーツID｝を指定し、font-sizeプロパティで文字サイズを指定します。
また確認画面や申請書詳細画面の文字サイズを変更する場合は、セレクタに#span_｛パーツID｝を指定します。
※文字サイズだけ大きくすると枠内に収まらず見切れてしまうため、paddingプロパティで余白を指定しています。

/* 申請入力画面の文字サイズ */
#fid1,#fid2,#fid3 {
  padding: 30px 0;
  font-size: 24px;
}

/* 申請確認画面の文字サイズ */
#span_fid1,#span_fid2,#span_fid3 {
  padding: 20px 0;
  font-size: 24px;
}

上記CSSファイルを設定すると、以下のように入力時や確認画面での文字サイズを変更できます。

申請書画面の背景色を変更する

申請書画面の背景色を変更する場合は、セレクタにdiv:has(> #formbase)を指定し、background-colorプロパティで背景色を指定します。
背景を画像にする場合は、background-imageで画像のURLを指定します。

/* フォームの背景色 */
div:has(> #formbase) {
  background-color: pink;
}

/* 申請書ヘッダー */
.documentHeaderInfo {
  color: white;
  font-weight: bold;
}

上記CSSファイルを設定すると、以下のように申請書画面の背景色を変更できます。
クリスマス感を出すため、背景に画像を設定してみました🎄

※申請書ヘッダーの文字が黒だと見えにくかったため、セレクタに.documentHeaderInfoを指定して文字色や文字の太さを変更しています。

（おまけ）フォームを角丸にする

フォームを角丸にできないかなーと思ってやってみました！
やや強引ですが、以下のようにパーツの1行目と最終行のtable、tdに対してborder-radiusプロパティを指定することで実現できました。

/* 1行目のパーツの上部の左右を角丸にする */
table:has(#fid1_td) {
  border-radius:10px 10px 0 0;
  border-collapse: separate !important;
}

/* 1行目のパーツタイトルの左上を角丸にする */
#fid1_td {
  border-top-left-radius: 10px;
}

/* 最終行のパーツの下部の左右を角丸にする */
table:has(#fid5_td) {
  border-radius:0 0 10px 10px;
  border-collapse: separate !important;
}

/* 最終行のパーツタイトルの左下を角丸にする */
#fid5_td {
  border-bottom-left-radius: 10px;
}

上記CSSファイルを設定すると、以下のようにフォームを角丸にできます。
角丸にするだけで雰囲気がやわらかくなりますね😊

まとめ

いかがでしたでしょうか？
今回はCSSだけでできる簡単で実用的？なカスタマイズを紹介しました。
ちょっとしたカスタマイズですが、色やサイズを変えるだけで使い勝手やわかりやすさが変わりますよね☺️

Javascriptカスタマイズも合わせておこなうと、もっと色んな事ができますので、是非色々と試してカスタマイズライフをお楽しみください🙋‍♂️

明日は柴田さんです！
お楽しみに✨