セクションへのリンクとクラスの使い回し.

セクションにHTML IDを付ければ、ボタンがそこにジャンプできます。HTML classesを追加すれば、スマートフォンでの非表示、画面サイズごとの間隔、テーマ定義の見た目の使い回しができます。どちらのフィールドも、各エレメントのGeneralパネルの下部にあります。クラスは見た目を統一します。CSSルールが変われば、そのクラスのすべてのエレメントに反映されます。

動画では最初の手順どおりに、ボタンをページ下部のセクションにジャンプさせています。

始める前に

• ページをDXPR Builderで開きます。エレメントにポイントするとMore付きのコントロールバーが表示されます。ビルダーが初めての場合は最初のページをご覧ください。
• Save（ダイアログ）では、変更はエディター内に保持されます。コンテンツ上部のビルダーツールバーにあるSaveでページを保存し、「Saved field」と表示されます。
• HTML IDをジャンプ先に使います。「Book a tour」ボタンで予約フォームまでスクロールできます。長いページの上部にあるリンク一覧で各部に誘導できます。
• クラスを繰り返す見た目に使います。Web担当者がCSSを1度書き、必要な箇所にクラスを追加します。Styleパネルでは代わりに各エレメントに値がコピーされ、時間とともにばらつきます。
• クラスの利用はStyleパネルにできないことに使います。スマートフォンでの非表示や画面サイズごとの間隔変更などです。

手順：セクションにジャンプするボタン

1. 対象のSectionにカーソルを合わせ、More、Settingsの順にクリックします。
2. 開くのはGeneralパネルで、programmesのような短い名前をHTML IDに入力します。Saveをクリックします。
3. 開くのはButtonの設定で、Linkに#に続けてまったく同じ名前（#programmes）を入力します。Saveをクリックします。
4. ビルダーツールバーのSaveをクリックします。
5. 表示メニュー（目アイコン）でPreviewを選び、ボタンをクリックします。

スクロールが見えるよう、ボタンより下のセクションで試します。対象が折りたたみパネル、タブ、カルーセルのスライド内にある場合は、リンクで先に開きます。

手順：スマートフォンでのエレメント非表示

1. エレメントにカーソルを合わせ、More、Settingsの順にクリックします。
2. 開くのはGeneralパネルで、HTML classesボックスをクリックします。
3. 選ぶのはHidden on extra small devices, phones (<576px)です。Responsive Visibilityグループにあります。
4. ダイアログのSave、次にツールバーのSaveをクリックします。

エレメントは幅576 px未満の画面で非表示になります。エディター内でも同様です。確認にはスマートフォンでページを開きます。

手順：独自クラスの直接入力

ボックスHTML classesでは一覧からの選択のみです。クラス名を入力するには、先にテキスト表示に切り替えます。

1. エレメントにカーソルを合わせ、More、Settingsの順にクリックします。
2. 使うのはHTML classesでEdit as textをクリックします。ボックスがプレーンテキストのフィールドに変わり、エレメントが持つクラスが一覧されます。
3. その後にクラス名を半角スペース区切りで追加します（例：brand-card py-3 py-lg-5）。ドットは付けません。チームのCSSにある.brand-cardは、ここではbrand-cardです。
4. ダイアログのSave、次にツールバーのSaveをクリックします。

エレメントにWebチーム定義の見た目が付きます。

表示内容

確認はPreviewで、ボタンでページがセクションまで滑らかにスクロールし、固定ヘッダー分の余白が付きます。アドレスバーは末尾#programmesになります。幅576 px未満では、非表示のエレメントが消えます。入力したクラスは、次にダイアログを開くとチップで表示されます。一覧にないものは「brand-card」のように引用符付きです。

フィールドの仕組み

HTML ID

IDは文字で始める必要があります。以降は文字、数字、ハイフン、アンダースコアが使えますが、半角スペースは不可です。誤ったIDではフィールド下にエラーが出て、修正するまでSaveが効きません。

フィールドを空のままにすると、エレメントはDXPR Builder作成のIDを保持します。空のフィールドにグレーで表示されます。各IDはページに1度だけ使います。2つのエレメントで共有すると、リンクは最初のものに跳びます。

HTML classes

一覧にはシャドウクラスとBootstrap 5クラスがあり、Margins、Padding、Responsive Visibility、Rounded Cornersのように役割別にグループ化されています。テーマで独自グループを末尾に追加できます。

開いた一覧をスクロールするか、padding、py-5、circularのように名前の一部を入力して絞り込みます。入力は一覧の絞り込みのみです。一覧にないクラスにはEdit as textを使います。

Bootstrapのクラスは、ページがBootstrap 5を読み込むときに有効です。テーマ由来か、General Settings > Bootstrap（/admin/dxpr_studio/dxpr_builder/settings）由来で、Sideload Bootstrap filesがBootstrap 5に設定されています。

色や間隔などのBootstrapユーティリティクラスは!important付きです。同じプロパティではStyleパネルより優先されます。Primary backgroundはBackgroundに、Top margin size 3 (mt-3)は上部のMarginに勝ちます。

名前に画面サイズを含むクラスは、その幅以上で適用されます。

そのためpy-3 py-lg-5では、小さい画面で上下16 pxのパディング、幅992 px以上で48 pxになります。

テーマ開発者向け

クラスにはテーマのCSSルールが必要です。例：

.brand-card {
  background: #f4f6fb;
  border-left: 4px solid #1a4d8f;
  padding: 2rem;
}

編集者向けにHTML classes一覧にクラスを表示するには、テーマの.info.ymlに登録します。ユーティリティクラスをご覧ください。サイト全体のスタイルはカスタムCSSをご覧ください。

表示されない場合

• Saveが効かずHTML IDに「ID must start with a letter」と出る。 IDが上記ルール違反です。文字で始め、文字、数字、ハイフン、アンダースコアのみ使います。
• 新しいクラスを入力できない。 ボックスは一覧の絞り込みのみです。先にEdit as textをクリックします。
• 期待するクラスが一覧にない。 一覧にあるのはDXPR Builderとテーマが定義するクラスのみです。Edit as textをクリックして入力します。
• ボタンがまったくスクロールしない。 Linkは#に続けてHTML IDとまったく同じ（大文字小文字も一致）にします。両方のフィールドを確認し、Previewで試します。
• クラスが効かない。 綴り間違い、テーマにルールなし、Bootstrap 5未読み込みのいずれかです。綴りを確認し、ルールやSideload Bootstrap filesについてWeb担当者に確認します。
• チームのクラスが一部にしか効かない。 同じプロパティのStyleパネル値がテーマクラスに勝ちます。Styleパネルでその値を消去します。
• ボタンが違う場所に跳ぶ。 2つのエレメントがIDを共有し、最初のものが優先されています。各エレメントに個別のIDを付けます。
• セクション見出しが固定ヘッダーの下に隠れる。 DXPR Builderがヘッダーを認識していません。Web担当者がScroll offset selectorにGeneral Settings > Advanced Settings（/admin/dxpr_studio/dxpr_builder/settings）でヘッダーのCSSセレクターを設定します。

次のステップ

• レスポンシブデザイン：画面サイズごとに表示するエレメントを計画します。