--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/custom-css' title: 'セクションへのリンクとクラスの使い回し | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:21:24+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- セクションにHTML IDを付ければ、ボタンがそこにジャンプできます。HTML classesを追加すれば、スマートフォンでの非表示、画面サイズごとの間隔、テーマ定義の見た目の使い回しができます。どちらのフィールドも、各エレメントのGeneralパネルの下部にあります。クラスは見た目を統一します。CSSルールが変われば、そのクラスのすべてのエレメントに反映されます。 動画では最初の手順どおりに、ボタンをページ下部のセクションにジャンプさせています。 tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: セクションへのリンクとクラスの使い回し description: |- セクションにHTML IDを付ければ、ボタンがそこにジャンプできます。HTML classesを追加すれば、スマートフォンでの非表示、画面サイズごとの間隔、テーマ定義の見た目の使い回しができます。どちらのフィールドも、各エレメントのGeneralパネルの下部にあります。クラスは見た目を統一します。CSSルールが変われば、そのクラスのすべてのエレメントに反映されます。 動画では最初の手順どおりに、ボタンをページ下部のセクションにジャンプさせています。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:21:24+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/custom-css' articleSection: エレメントのスタイル - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/custom-css' description: |- セクションにHTML IDを付ければ、ボタンがそこにジャンプできます。HTML classesを追加すれば、スマートフォンでの非表示、画面サイズごとの間隔、テーマ定義の見た目の使い回しができます。どちらのフィールドも、各エレメントのGeneralパネルの下部にあります。クラスは見た目を統一します。CSSルールが変われば、そのクラスのすべてのエレメントに反映されます。 動画では最初の手順どおりに、ボタンをページ下部のセクションにジャンプさせています。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ページを作る](/ja/hc/documentation/learn-dxpr-builder/build) /[エレメントのスタイル](/ja/hc/documentation/learn-dxpr-builder/element-settings) # セクションへのリンクとクラスの使い回し. DXPR Builderを学ぶページを作るエレメントのスタイル ## このガイドの内容 関連ガイド - [レイアウトをスマートフォンに対応させる](/ja/hc/documentation/learn-dxpr-builder/design/responsive-design) セクションに**HTML ID**を付ければ、ボタンがそこにジャンプできます。**HTML classes**を追加すれば、スマートフォンでの非表示、画面サイズごとの間隔、テーマ定義の見た目の使い回しができます。どちらのフィールドも、各エレメントの**General**パネルの下部にあります。クラスは見た目を統一します。CSSルールが変われば、そのクラスのすべてのエレメントに反映されます。 動画では最初の手順どおりに、ボタンをページ下部のセクションにジャンプさせています。 ## 始める前に - ページをDXPR Builderで開きます。エレメントにポイントすると**More**付きのコントロールバーが表示されます。ビルダーが初めての場合は[最初のページ](/ja/hc/documentation/learn-dxpr-builder/getting-started/first-page)をご覧ください。 - **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**に勝ちます。 名前に画面サイズを含むクラスは、その幅以上で適用されます。 | クラス名に含まれる表記 | 適用開始幅 | |---|---| | `sm` | 576 px | | `md` | 768 px | | `lg` | 992 px | | `xl` | 1200 px | | `xxl` | 1400 px | そのため`py-3 py-lg-5`では、小さい画面で上下16 pxのパディング、幅992 px以上で48 pxになります。 ### テーマ開発者向け クラスにはテーマのCSSルールが必要です。例： ```css .brand-card { background: #f4f6fb; border-left: 4px solid #1a4d8f; padding: 2rem; } ``` 編集者向けに**HTML classes**一覧にクラスを表示するには、テーマの`.info.yml`に登録します。[ユーティリティクラス](/ja/hc/documentation/learn-dxpr-builder/customization/utility-classes)をご覧ください。サイト全体のスタイルは[カスタムCSS](/ja/hc/documentation/learn-dxpr-builder/customization/custom-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セレクターを設定します。 ## 次のステップ - [レスポンシブデザイン](/ja/hc/documentation/learn-dxpr-builder/design/responsive-design)：画面サイズごとに表示するエレメントを計画します。