【コラボフロー】はじめてのCSSカスタマイズ

## はじめに

ワークフローでおなじみのコラボフローには、申請フォームの見た目をカスタマイズできる素敵な機能を備えています。

CSSカスタマイズ機能といいます。

カスタマイズに関する記事は、以下のサポート記事に記載されているのですが、今回はCSSカスタマイズに関する記事を書いてみたいと思います。
https://collaboflow.zendesk.com/hc/ja/categories/360000018735

### 本記事のターゲット
- コラボフローご利用のみなさま
- これからワークフロー（=コラボフロー）をご契約しようとしているみなさま
- CSSカスタマイズをこれからご利用するみなさま

## カスタマイズするとどうなるのか？

申請フォームのデザインを変更することができます！

![chrome-capture-2023-11-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/0bf87099-d461-0866-0229-83df744e1ec5.gif)

今回ははじめてCSSカスタマイズ機能を触る方向けの記事となります。アドベントカレンダーはまだまだ始まったばかりですので、中級者向け、上級者向けの投稿は、他のメンバーにバトンを渡したいと思います！
ぜひ12月末までご閲覧いただければと思います！

ちなみにCSSとは、Cascading Style Sheetsの略で、要はWebページの見た目をあーだこーだするためのものです。
ファイルの拡張子が `.css` となります。

それでは早速ハンズオンです。

## CSSカスタマイズ機能を試そう！

### コラボフローでフォームと経路を準備しよう！

まずはコラボフローでフォームと経路を準備します。

なぜ経路まで用意するのかは、この後ご説明します。

それでは学習用にフォーム「はじめてのCSSカスタマイズ」を作ります。

### フォームを作成しよう！

フォームを新規作成し、フォーム名を `はじめてのCSSカスタマイズ` と入力します。
その後、「通常フォーム作成」ボタンをクリックします。

![フォーム1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/a7a44a65-8a7a-67f9-1213-c7bf8527a483.png)

「パーツ追加」ボタンをクリックします。

![フォーム2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/b8a6dd85-1d88-331e-3859-8618ad4e6f9a.png)

「テキストエリア」をクリックすると、テキストエリア画面が表示されます。

![Snipaste_2023-12-02_12-50-29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/5cd5da1c-b23f-1fac-a34d-3877153ccd1f.png)

テキストエリア画面で必要な情報を入力します。ここで大事なのは、パーツIDを指定することです。

ここでは `fidMessage` とします。

パーツIDの命名規則に関しては弊社サポート記事をご確認ください。

パーツ名を `Message` と入力し、「パーツの登録」ボタンをクリックします。ちなみに、チェックボックス「自動」のチェックを外すとパーツIDを任意で入力することができます。

![Snipaste_2023-12-02_12-51-29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/754561b6-57ee-ebeb-d724-f728784052ea.png)

これが今回利用するフォームとなります。
「フォーム登録」ボタンをクリックすると、フォームが登録されます。

![Snipaste_2023-12-02_12-51-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/fa48ee20-6c7f-ce6b-cbc5-f4b9a0d1cc32.png)

### 経路を作成しよう！

次に経路を作成します。

なぜここで経路を作成するかというと、カスタマイズしたフォームをプレビュー表示するためです。

CSSファイルを作りながら都度プレビュー表示するほうが、作業効率がよくなります。ぜひこのステップを実施してみましょう。

まずは経路を作成します。

経路アイテムの申請書類をクリックします。

![Snipaste_2023-12-02_13-00-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/80d40759-8b0c-5999-677b-6e504300912b.png)

作成したフォーム「はじめてのCSSカスタマイズ」を選択し、「フォーム設定」ボタンをクリックします。

![Snipaste_2023-12-02_13-01-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/27679154-b2fd-9fad-7267-5dd73f2055f6.png)

今回はプレビュー用の経路のため、その他の設定はしないで「経路登録」ボタンをクリックします。

![Snipaste_2023-12-02_13-01-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/8f4c2969-5650-adfa-0132-8bd425699c19.png)

これで経路設定は完了です。

## ブラウザのタブを2つ開こう！

次にブラウザのタブを２つ開きましょう。

![Snipaste_2023-12-02_13-06-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/c597e48f-8cf7-e3c3-5521-7e92d14adf36.png)

タブを２つ開く理由は以下となります。
1. プレビュー用のタブとして利用
2. CSS登録用のタブとして利用

CSSをフォームに反映させるためには、フォーム設定画面でCSSファイルをインポート（取り込み）する必要があります。
インポート後、フォームにCSSが反映されたかを都度確認するため、あらかじめプレビュー用のタブを開いておくと、作業がしやすくなります。

### 1. プレビュー用のタブについて

こちらのタブでは、新規文書画面を開きます。

先ほど登録した経路が表示されますので、クリックすると、フォームを確認することができます。

![Snipaste_2023-12-02_13-11-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/8df43345-c6ed-9339-b745-5e6273813270.png)

都度フォームを確認できます。

![Snipaste_2023-12-02_13-12-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/3e17c4d9-28d7-ff28-b7ac-be4a7faccead.png)

### 2. CSS登録用のタブについて

こちらのタブでは、フォーム編集画面の「カスタマイズ」タブを開きます。

画面下部の CSSファイル 枠がCSSファイル `.css` を登録するための機能となっています。
登録後、フォームのレイアウトを確認する流れになります。

![Snipaste_2023-12-02_13-14-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/29454895-092b-74ac-1d2f-e1a87a65fa91.png)

それでは本題のカスタマイズを行っていきます。

CSSを知らない方でも大丈夫！

今回は用意してあるコードをコピペするだけでOKです。

## CSSファイルを作成しよう！

まずはCSSファイルを作成しましょう。

ファイル名は何でもよいですが、`style.css` とします。

![Snipaste_2023-12-02_13-21-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/4e95d78a-57df-a2ee-5c73-d457dc759bd8.png)

`style.css` を開き、以下のコードをコピー＆ペーストします。

```css
#fidMessage {
  background-color: #ff99cc;
  border: 2px solid #cc0066;
  color: #ffffff;
}

#fidMessage:hover {
  animation: glitter 1s infinite;
}

@keyframes glitter {
  0% {
    background-color: #ff3366;
    transform: scale(1);
  }
  50% {
    background-color: #ffcc00;
    transform: scale(1.1);
  }
  100% {
    background-color: #ff3366;
    transform: scale(1);
  }
}
```

コピペ後、`style.css` を保存します。

## コラボフローにCSSを反映しよう！

これですべての準備が整いました。あともう一息です。

フォーム編集画面のカスタマイズタブにあるCSSファイル枠「ファイルをアップロード」ボタンをクリックします。

![Snipaste_2023-12-02_13-25-59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/f0ac3c25-5870-46ba-9e7c-a6464c083b74.png)

`style.css` を選択すると、ファイル名が画面に反映されるので、「保存」するボタンをクリックします。

![Snipaste_2023-12-02_13-27-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/ca36407a-50ab-648c-6656-be7803b652d6.png)

その後、プレビュー用のタブを開き、「はじめてのCSSカスタマイズ」をクリックします。

![Snipaste_2023-12-02_13-28-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/0b0ef6bf-c713-c453-ebc2-5369f192f721.png)

カスタマイズされたフォームが開くので、テキストエリアにマウスカーソルを合わせてみましょう！

![chrome-capture-2023-11-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588618/4c8894dc-c61a-4717-0940-b606c22aee1b.gif)

これでハンズオンは終了です。

おつかれさまでした！

## さいごに

最後までご覧いただき、ありがとうございました。

コラボフローは自由度が高いため、使い方によっては面白い申請書をつくることができます。

ただ単にワークフローを管理するだけはなく、ワークフローに面白い要素を追加することにより、日々の業務が面白くなると思いますので、ぜひ試していただけますとうれしいです！