customCommonInputPage.css

注意点

デザインをカスタマイズするには静的リソースのファイルをアップロードし、カスタムメタデータ型レコードを編集する必要があります。

まず、次のようなファイル名・フォルダ構成にし、zip化してsalesforce組織にアップロードして下さい。

kamiless_custom(任意の名前)
            ┠ customCommonInputPage.css
            ┠ customInputPage.css
            ┗ customCompletionPage.css

💡NOTE
静的リソースのzipファイル名は好きな名前に変更することができます。ただし、後で設定するカスタムメタデータ型レコードに登録するCSS静的リソース名と一致している必要があります。

💡NOTE
アップロードしたzipファイル名とカスタムメタデータ型レコードに登録した値が異なる場合、デフォルトのデザインが適用されます。

⚠️WARNING
静的リソースがない場合、デザインはデフォルトのものが表示されます。

次に、カスタムメタデータ型にあるCustom CSSのレコード管理をクリックし、静的リソース名をクリックしてください。

最後に、編集ボタンを押し、CSS静的リソース名にアップロードしたファイル名を入力して保存してください。

デフォルトデザイン

各部説明

本ファイル内では次のように各部分の名前を定義します。

セクションヘッダーとセクション詳細の全体がセクションボディです。

表の見方

変数の説明に表を用いますが、表の各列についての説明は以下のとおりです。

列名	説明
変数名	静的リソース内で設定できる変数の名称
デフォルト値	パッケージ内で設定されている各変数の値
説明	変数の説明

💡NOTE
静的リソース内で該当する変数を削除、またはコメントアウトした状態にすると、パッケージ内のデフォルト値がサイトに反映されます。

カスタマイズについて

:root内の変数の値を変更する項目に関しては、それ以上のカスタマイズは行えません。
しかし、それ以外の項目に関しては、本ファイル内に示した例の他にもプロパティを設定することができます。また、適切なクラスやセレクタを用いることで、更にカスタマイズを行うことができます。

💡NOTE
入力画面と確認画面のデザインは共通です。しかし、属性の違いにより確認画面に反映されないデザインがあります。一方で、確認画面のみに適用するデザインを設定することができます。

🚫DO NOT
フッターのボタンではtransformを用いてボタンサイズを変更していますが、このプロパティはセクション詳細で用いないでください。特に画面の横幅が小さいスマートフォンにおいてコンテンツが画面内に収まらなくなるか、水平スクロールが発生します。

カスタマイズ項目説明

プログレスインジケータ

indicator

🚫DO NOT
プログレスインジケータのデザインを編集する時は、必ずcustomCommonInputPage.cssとcustomCompetionPage.cssの両方の該当の箇所を編集してください。

文字

入力画面と確認画面のプログレスインジケータの文字のデザインを変更することができます。
変更するには、以下の二つを編集してください。

クラス	説明
`.custom-active-text`	活性化状態の文字を設定する
`.custom-inactive-text`	非活性化状態の文字を設定する

設定例は以下のとおりです。

.custom-active-text {
    font-size: 1.55rem;
    font-weight: bold;
    color: black;
}
.custom-inactive-text {
    font-size: 1.55rem;
    font-weight: bold;
    color: white;
}

⚠️WARNING
文字サイズを変更することができますが、スマートフォンで閲覧した場合に見切れる可能性があります。

幅73.9mm(液晶サイズ6.4インチ)のスマートフォンで閲覧した場合、フォントサイズは1.55倍が限度になります。

入力画面

入力画面でのプログレスインジケータの背景色を変更することができます。
変更するには、以下の二つを編集してください。

クラス	説明
.progress-event .custom-input-active, .progress-event .custom-input-active:first-child::before, .progress-event .custom-input-active:first-child::after	活性化状態のデザインを設定する
.progress-event .custom-input-inactive::before, .progress-event .custom-input-inactive::after	非活性化状態のデザインを設定する

設定例は以下のとおりです。

.progress-event .custom-input-active, .progress-event .custom-input-active:first-child::before, .progress-event .custom-input-active:first-child::after {
    background-color: #44bb44;
}

.progress-event .custom-input-inactive::before, .progress-event .custom-input-inactive::after {
    background-color: #a9e2a9;
}

確認画面

確認画面でのプログレスインジケータの背景色を変更することができます。
変更するには、以下の二つを編集してください。

クラス	説明
.progress-event .custom-confirm-active, .progress-event .custom-confirm-active::before, .progress-event .custom-confirm-active::after	活性化状態のデザインを設定する
.progress-event .custom-confirm-inactive, .progress-event .custom-confirm-inactive::before, .progress-event .custom-confirm-inactive::after	非活性化状態のデザインを設定する

設定例は以下のとおりです。

.progress-event .custom-confirm-active, .progress-event .custom-confirm-active::before, .progress-event .custom-confirm-active::after {
    background-color: #44bb44;
}
.progress-event .custom-confirm-inactive, .progress-event .custom-confirm-inactive::before, .progress-event .custom-confirm-inactive::after {
    background-color: #a9e2a9;
}

タイトル

パディング

title_padding
タイトルのパディングを変更することができます。
変更するには、:root内の以下の変数名を設定してください。

変数	デフォルト値	説明
--common-content-header-padding-top	0.75rem	上側のパディングを設定する
--common-content-header-padding-left	0.75rem	左側のパディングを設定する
--common-content-header-padding-bottom	0	下側のパディングを設定する
--common-content-header-padding-right	0.75rem	右側のパディングを設定する

タイトル枠デザイン

title_border
タイトル枠のデザインを変更することができます。
変更を行うには、:root内の以下の変数名を設定してください。

変数名	デフォルト値	説明
--custom-header-content-border-width	1px	枠の太さを設定する
--custom-header-content-border-style	solid	枠のスタイルを設定する
--custom-header-content-border-color	#D4D4D4	枠線の色を設定する
--custom-header-content-padding	1.5rem	全体のパディングを設定する

💡NOTE
枠線を消したい場合は、--custom-header-content-border-styleをnoneに設定してください。

フォームレイアウト名デザイン

title_formlayoutName
フォームレイアウト名の文字のデザインを変更することができます。
変更するには、.custom-header-content .header-formLayout-designを編集してください。
設定例は以下のとおりです。

.custom-header-content .header-formLayout-design {
    font-size: 2rem;
    font-weight: 700;
    color: red;
    border-bottom: 2px dashed red;
}

先頭補足説明と補足説明

header-supplement

先頭補足説明と補足説明のデザインを変更することができます。
先頭補足説明のデザインを変更するにはtitle-header-supplement-design、補足説明のデザインを変更するにはtitle-supplement-designを変更してください。
設定例は以下のとおりです。

.title-header-supplement-design {
    font-size: 2rem;
}
.title-supplement-design {
    font-size: 2rem;
}

💡NOTE
　補足説明はリッチテキストで記述することができます。もし、補足説明のデザインをリッチテキストとCSSの両方で設定した場合、反映されるのはリッチテキストになります。
　しかし、両方で設定するとデザインが想定通りにならないことがあります。例えば、CSSとリッチテキストの両方で文字の大きさを設定した場合、補足説明の範囲はCSSで設定した広さになりますが、文字の大きさはリッチテキストになります。
　そのため、基本的には補足説明はリッチテキストでデザインを設定することをおすすめします。

セクションボディ

全体のパディング

section-body-padding
全体のセクションボディ対してパディングを変更できます。
上の図は全ての変数に0を設定した時の例です。
変更するには、:root内の以下の変数を設定してください。

変数名	デフォルト値	説明
--common-content-body-padding-top	0	上側のパディングを設定する
--common-content-body-padding-left	0.75rem	左側のパディングを設定する
--common-content-body-padding-bottom	0	下側のパディングを設定する
--common-content-body-padding-right	0.75rem	右側のパディングを設定する

各セクションボディのパディング

section_body_padding
各セクションボディのパディングを変更できます。
上の図はすべての変数に1remを設定した時の例です。
変更するには、:root内の以下の変数を設定してください。

変数名	デフォルト値	説明
--section-body-padding-top	0	上側のパディングを設定する
--section-body-padding-left	0	左側のパディングを設定する
--section-body-padding-bottom	0	下側のパディングを設定する
--section-body-padding-right	0	右側のパディングを設定する

⚠️WARNING
--section-body-padding-topはパッケージ内ではコメントアウトしているので、値を変更してもデザインに反映されません。

タイトル・セクションヘッダー・セクション詳細の間隔

interval
タイトルとセクションヘッダーの間隔、セクションヘッダーとセクション詳細の間隔、セクション詳細と次のセクションヘッダーの間隔を調整できます。
上の図はそれぞれ2remに設定した時の例です。
変更するには、:root内の以下の変数を設定してください。

変数名	デフォルト値	説明
--section-box-margin-top	1rem	セクションヘッダー上部の間隔を調整する
--custom-body-margin-top	1rem	セクション詳細上部の間隔を調整する

⚠️WARNING
二つの変数は基本的に同じ値にしてください。セクションヘッダーを非表示にした時、各コンポーネント間の間隔がバラバラになる原因になります。

セクションヘッダー

セクションヘッダーのデザイン

section_header
セクションヘッダーのデザインを変更することができます。
変更するには、:root内の以下の変数を設定してください。

変数	デフォルト値	説明
--section-box-background-color	beige	セクションヘッダーの背景色を設定する
--section-box-border-width	1px	セクションヘッダーの枠線の太さを設定する
--section-box-border-color	white	セクションヘッダーの枠線の色を設定する
--section-box-border-style	none	セクションヘッダーの枠線のスタイルを設定する
--section-box-padding	1.5rem	セクションヘッダーのパディングを設定する

上の図は以下のように設定した例です。

:root{
    --section-box-background-color: #fce063;
    --section-box-border-width: 2px;
    --section-box-border-color: green;
    --section-box-border-style: dashed solid;
    --section-box-padding: 5px;
}

💡NOTE
枠線を消したい場合は、--section-box-border-styleをnoneに設定、または変数を削除もしくはコメントアウトしてください。

セクションヘッダーのタイトル

section_header_font_size
セクションヘッダーのタイトルのデザインを変更することができます。
変更するには、.section-box .section-titleを編集してください。
上の図では、上の図ではCSSを以下のようにしています。

.section-box .section-title {
    font-size: 2rem;
    color: red;
}

セクション補足説明

セクションの補足説明のデザインを変更することができます。
変更するには、.section-supplement-settingを編集してください。
設定例は以下のとおりです。

.section-supplement-setting {
    font-size: 2rem;
}

💡NOTE
　補足説明はリッチテキストで記述することができます。もし、補足説明のデザインをリッチテキストとCSSの両方で設定した場合、反映されるのはリッチテキストになります。
　しかし、両方で設定するとデザインが想定通りにならないことがあります。例えば、CSSとリッチテキストの両方で文字の大きさを設定した場合、補足説明の範囲はCSSで設定した広さになりますが、文字の大きさはリッチテキストになります。
　そのため、基本的には補足説明はリッチテキストでデザインを設定することをおすすめします。

セクション詳細

セクション詳細のデザイン

section_detail
セクション詳細の枠のデザインを変更することができます。
変更するには、:root内の以下の変数を設定してください。

変数	デフォルト値	説明
--custom-body-content-border-width	1px	セクション詳細の枠線の太さを設定する
--custom-body-content-border-style	solid	セクション詳細の枠線のスタイルを設定する
--custom-body-content-border-color	0.75rem	セクション詳細の枠線の色を設定する
--custom-body-content-padding	1rem	セクション詳細のパディングを設定する

設定例は以下のとおりです。

:root{
    --custom-body-content-border-width: 2px;
    --custom-body-content-border-style: dashed;
    --custom-body-content-border-color: blue;
    --custom-body-content-padding: 5px;
}

💡NOTE
枠線を消したい場合は、--custom-body-content-border-styleをnoneに設定してください。

項目欄名のフォントサイズ

section_detail_title
セクション詳細の各項目名のフォントサイズを変更することができます。
変更するには、:root内の以下の変数を設定してください。

変数	デフォルト値	説明
--input_value-field_label-font-size	0.75rem	各項目のフォントサイズを設定する

設定例は以下のとおりです。

:root{
    --input_value-field_label-font-size: 2rem
}

項目名の下の線

input-subtitle-border
項目名の下の線のデザインを変えることができます。
変更するには、:root内の以下の変数を設定してください。

変数	デフォルト値	説明
--custom-body-content-subtitle-border-width	1px	線の太さを設定する
--custom-body-content-subtitle-border-style	solid	線のスタイルを設定する
--custom-body-content-subtitle-border-color	#e5e5ee	線の色を設定する

設定例は以下のとおりです。

:root{
    --custom-body-content-subtitle-border-width: 2px;
    --custom-body-content-subtitle-border-style: dashed;
    --custom-body-content-subtitle-border-color: red;
}

💡NOTE
項目名の下の線を消したい場合は、--custom-body-content-subtitle-border-styleをnoneに設定してください。

項目欄補足説明

項目欄の補足説明のデザインを変更することができます。
変更するには、input-supplement-settingを変更して下さい。
設定例は以下のとおりです。

.input-supplement-setting {
    font-size: 2rem;
}

💡NOTE
　補足説明はリッチテキストで記述することができます。もし、補足説明のデザインをリッチテキストとCSSの両方で設定した場合、反映されるのはリッチテキストになります。
　しかし、両方で設定するとデザインが想定通りにならないことがあります。例えば、CSSとリッチテキストの両方で文字の大きさを設定した場合、補足説明の範囲はCSSで設定した広さになりますが、文字の大きさはリッチテキストになります。
　そのため、基本的には補足説明はリッチテキストでデザインを設定することをおすすめします。

入力画面の入力欄の幅

section_detail_input_width

セクション詳細の入力欄の幅を変更することができます。
変更するには、.input-designを編集してください。

変数	デフォルト値	説明
max-width	-	入力欄の幅を設定する
padding-left	-	入力欄のインデントを設定する

上の図ではCSSを以下のようにしています。

.input-design {
    max-width: 300px;
    padding-left: 1rem;
}

💡NOTE
パッケージ内にて1remのインデントが予め設定されています。これより左に入力欄を寄せることはできません。
また、このクラスのpadding-leftでは外部リンクボタンのインデントは設定できません。外部リンクボタンでインデントを設定する場合、input-design-buttonを編集してください。

入力欄のエラーメッセージ

input-error-message
入力欄のエラーメッセージのデザインを変更することができます。
変更するには、.input-design .slds-form-element__helpを編集してください。

変数	デフォルト値	説明
font-size	-	エラーメッセージのフォントサイズを設定する

設定例は以下のとおりです。

.input-design .slds-form-element__help {
    font-size: 2rem;
}

⚠️WARNING
外部リンクボタンのエラーメッセージのデザインは、このクラスでは変更できません。変更するには、外部リンクボタンのエラーメッセージを参照してください。

連結文字

combineRight

combineLeft

連結文字のデザインを変更することができます。
変更するには、.custom-form-element__addonを編集してください。

変数	デフォルト値	説明
font-size	-	連結文字のフォントサイズを設定する

また、連結文字を設定すると、入力欄と連結文字が大きく離れる場合があります。
その場合、.form-part-designを編集してください。

変数	デフォルト値	説明
max-width	-	エラーメッセージを含む入力欄全体の最大の幅を設定する

設定例は以下のとおりです。

/*各入力欄デザイン*/
.form-part-design {
    max-width: 38rem;
}
/*連結文字*/
.custom-form-element__addon {
    font-size: 2rem;
}

💡NOTE
入力欄の幅は、基本的にフォームテンプレートで設定できる各項目欄の入力支援タブ内の入力欄の幅で設定することを推奨しています。

ファイルドロップゾーンのエラーメッセージ

file_drop_zone
ファイルドロップゾーンのエラーメッセージのデザインを変更することができます。
変更するには、.custom-file-errorを編集してください。

変数	デフォルト値	説明
font-size	-	エラーメッセージの文字の大きさを設定する

設定例は以下のとおりです。

.custom-file-error{
    font-size: 2rem;
}

💡NOTE
ファイルドロップゾーンにはファイルフォーマット違いやファイルサイズ上限オーバーでもエラーメッセージが出ますが、そのエラーメッセージもこのクラスでデザインを変更することができます。

入力欄の間隔

seciton_detail_input_interval
セクション詳細の各入力欄の間隔を変更することができます。
変更するには、:root内の以下の変数を設定してください。

変数	デフォルト値	説明
--formPartValidValue-margin-bottom	0	各入力欄の間隔を設定する

セクション詳細の各入力欄タイプ毎の設定

テキストエリア以外の入力を伴う入力欄

section_detail_input

セクション詳細のテキストエリア以外の入力を伴う各入力欄のデザインを変更することができます。
変更するには、.input-design inputを編集してください。

変数	デフォルト値	説明
height	-	テキスト入力欄の縦幅を設定する
font-size	-	テキストのフォントサイズを設定する
font-weight	-	テキストのフォントの太さを設定する
--slds-c-input-shadow-focus	-	テキストがフォーカス時の影の設定をする
--slds-c-input-color-background	-	テキストの背景色を設定する
--slds-c-input-color-border	-	テキストの枠線の色を設定する
--slds-c-input-color-border-focus	-	テキストがフォーカス時の枠線の色を設定する
-webkit-appearance	-	【iOS対策】ブラウザのデフォルトデザインをを設定する
line-height	-	【iOS対策】行ボックスの高さを設定する

上の図ではCSSを以下のように設定しています。

.input-design input {
    height: 3rem;
    font-size: 2rem;
    font-weight: normal;
    --slds-c-input-shadow-focus: 10px 5px 5px black;
    --slds-c-input-color-background: orange;
    --slds-c-input-color-background-focus: white;
    --slds-c-input-color-border: red;
    --slds-c-input-color-border-focus: white;
    /*iOS対策*/
    -webkit-appearance: none;
    line-height: normal;
}

💡NOTE
【iOS対策】とあるプロパティについては、特に日付型のinputの場合にiOS環境のみCSSが反映されないことを防ぐまたは修正するためのものです。
以下はiOS対策をしていない場合にmax-width: 300pxに設定した時の数値型と日付型の入力欄になります。日付型にCSSの設定が反映されておらず、幅が数値型に比べて短くなっています。

⚠️WARNING
入力欄に半角英数字が入力されることが想定される場合、font-weightプロパティは最低500またはnormalにしてください。500未満またはlighterを指定した場合、半角英数字の文字が掠れているように見えます。
(例)font-weightプロパティを100にした時の見た目

【iOS対策】type="date"のinput要素の文字揃え

type="date"のinput要素は何も対策をしないと文字が中央揃えになることがあります。
対策として、以下のクラスを追加します。

.input-design input::-webkit-date-and-time-value {
    text-align: left;
}

テキストエリア

section_detail_textarea

テキストエリアのデザインを変更することができます。
変更するには、.input-design textareaを編集してください。

変数	デフォルト値	説明
height	-	テキストエリア入力欄の縦幅を設定する
font-size	-	テキストエリアのフォントサイズを設定する
font-weight	-	テキストエリアのフォントの太さを設定する
margin-bottom	-	テキストエリアの下側のマージンを設定する
--slds-c-textarea-shadow-focus	-	テキストエリアがフォーカス時の影を設定する
--slds-c-textarea-color-background	-	テキストエリアの背景色を設定する
--slds-c-textarea-color-background-focus	-	テキストエリアがフォーカス時の背景色を設定する
--slds-c-textarea-color-border	-	テキストエリアの枠線の色を設定する
--slds-c-textarea-color-border-focus	-	テキストエリアがフォーカス時の色を設定する

上の図ではCSSを以下のようにしています。

.input-design textarea {
    height: 9rem;
    font-size: 2rem;
    font-weight: normal;
    margin-bottom: 10px;
    --slds-c-textarea-shadow-focus: 10px 5px 5px black;
    --slds-c-textarea-color-background: orange;
    --slds-c-textarea-color-background-focus: red;
    --slds-c-textarea-color-border: red;
    --slds-c-textarea-color-border-focus: white;
}

プレースホルダー

section_detail_placeholder
テキストエリア以外の入力を伴う入力欄のプレースホルダーのデザインを変更することができます。
変更するには、.input-design ::placeholderを編集してください。
上の図ではCSSを以下のようにしています。

.input-design ::placeholder {
    color: #bbb9b9;
}

チェックボックス

input-checkbox

チェックボックスのデザイン

チェックボックスのデザインを変更することができます。
変更するには、.input-design .slds-checkboxを編集してください。

変数	デフォルト値	説明
background	-	チェックボックスの背景色を設定する
margin	-	チェックボックスのマージンを設定する
--slds-c-checkbox-shadow-focus	-	チェックボックスがフォーカス時の影の設定をする
--slds-c-checkbox-color-background	-	チェックボックスの背景色を設定する
--slds-c-checkbox-color-background-checked	-	チェックボックスのチェック時の背景色を設定する
--slds-c-checkbox-color-border	-	チェックボックスの枠線の色を設定する
--slds-c-checkbox-color-border-checked	-	チェックボックスがチェック時の枠線の色を設定する
--slds-c-checkbox-color-border-focus	-	チェックボックスがフォーカス時の枠線の色を設定する
--slds-c-checkbox-mark-color-foreground	-	チェックボックスのチェックマークの色

設定例は以下のとおりです。

.input-design .slds-checkbox  {
    background: orange;
    margin: 10px 0;
    --slds-c-checkbox-shadow-focus: 10px 5px 5px black;
    --slds-c-checkbox-color-background: orange;
    --slds-c-checkbox-color-background-checked: red;
    --slds-c-checkbox-color-border: blue;
    --slds-c-checkbox-color-border-checked: aqua;
    --slds-c-checkbox-color-border-focus: green;
    --slds-c-checkbox-mark-color-foreground: white;
}

チェックボックスの大きさ

チェックボックスの大きさを変更することができます。
変更するには、.input-design .slds-checkbox .slds-checkbox_fauxを編集してください。

変数	デフォルト値	説明
width	-	チェックボックスの横幅を設定します
height	-	チェックボックスの縦幅を設定します

設定例は以下のとおりです。

.input-design .slds-checkbox .slds-checkbox_faux {
    width: 2rem;
    height: 2rem;
}

チェックボックスのチェックマーク

チェックボックスのチェックマークのデザインを変更することができます。
変更するには、.input-design .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux::afterを編集して下さい。

変数	デフォルト値	説明
width	-	チェックボックスのチェックマークの横幅を設定する
height	-	チェックボックスのチェックマークの縦幅を設定する
border-width	-	チェックボックスのチェックマークの太さを設定する

設定例は以下のとおりです。

.input-design .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux::after {
    width: 1.5rem;
    height: 0.5rem;
    border-width: 4px;
}

💡NOTE
通常のチェックマークの形にするにはwidthをheightの3倍に設定してください。

チェックボックスのラベル

チェックボックスのラベルの大きさを変更することができます。
変更するには、.slds-checkbox .slds-checkbox__label .slds-form-element__label

変数	デフォルト値	説明
font-size	-	チェックボックスのラベルのフォントの大きさを設定する

設定例は以下のとおりです。

/*チェックボックスのラベルの大きさ*/
.slds-checkbox .slds-checkbox__label .slds-form-element__label {
    font-size: 2rem;
}

確認画面でのチェックボックス

confirm-checkbox
確認画面でのチェックボックスでのデザインを変更することができます。
変更するには、以下の3つを編集してください。

.confirm-design .slds-checkbox .slds-checkbox_faux
.confirm-design .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux::after
.confirm-design .slds-checkbox [type="checkbox"][disabled] + .slds-checkbox__label .slds-checkbox_faux

これらはそれぞれ次のデザインを変更することができます。

番号	説明
1	チェックボックスの枠線を設定する
2	チェックボックスのチェックマークの色を設定する
3	チェックボックスの背景色を設定する

設定例は以下のとおりです。

.confirm-design .slds-checkbox .slds-checkbox_faux {
    border-style: none;
}
.confirm-design .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux::after {
    border-color: red;
}
.confirm-design .slds-checkbox [type="checkbox"][disabled] + .slds-checkbox__label .slds-checkbox_faux {
    background-color: white;
}

ラジオボタン

section_detail_radio

ラジオボタンのデザインを変更することができます。
変更するには、.input-design .slds-radioを編集してください。

変数	デフォルト値	説明
background	-	ラジオボタンの背景色を設定する
margin	-	ラジオボタンのマージンを設定する
--slds-c-radio-shadow-focus	-	ラジオボタンがフォーカス時の影を設定する
--slds-c-radio-color-background	-	ラジオボタンの背景色を設定する
--slds-c-radio-color-background-checked	-	ラジオボタンがチェック時の背景色を設定する
--slds-c-radio-color-border	-	ラジオボタンの枠線の色を設定する
--slds-c-radio-color-border-checked	-	ラジオボタンがチェック時の枠線の色を設定する
--slds-c-radio-color-border-focus	-	ラジオボタンがフォーカス時の枠線の色を設定する
--slds-c-radio-mark-color-foreground	-	ラジオボタンのチェックマークの色を設定する

上の図ではCSSを以下のようにしています。

.input-design .slds-radio {
    background: orange;
    margin: 20px 0 20px 0;
    --slds-c-radio-shadow-focus: 0 0 3px #ab00ef;
    --slds-c-radio-color-background: white;
    --slds-c-radio-color-background-checked: white;
    --slds-c-radio-color-border: blue;
    --slds-c-radio-color-border-checked: rgb(252, 0, 176);
    --slds-c-radio-color-border-focus: rgb(206, 63, 170);
    --slds-c-radio-mark-color-foreground: green;
}

ラジオボタンの大きさ

ラジオボタンの大きさを変更することができます。
ラジオボタンの大きさを変更するには、.input-design .slds-radio .slds-radio_fauxを編集してください。

変数	デフォルト値	説明
width	-	チェックマークの横幅を設定する
height	-	チェックマークの縦幅を設定する

設定例は以下のとおりです。

.input-design .slds-radio .slds-radio_faux {
    width: 2rem;
    height: 2rem;
}

💡NOTE
ラジオボタンを円にするには、widthとheightを同じ値に設定してください。

ラジオボタンのチェックの大きさ

ラジオボタンのチェックの大きさを変更することができます。
変更するには、.input-design .slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux::afterを編集してください。

変数	デフォルト値	説明
width	-	ラジオボタンのチェックの横幅を設定する
height	-	ラジオボタンのチェックの縦幅を設定する

設定例は以下のとおりです。

.input-design .slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux::after {
    width: 1rem;
    height: 1rem;
}

💡NOTE
ラジオボタンのチェックを円にするには、widthとheightを同じ値に設定してください。

ラジオボタンのラベル

ラジオボタンのラベルのデザインを変更することができます。
変更するには、を編集してください。

変数	デフォルト値	説明
font-size	-	ラジオボタンのラベルのフォントサイズを設定する

設定例は以下のとおりです。

.input-design .slds-radio .slds-form-element__label {
    font-size: 2rem;
}

選択リスト

section_detail_combobox

選択リストのデザイン

選択リストのデザインを変更することができます。
変更するには、.input-design button[aria-haspopup]を編集してください。

変数	デフォルト値	説明
color	-	選択リストの選択されたアイテムの文字色を設定する
font-size	-	選択リストの選択されたアイテムの文字の大きさを設定する
background-color	-	選択リストの背景色を設定する
border	-	選択リストの枠線を設定する
height	-	選択リストの高さを設定する
line-height	-	選択リストの行ボックスの高さを設定する

上の図ではCSSを以下のようにしています。

.input-design button[aria-haspopup] {
    color: green;
    font-size: 2rem;
    background-color: greenyellow;
    border: 2px dashed red;
    height: 3rem;
    line-height: normal;
}

⚠️WARNING
line-heightを設定しない場合、文字が上に寄ります。

heightを変えた場合は必ず設定してください。

プルダウンメニュー

プルダウンメニューのデザインを変更することができます。
変更するには、.input-design div[role="listbox"]を編集してください。

変数	デフォルト値	説明
font-size	-	プルダウンメニューの文字の大きさを設定する
color	-	プルダウンメニューの文字の色を設定する

設定例は以下のとおりです。

.input-design div[role="listbox"] {
    font-size: 1.5rem;
    color: red;
}

また、プルダウンメニューのチェックマークのデザインを変更することができます。
変更するには、.input-design div[role="listbox"] svg

変数	デフォルト値	説明
fill	-	チェックマークの色を設定する
width	-	チェックマークの横幅を設定する
height	-	チェックマークの縦幅を設定する

.input-design div[role="listbox"] svg {
    fill:blue;
    width: 2rem;
    height: 1rem;
}

ファイルドロップゾーン

section_detail_file_drop
ファイルドロップゾーンのデザインを変更することができます。
変更するには、:root内の以下の変数を設定してください。

変数	デフォルト値	説明
--file_drop_zone-background-color	rgba(255, 255, 255, .5)	ファイルドロップゾーンの背景色を設定する
--file_drop_zone-border-line-width	1px	ファイルドロップゾーンの枠線の太さを設定する
--file_drop_zone-border-line-style	dashed	ファイルドロップゾーンの枠線のスタイルを設定する
--file_drop_zone-border-line-color	rgb(229, 229, 229)	ファイルドロップゾーンの枠線の色を設定する

上の図ではCSSを以下のように設定しています。

:root{
    --file_drop_zone-background-color: #fcb2b2;
    --file_drop_zone-border-line-width: 3px;
    --file_drop_zone-border-line-style: solid;
    --file_drop_zone-border-line-color: red;
}

レコード検索

record-sarch

レコード検索ボタン

レコード検索ボタンのデザインを変更することができます。
変更するには、.input-design .slds-button_neutralを編集してください。

変数	デフォルト値	説明
width	-	外部リンクボタンの横幅を設定する
height	-	外部リンクボタンの縦幅を設定する
font-size	-	外部リンクボタン内の文字の大きさを設定する
--slds-c-button-neutral-color-background	-	外部リンクボタンの背景色を設定する
--slds-c-button-neutral-color-background-active	-	外部リンクボタンがアクティブ時の背景色を設定する
--slds-c-button-neutral-color-background-hover	-	外部リンクボタンがホバー時の背景色を設定する
--slds-c-button-neutral-color-border	-	外部リンクボタンの枠線の色を設定する
--slds-c-button-neutral-color-border-active	-	外部リンクボタンがアクティブ時の枠線の色を設定する
--slds-c-button-neutral-color-border-hover	-	外部リンクボタンがホバー時の枠線の色を設定する
--slds-c-button-text-color	-	外部リンクボタンのテキストの色を設定する
--slds-c-button-text-color-active	-	外部リンクボタンがアクティブ時のテキストの色を設定する
--slds-c-button-text-color-hover	-	外部リンクボタンがホバー時のテキストの色を設定する

設定例は以下のとおりです。

.input-design .slds-button_neutral {
    width: 200px;
    height: 40px;
    font-size: 2rem;
    --slds-c-button-neutral-color-background: #e67a7a;
    --slds-c-button-neutral-color-background-active: #a52e2e;
    --slds-c-button-neutral-color-background-hover: #a52e2e;
    --slds-c-button-neutral-color-border: #e67a7a;
    --slds-c-button-neutral-color-border-active: #a52e2e;
    --slds-c-button-neutral-color-border-hover: #a52e2e;
    --slds-c-button-text-color: white;
    --slds-c-button-text-color-active: black;
    --slds-c-button-text-color-hover: black;
}

💡NOTE
このクラスでfont-sizeを変更しても、アイコンの大きさは変更されません。変更したい場合は、レコード検索ボタン内のアイコンを参照してください。

レコード検索ボタン内のアイコン

レコード検索ボタン内のアイコンのデザインを変更することができます。
変更するには、.input-design .slds-button_neutral svgを編集してください。

変数	デフォルト値	説明
width	-	アイコンの横幅を設定する
height	-	アイコンの縦幅を設定する

設定例は以下のとおりです。

.input-design .slds-button_neutral svg {
    width: 40px;
    height: 40px;
}

外部リンクボタン

section_detail_button

外部リンクボタンの共通設定

外部リンクボタンの共通設定を変更することができます。
変更するには、.input-design-buttonを編集してください。

変数	デフォルト値	説明
padding-left	-	外部リンクボタンの左側のpaddingを設定する
font-size	-	外部リンクのフォントの大きさを設定する

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

.input-design-button {
    padding-left: 0.6rem;
    font-size: 2rem;
}

💡NOTE
font-sizeプロパティによって、外部リンクボタン内に文字とラベルの大きさを変更することができます。もし、ラベルの大きさを個別に設定したい場合は、.input-design-button spanを編集してください。

⚠️WARNING
ボタン以外のインデントは.input-designで設定することができますが、ボタンは.input-design-buttonで設定します。

🚫DO NOT
このクラスはボタンとラベル全体に影響します。そのため、ボタンの大きさを変える目的で、このクラス内にwidthプロパティとheightプロパティを設定しないでください。ボタンの大きさを変える場合は、外部リンクボタンの大きさを参照してください。

外部リンクボタンの大きさ

外部リンクボタンの大きさを変更することができます。
変更するには、.input-design-button buttonを編集してください。

変数	デフォルト値	説明
width	-	外部リンクボタンの横幅を設定する
height	-	外部リンクボタンの縦幅を設定する

設定例は以下のとおりです。

.input-design-button button {
    width: 200px;
    height: 40px;
}

💡NOTE
ここで設定した外部リンクボタンの大きさは設定値の他に、内部の文字の大きさの影響も受けています。ボタンサイズが小さくならない場合、内部の文字やアイコンの大きさも一緒に小さくしてください。

⚠️WARNING
ここで設定した外部リンクボタンの大きさは、個別の外部リンクボタンで設定した大きさで上書きされます。

外部リンクボタンのアイコン

外部リンクボタンのアイコンの大きさを変更することができます。
変更するには、.input-design-button svgを編集してください。

変数	デフォルト値	説明
width	-	アイコンの横幅を設定する
height	-	アイコンの縦幅を設定する

設定例は以下のとおりです。

.input-design-button svg {
    width: 40px;
    height: 40px;
}

外部リンクボタンのラベル

外部リンクボタンのラベルのデザインを変更することができます。
変更するには、.input-design-button spanを編集してください。

変数	デフォルト値	説明
font-size	-	ラベルの大きさを設定する

設定例は以下のとおりです。

/*外部リンクボタンラベル*/
.input-design-button span {
    font-size: 2rem;
}

必須でない外部リンクボタンのデザイン

必須でない外部リンクボタンのデザインを変更する時は.input-design-button .slds-button_brandを編集してください。

変数	デフォルト値	説明
--slds-c-button-brand-color-background	-	外部リンクボタンの背景色を設定する
--slds-c-button-brand-color-background-active	-	外部リンクボタンがアクティブ時の背景色を設定する
--slds-c-button-brand-color-background-hover	-	外部リンクボタンがホバー時の背景色を設定する
--slds-c-button-brand-color-border	-	外部リンクボタンの枠線の色を設定する
--slds-c-button-brand-color-border-hover	-	外部リンクボタンがホバー時の枠線の色を設定する
--slds-c-button-brand-text-color	-	外部リンクボタンのテキストの色を設定する
--slds-c-button-brand-text-color-active	-	外部リンクボタンがアクティブ時のテキストの色を設定する
--slds-c-button-brand-text-color-hover	-	外部リンクボタンがホバー時のテキストの色を設定する

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

.input-design-button .slds-button_brand {
    --slds-c-button-brand-color-background: #ffa6009a;
    --slds-c-button-brand-color-background-active: #fdaa0f;
    --slds-c-button-brand-color-background-hover: #fdaa0f;
    --slds-c-button-brand-color-border: #ffa6009a;
    --slds-c-button-brand-color-border-hover: #fdaa0f;
    --slds-c-button-brand-text-color: #4f4ff38a;
    --slds-c-button-brand-text-color-active: #1b0470;
    --slds-c-button-brand-text-color-hover: #1b0470;
}

必須な外部リンクボタンのデザイン

必須な外部リンクボタンのデザインを変更する時は.input-design-button .slds-button_destructiveを編集してください。

変数	デフォルト値	説明
--slds-c-button-destructive-color-background	-	外部リンクボタンの背景色を設定する
--slds-c-button-destructive-color-background-active	-	外部リンクボタンがアクティブ時の背景色を設定する
--slds-c-button-destructive-color-background-hover	-	外部リンクボタンがホバー時の背景色を設定する
--slds-c-button-destructive-color-border	-	外部リンクボタンの枠線の色を設定する
--slds-c-button-destructive-color-border-active	-	外部リンクボタンがアクティブ時の枠線の色を設定する
--slds-c-button-destructive-text-color	-	外部リンクボタンのテキストの色を設定する
--slds-c-button-destructive-text-color-active	-	外部リンクボタンがアクティブ時のテキストの色を設定する
--slds-c-button-text-color-hover	-	外部リンクボタンがホバー時のテキストの色を設定する
margin-bottom	-	外部リンクボタンの下側のマージンを設定する

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

.input-design-button .slds-button_destructive {
    --slds-c-button-destructive-color-background: gold;
    --slds-c-button-destructive-color-background-active: orange;
    --slds-c-button-destructive-color-background-hover: orange;
    --slds-c-button-destructive-color-border: gold;
    --slds-c-button-destructive-color-border-active: orange;
    --slds-c-button-destructive-text-color: red;
    --slds-c-button-destructive-text-color-active: #444444;
    --slds-c-button-text-color-hover: black;
    margin-bottom: 10px;
}

⚠️WARNING
margin-bottomプロパティを設定しないと、下の画像のようにエラーメッセージがボタンと重なることがあります。

そのため、適切なmargin-bottomプロパティを設定してください。

外部リンクボタンのエラーメッセージ

section_detail_button_error
必須な外部リンクボタンがクリックされないまま確認画面に遷移しようとした時に出現するエラーメッセージのデザインを変更できます。
変更するには、.input-design-button + .button-required-error-messageを編集してください。

変数	デフォルト値	説明
font-size	-	エラーメッセージのフォントサイズを設定する
padding-left	-	エラーメッセージのインデントを設定する
padding-top	-	エラーメッセージのの上側のパディングを設定する

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

.input-design-button + .button-required-error-message {
    font-size: 2rem;
    padding-left: 1rem;
    padding-top: 1rem;
}

クリック後の外部リンクボタンのデザイン

クリック後の外部リンクボタンのデザインを変更するには.input-design-button .slds-button_neutralを編集してください。

変数	デフォルト値	説明
--slds-c-button-neutral-color-background	-	外部リンクボタンの背景色を設定する
--slds-c-button-neutral-color-background-active	-	外部リンクボタンがアクティブ時の背景色を設定する
--slds-c-button-neutral-color-background-hover	-	外部リンクボタンがホバー時の背景色を設定する
--slds-c-button-neutral-color-border	-	外部リンクボタンの枠線の色を設定する
--slds-c-button-neutral-color-border-active	-	外部リンクボタンがアクティブ時の枠線の色を設定する
--slds-c-button-neutral-color-border-hover	-	外部リンクボタンがホバー時の枠線の色を設定する
--slds-c-button-text-color	-	外部リンクボタンのテキストの色を設定する
--slds-c-button-text-color-active	-	外部リンクボタンがアクティブ時のテキストの色を設定する
--slds-c-button-text-color-hover	-	外部リンクボタンがホバー時のテキストの色を設定する

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

.input-design-button .slds-button_neutral {
    --slds-c-button-neutral-color-background: #e67a7a;
    --slds-c-button-neutral-color-background-active: #a52e2e;
    --slds-c-button-neutral-color-background-hover: #a52e2e;
    --slds-c-button-neutral-color-border: #e67a7a;
    --slds-c-button-neutral-color-border-active: #a52e2e;
    --slds-c-button-neutral-color-border-hover: #a52e2e;
    --slds-c-button-text-color: white;
    --slds-c-button-text-color-active: black;
    --slds-c-button-text-color-hover: black;
}

💡NOTE
クリック後の外部リンクボタンデザインは、クリック前の外部リンクボタンが必須かそうでないかに依らず共通です。

フッター

フッターボタン共通デザイン

section_detail_footer
フッターのボタンの共通デザインを変更することができます。
変更するには、.footer-button-scaleを編集してください。

変数	デフォルト値	説明
transform	-	ボタンの変形を設定します
margin	-	ボタンのマージンを設定します

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

.footer-button-scale {
    transform: scale(1.5);
    margin: 0 2.6rem;
}

💡NOTE
デフォルトデザインの確認画面の戻るボタンと入力確定ボタンの間隔は48pxです。

💡NOTE
フッターのボタンは中央に寄せるようになっているので、transform-originプロパティを設定する必要はありません。

入力確認ボタン

section_input_check_button
入力確認ボタンのデザインを変更することができます。
変更するには、.footer-ckeck-buttonを編集してください。

変数	デフォルト値	説明
--slds-c-button-brand-color-background	-	ボタンの背景色を設定する
--slds-c-button-brand-color-border	-	ボタンの枠線の色を設定する
--slds-c-button-brand-color-background-active	-	ボタンがアクティブ時の背景色を設定する
--slds-c-button-brand-color-background-hover	-	ボタンがホバー時の背景色を設定する
--slds-c-button-brand-color-border-hover	-	ボタンがホバー時の枠線の色を設定する

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

.footer-ckeck-button {
    --slds-c-button-brand-color-background: red;
    --slds-c-button-brand-color-border: red;
    --slds-c-button-brand-color-background-active: #fdaa0f;
    --slds-c-button-brand-color-background-hover: #fdaa0f;
    --slds-c-button-brand-color-border-hover: #fdaa0f;
}

確認画面戻るボタン

確認画面の戻るボタンのデザインを変更することができます。
変更するには、.footer-back-buttonを編集してください。

変数	デフォルト値	説明
--slds-c-button-outline-brand-color-background	-	ボタンの背景色を設定する
--slds-c-button-outline-brand-color-background-active	-	ボタンがアクティブ時の背景色を設定する
--slds-c-button-outline-brand-color-background-hover	-	ボタンがホバー時の背景色を設定する
--slds-c-button-outline-brand-color-border	-	ボタンの枠線の色を設定する
--slds-c-button-outline-brand-color-border-hover	-	ボタンがホバー時の枠線の色を設定する

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

.footer-back-button {
    --slds-c-button-outline-brand-color-background: #a1a1f5;
    --slds-c-button-outline-brand-color-background-active: blue;
    --slds-c-button-outline-brand-color-background-hover: blue;
    --slds-c-button-outline-brand-color-border: #a9a9fa;
    --slds-c-button-outline-brand-color-border-hover: #a9a9fa;
}

入力確定ボタン

入力確定ボタンのデザインを変更することができます。
変更するには、.footer-confirm-buttonを編集してください。

変数	デフォルト値	説明
--slds-c-button-brand-color-background	-	ボタンの背景色を設定する
--slds-c-button-brand-color-border	-	ボタンの枠線の色を設定する
--slds-c-button-brand-color-background-active	-	ボタンがアクティブ時の背景色を設定する
--slds-c-button-brand-color-background-hover	-	ボタンがホバー時の背景色を設定する
--slds-c-button-brand-color-border-hover	-	ボタンがホバー時の枠線の色を設定する

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

.footer-confirm-button {
    --slds-c-button-brand-color-background: red;
    --slds-c-button-brand-color-border: red;
    --slds-c-button-brand-color-background-active: #fdaa0f;
    --slds-c-button-brand-color-background-hover: #fdaa0f;
    --slds-c-button-brand-color-border-hover: #fdaa0f;
}

スマートフォン向けブラウザで閲覧した時の見た目

以上の全ての変数やクラスを適用した時のサイトをスマートフォン向けブラウザで閲覧した時の見た目は次のとおりです。

入力画面

androidInput

確認画面

androidcheck

customCommonInputPage.css

注意点

デフォルトデザイン

各部説明

表の見方

カスタマイズについて

カスタマイズ項目説明

目次

プログレスインジケータ

文字

入力画面

確認画面

タイトル

パディング

タイトル枠デザイン

フォームレイアウト名デザイン

先頭補足説明と補足説明

セクションボディ

全体のパディング

各セクションボディのパディング

タイトル・セクションヘッダー・セクション詳細の間隔

セクションヘッダー

セクションヘッダーのデザイン

セクションヘッダーのタイトル

セクション補足説明

セクション詳細

セクション詳細のデザイン

項目欄名のフォントサイズ

項目名の下の線

項目欄補足説明

入力画面の入力欄の幅

入力欄のエラーメッセージ

連結文字

ファイルドロップゾーンのエラーメッセージ

入力欄の間隔

セクション詳細の各入力欄タイプ毎の設定

テキストエリア以外の入力を伴う入力欄

【iOS対策】type="date"のinput要素の文字揃え

テキストエリア

プレースホルダー

チェックボックス

チェックボックスのデザイン

チェックボックスの大きさ

チェックボックスのチェックマーク

チェックボックスのラベル

確認画面でのチェックボックス

ラジオボタン

ラジオボタンの大きさ

ラジオボタンのチェックの大きさ

ラジオボタンのラベル

選択リスト

選択リストのデザイン

プルダウンメニュー

ファイルドロップゾーン

レコード検索

レコード検索ボタン

レコード検索ボタン内のアイコン

外部リンクボタン

外部リンクボタンの共通設定

外部リンクボタンの大きさ

外部リンクボタンのアイコン

外部リンクボタンのラベル

必須でない外部リンクボタンのデザイン

必須な外部リンクボタンのデザイン

外部リンクボタンのエラーメッセージ

クリック後の外部リンクボタンのデザイン

フッター

フッターボタン共通デザイン

入力確認ボタン

確認画面戻るボタン

入力確定ボタン

スマートフォン向けブラウザで閲覧した時の見た目

入力画面

確認画面