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;
}