---
title: "Embedded Authenticationのスタイルシートリファレンス"
url: https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/
description: "Catalyst Authenticationを使用すると、アプリユーザーに安全な認証とサインインを提供し、ユーザーアカウントを管理できます。"
last_updated: 2026-08-17T12:16:04Z
service: Cloud Scale
type: general
---

# Embedded Authenticationのリファレンススタイルシート

このページでは、[Embedded Authentication](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/) Typeでログイン要素をスタイリングするために必要なすべてのCSSクラスとIDの一覧と説明を提供します。Catalystは、Conventional Loginフォーム、Social-Login Onlyフォーム、Password Resetフォームに個別のCSSファイルを提供し、それぞれに個別のCSS IDとクラスがあります。

これらのCSS IDとクラスは、利便性のためにCatalystによって事前定義されています。必要に応じてスタイルシートに組み込むだけで、ログイン要素のデザインとブランディングをカスタマイズできます。設定したCSSファイルを、この認証のログインフォームスクリプトにインポートする必要があります。

iFrameのスタイリングを開始する前に、必要なCSSファイルをダウンロードしてください。

CSSスタイルシート:
* Conventional Loginフォーム - [ダウンロード](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin.css)
* Social Login-onlyフォーム - [ダウンロード](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin_providers_only.css)
* Confirm Passwordフォーム - [ダウンロード](https://api.catalyst.zoho.com/__catalyst/auth/static-file?file_name=confirm_password.css)
* Password Resetフォーム - [ダウンロード](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_password_reset.css)

> **注意:** スタイルシートをダウンロードした後、コードの最終行の後からログイン要素のスタイリングを開始してください。既存のコードを変更しないことを強くお勧めします。変更するとiFrameが正しくレンダリングされない可能性があります。上記の各フォームがエンドユーザーにどのように表示されるかの詳細については、この[シート](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/styling-embedded-auth/)を参照してください。

### エンドユーザーがメールアドレスを入力するセクション

![cloud_scale_auth_embedded_style_sheet_1](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_style_sheet_1.webp)

#### セクション1 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#headtitle</td>
			<td>iFrameのタイトルに存在するスタイリング要素を処理するID</td>
		</tr>
	</tbody>
</table>

#### セクション2 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#login_id</td>
			<td>入力フィールドのスタイリングを処理するID</td>
		</tr>
        <tr>
			<td>.fielderror</td>
			<td>エラーテキストのサイズを処理するクラス</td>
		</tr>
        <tr>
			<td>.errorlabel</td>
			<td>エラーメッセージの配色を処理するクラス</td>
		</tr>
        <tr>
			<td>.errorborder</td>
			<td>エラー発生時に入力フィールドの周囲に表示されるボーダー色を処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション3 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#nextbtn</td>
			<td>「**NEXT**」ボタンのスタイリングを処理するID</td>
		</tr>
	</tbody>
</table>

#### セクション4 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#forgotpassword</td>
			<td>「**Forgot Password**」リテラルのスタイリングを処理するID</td>
		</tr>
	</tbody>
</table>

#### セクション5 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.fed_div</td>
			<td>ソーシャルログインオプション全体のサイズ、高さ、カーソル、オーバーフローを処理するクラス</td>
		</tr>
        <tr>
			<td>.zoho_fed_box</td>
			<td>Zohoソーシャルログインの配色を処理するクラス</td>
		</tr>
        <tr>
			<td>.fed_icon</td>
			<td>すべてのソーシャルログインのロゴサイズを処理するクラス</td>
		</tr>
        <tr>
			<td>..zoho_icon</td>
			<td>Zohoソーシャルログインのロゴアイコンを処理するクラス</td>
		</tr>
	</tbody>
</table>

### エンドユーザーがパスワードを入力するセクション

![cloud_scale_auth_embedded_style_sheet_2](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_style_sheet_2.webp)

#### セクション1 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.username</td>
			<td>メールアドレスフィールドを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション2 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.Notyou</td>
			<td>「**Change**」リテラルのフォントサイズを処理するクラス</td>
		</tr>
        <tr>
			<td>.bluetext</td>
			<td>「**Change**」リテラルの色およびその他のプロパティを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション3 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#password</td>
			<td>入力フィールドのさまざまなプロパティを処理するID</td>
		</tr>
        <tr>
			<td>.fielderror</td>
			<td>エラーテキストのサイズを処理するクラス</td>
		</tr>
        <tr>
			<td>.errorborder</td>
			<td>エラー発生時に入力フィールドの周囲に表示されるボーダー色を処理するクラス</td>
		</tr>
        <tr>
			<td>.errorlabel</td>
			<td>エラーテキストの配色を処理するクラス</td>
		</tr>
        <tr>
			<td>.show_hide_password</td>
			<td>表示アイコンのプロパティを処理するクラス</td>
		</tr>
        <tr>
			<td>.icon_hide</td>
			<td>非表示アイコンのプロパティを処理するクラス</td>
		</tr>
        <tr>
			<td>.icon_show</td>
			<td>クリック時の表示アイコンのプロパティを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション4 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue_text_action</td>
			<td>両方のリテラルの配色、フォントサイズ、その他のプロパティを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション5 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue</td>
			<td>Sign Inボタンとボックスの配色を処理するクラス</td>
		</tr>
        <tr>
			<td>.btn</td>
			<td>ボタンのサイズを処理するクラス</td>
		</tr>
	</tbody>
</table>

### エンドユーザーがパスワードを確認するセクション
![cloud_scale_auth_embedded_style_sheet_4](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_style_sheet_4.webp)

#### セクション1 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.confirmtitle</td>
			<td>タイトルに存在するスタイリング要素を処理するクラス</td>
		</tr>
		<tr>
			<td>.confirmdesc</td>
			<td>タイトル要素の下部に強力でユニークなパスワードの作成を通知する通知/説明要素</td>
		</tr>
		<tr>
			<td>.confirm_head</td>
			<td>確認フォームの背景のスタイリングを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション2 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.username</td>
			<td>メールアドレスフィールドを処理するクラス</td>
		</tr>
		<tr>
			<td>.icon-profile</td>
			<td>メールアドレスフィールド内のプロフィールを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション3 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#password</td>
			<td>パスワード入力フィールドに存在するスタイリング要素を処理するID</td>
		</tr>
		<tr>
			<td>.icon-hide</td>
			<td>非表示アイコンのプロパティを処理するクラス</td>
		</tr>
		<tr>
			<td>.show_hide_password</td>
			<td>アイコンの表示のプロパティを処理するクラス</td>
		</tr>
		<tr>
			<td>.fielderror</td>
			<td>エラーテキストのサイズを処理するクラス</td>
		</tr>
		<tr>
			<td>.passwordpolicy</td>
			<td>パスワードポリシーを含むポップアップを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション4 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#cpassword</td>
			<td>パスワード確認の入力フィールドを処理するID</td>
		</tr>
	</tbody>
</table>

#### セクション5 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#nextbtn</td>
			<td>確認ボタンを処理するID</td>
		</tr>
</table>

### エンドユーザーがCAPTCHAを入力するセクション

![cloud_scale_auth_embedded_style_sheet_3](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_style_sheet_3.webp)

#### セクション1 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#headtitle</td>
			<td>iFrameのタイトルに存在するスタイリング要素を処理するID</td>
		</tr>
	</tbody>
</table>

#### セクション2 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.user_info</td>
			<td>ボックスのボーダーのスタイリング要素を処理するクラス</td>
		</tr>
        <tr>
			<td>.menutext</td>
			<td>ユーザーのメールIDのスタイリングを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション3 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.changeuser</td>
			<td>「**Change**」リテラルに存在するスタイリング要素を処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション4 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#captcha_container</td>
			<td>Captchaコントロールボックスを囲むボックスのスタイリングを処理するID</td>
		</tr>
        <tr>
			<td>.reload_captcha ::before</td>
			<td>リロードボタンのクリック前のスタイリングを処理するクラス</td>
		</tr>
        <tr>
			<td>.text_box</td>
			<td>入力フィールドのプロパティを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション5 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue</td>
			<td>ボタンとボックスの配色を処理するクラス</td>
		</tr>
        <tr>
			<td>.btn</td>
			<td>ボタンのサイズを処理するクラス</td>
		</tr>
	</tbody>
</table>