# customInputPage.css

モバイル向けinputPage用にCSSをカスタマイズするためのマニュアルです。各部説明などはinputPageを御覧ください。

また、ここに記載しているプロパティは一例です。その他にも様々なプロパティがご使用いただけます。

## 検証環境

2台のスマートフォンでデザインの確認を行いました。

スマートフォン | OSバージョン | 使用ブラウザ | ブラウザバージョン
--- | --- | --- | ---
iPhoneSE(第2世代) | iOS 16.2 | Safari | 16.2
Pixel6 | Android 13 | Firefox | 109.1.1

断りが無い限り、スクリーンショットはiPhoneSEのものです。

## タイトル

### フォームレイアウト囲み

フォームレイアウトの囲みのデザインを変更することができます。
変更するには、`.inputPage-header-design-mobiler`を編集してください。

変数 | デフォルト値 | 説明
--- | --- | ---
border | - | 枠線のデザインを設定する

設定例は以下の通りです。

    .inputPage-header-design-mobile {
        border: 2px dashed green;
    }

### フォームレイアウト名

フォームレイアウト名のデザインを変更することができます。
変更するには、`.inputPage-header-design-mobile .inputPage-header-title-design-mobile`を編集してください。

変数 | デフォルト値 | 説明
--- | --- | ---
font-size | - | フォームレイアウト名のフォントサイズを設定する
color | - | フォームレイアウト名の色を設定する

設定例は以下の通りです。

    .inputPage-header-design-mobile .inputPage-header-title-design-mobile{
        font-size: 2rem;
        color: orange;
    }

### 先頭補足説明

先頭補足説明のデザインを変更することができます。
変更するには、`.inputPage-header-design-mobile .inputPage-header-headSupplement-design-mobile`を編集してください。

変数 | デフォルト値 | 説明
--- | --- | ---
font-size | - | 先頭補足説明の文字サイズを設定する
color | - | 先頭補足説明の色を設定する

設定例は以下の通りです。

    .inputPage-header-design-mobile .inputPage-header-headSupplement-design-mobile{
        font-size: 1rem;
        color: red;
    }

### 補足説明

補足説明のデザインを変更することができます。
変更するには、`.inputPage-header-design-mobile .inputPage-header-supplement-design-mobile`を編集してください。

変数 | デフォルト値 | 説明
--- | --- | ---
font-size | - | 補足説明の文字サイズを設定する
color | - | 補足説明の色を設定する

設定例は以下の通りです。

    .inputPage-header-design-mobile .inputPage-header-supplement-design-mobile{
        font-size: 2rem;
        color: blue;
    }

## セクション詳細

### 入力欄(テキスト), 入力欄(連結文字設定あり)

入力欄のデザインを変更することができます。
変更できる入力欄は、テキストの場合か、連結文字設定がされている場合です。
変更するには、`.inputPage-text-design-mobile`を編集してください。

変数 | デフォルト値 | 説明
--- | --- | ---
font-size | - | 入力欄内の文字サイズを設定する
min-width | - | 入力欄の最小の大きさを設定する

設定例は以下の通りです。

    .inputPage-text-design-mobile {
        font-size: 2rem;
        min-width: 10rem;
    }