次の方法で共有

CSS テンプレート リファレンス ガイド

ユーザー サインイン プロセス用に会社のブランドを構成すると、Id およびアクセス管理サービスとして Microsoft Entra ID を使用するアプリケーションでシームレスなエクスペリエンスが提供されます。 会社のブランド化 プロセスをカスタマイズする の一環として、CSS テンプレート を使用している場合は、この CSS リファレンス ガイドを使用します。

HTML セレクター

次の CSS スタイルは、ページ全体の既定の本文およびリンク スタイルになります。 他のリンクまたはテキストにスタイルを適用すると、CSS セレクターがオーバーライドされます。

  • body - ページ全体のスタイル
  • リンクのスタイル:
    • a, a:link - すべてのリンク
    • a:hover - マウスがリンクの上にある場合
    • a:focus - リンクにフォーカスがあるとき
    • a:focus:hover - リンクにフォーカス があり、マウスがリンクの上 場合
    • a:active - リンクがクリックされたとき

Microsoft Entra CSS セレクター

次の CSS セレクターを使用して、サインイン エクスペリエンスの詳細を構成します。

  • .ext-background-image - 既定のライトボックス テンプレートに背景イメージを含むコンテナー

  • .ext-header - コンテナーの上部にあるヘッダー

  • .ext-header-logo - コンテナーの上部にあるヘッダー ロゴ

    .ext-header と .ext-header-logo 領域が強調表示されているサインイン画面のスクリーンショット。

  • .ext-middle - サインイン ボックスを中央に、水平方向を中央に揃える全画面表示の背景のスタイル

  • .ext-vertical-split-main-section - サインイン ボックスと背景の両方を含む垂直分割テンプレートの部分画面背景のコンテナーのスタイル (このスタイルは、Active Directory フェデレーション サービス (ADFS) テンプレートとも呼ばれます)。

  • .ext-vertical-split-background-image-container - 垂直分割/ADFS テンプレートのサインイン ボックスの背景

  • .ext-sign-in-box - サインイン ボックス コンテナー

  • .ext-title - タイトル テキスト

    サインイン ボックスのスクリーンショット。ボックスの一部が .ext-sign-in-box セレクターでスタイル設定されています。

  • .ext-subtitle - 字幕テキスト

  • 主ボタンのスタイル:

    • .ext-button.ext-primary - プライマリ ボタンの既定のスタイル
    • .ext-button.ext-primary:hover - マウスがボタンの上にある場合
    • .ext-button.ext-primary:focus - ボタンにフォーカスがあるとき
    • .ext-button.ext-primary:focus:hover - ボタンにフォーカスが し、マウスがボタンの上にある 場合
    • .ext-button.ext-primary:active - ボタンがクリックされたとき

    プライマリ - 次へ - ボタンが強調表示されているサインイン ボックスのスクリーンショット。

  • セカンダリ ボタンのスタイル:

    • .ext-button.ext-secondary - セカンダリ ボタン
    • .ext-button.ext-secondary:hover - マウスがボタンの上にある場合
    • .ext-button.ext-secondary:focus ボタンにフォーカスがあるとき
    • .ext-button.ext-secondary:focus:hover - ボタンにフォーカスが し、マウスがボタンの上にある 場合
    • .ext-button.ext-secondary:active - ボタンがクリックされたとき

    [サインイン オプション] ステップのサインイン ボックスのスクリーンショット。セカンダリ - [戻る] ボタンが強調表示されています。

  • .ext-error - エラー テキスト

    エラー テキストが強調表示されているサインイン ボックスのスクリーンショット。

  • テキスト ボックスのスタイル:

    • .ext-input.ext-text-box - テキスト ボックス
    • .ext-input.ext-text-box.ext-has-error - テキスト ボックスに関連付けられている検証エラーがある場合
    • .ext-input.ext-text-box:hover - マウスがテキスト ボックスの上にある場合
    • .ext-input.ext-text-box:focus - テキスト ボックスにフォーカスがある場合
    • .ext-input.ext-text-box:focus:hover - テキスト ボックスにフォーカス があり、マウスがテキスト ボックスの上 場合

    サンプル テキストが強調表示されたテキスト ボックスを含むサインイン ボックスのスクリーンショット。

  • .ext-boilerplate-text - サインイン ボックスの下部にあるカスタム メッセージ テキスト

  • .ext-promoted-fed-cred-box - [サインイン オプション] テキスト ボックス

    オプションの定型テキスト領域が強調表示されているサインイン ボックスのスクリーンショット。

  • フッターのスタイル:

    • .ext-footer - ページ下部のフッター領域
    • .ext-footer-links - ページ下部のフッターのリンク領域
    • .ext-footer-item - ページ下部のフッターにアイテム ([使用条件] や [プライバシー & Cookie] など) をリンクする
    • .ext-debug-item - ページの下部にあるフッターのデバッグの詳細の省略記号