--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/borders-shadows' title: '境界線、角丸、シャドウの追加 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:21:13+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- カードに枠を付け、写真の角を丸め、ボックスにシャドウで浮き上がりを持たせます。これらはすべてエレメントのStyleパネルで設定し、ホバー時の変更はHover styleパネルで行います。1つのカードを目立たせるのに使います。一連のカード全体に同じ枠を付けるには、共有クラスで揃えます。 動画では以下の手順どおりに、テキストブロックを境界線、角丸、ホバーで濃くなるシャドウを持つカードに変えています。 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: |- カードに枠を付け、写真の角を丸め、ボックスにシャドウで浮き上がりを持たせます。これらはすべてエレメントのStyleパネルで設定し、ホバー時の変更はHover styleパネルで行います。1つのカードを目立たせるのに使います。一連のカード全体に同じ枠を付けるには、共有クラスで揃えます。 動画では以下の手順どおりに、テキストブロックを境界線、角丸、ホバーで濃くなるシャドウを持つカードに変えています。 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:13+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/borders-shadows' articleSection: エレメントのスタイル - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/borders-shadows' description: |- カードに枠を付け、写真の角を丸め、ボックスにシャドウで浮き上がりを持たせます。これらはすべてエレメントのStyleパネルで設定し、ホバー時の変更はHover styleパネルで行います。1つのカードを目立たせるのに使います。一連のカード全体に同じ枠を付けるには、共有クラスで揃えます。 動画では以下の手順どおりに、テキストブロックを境界線、角丸、ホバーで濃くなるシャドウを持つカードに変えています。 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/element-settings/spacing) カードに枠を付け、写真の角を丸め、ボックスにシャドウで浮き上がりを持たせます。これらはすべてエレメントの**Style**パネルで設定し、ホバー時の変更は**Hover style**パネルで行います。1つのカードを目立たせるのに使います。一連のカード全体に同じ枠を付けるには、共有クラスで揃えます。 動画では以下の手順どおりに、テキストブロックを境界線、角丸、ホバーで濃くなるシャドウを持つカードに変えています。 ## 始める前に - ページをDXPR Builderで開きます。エレメントにポイントすると**More**付きのコントロールバーが表示されます。ビルダーが初めての場合は[最初のページ](/ja/hc/documentation/learn-dxpr-builder/getting-started/first-page)をご覧ください。 - **Save**（ダイアログ）では、変更はエディター内に保持されます。コンテンツ上部のビルダーツールバーにある**Save**でページを保存し、「Saved field」と表示されます。 - **1か所を目立たせます。** 境界線やシャドウは、重要な日付、オファー、引用に目を向けさせます。あちこちに付けると効果がなくなります。 - **一連の見た目を揃えます。** 多くのカードに同じ枠を付けるには、1つのカードをテンプレートとして保存するか、共有クラスを使います。[HTML IDとクラス](/ja/hc/documentation/learn-dxpr-builder/element-settings/custom-css)をご覧ください。 - **シャドウの調整はテーマに任せます。** 5つの**Drop shadow**レベルは、サイト全体で1か所定義です。テーマでレベルを変えれば、そのレベルを使うすべてのエレメントに反映されます。 ## 手順：目立つカード ブランドカラーの細い境界線を持つ柔らかいボックスを作ります。角丸で、ホバーでシャドウが濃くなります。 1. ページ上で**Text**エレメントにカーソルを合わせ、**More**、**Settings**の順にクリックします。 2. 次に**Style**パネルを開きます。上部にボックスモデルがあります。ロックは開いた状態から始まるため、**Padding**横のロックをクリックして閉じ、4辺が連動するようにします。 3. クリックするのは**Padding**の上辺です。32と入力してEnterキーを押します。4辺すべてが32pxになります。 4. 薄いグレーのような明るい**Background**色を選びます。 5. 種類は**Border style**で**Solid**を選びます。 6. 閉じるのは**Border**横のロックです。いずれかの辺をクリックし、1と入力してEnterキーを押します。 7. 色は**Border color**を選び、**Border radius**を16に、**Drop shadow**を3にします。 8. 次に**Hover style**パネルを開き、**Drop shadow**を5にします。 9. ダイアログの**Save**、次にツールバーの**Save**をクリックします。 10. 表示メニュー（目アイコン）で**Preview**を選び、カードにポイントします。シャドウが濃くなります。 ## 表示内容 カードには自分の色の細い境界線、丸い角、下に柔らかいシャドウが付きます。**Preview**では、ポインターがカード上にある間シャドウが濃くなり、離れると戻ります。 ## 境界線の仕組み 境界線には3つの設定が必要で、パネル内に分散しています。3つすべて設定します。 1. **Border style**で線を選びます。**Solid**、**Dotted**、**Dashed**。**Theme defaults**では、ほとんどのエレメントに境界線はありません。**None**では、テーマが描く境界線を取り除きます。 2. ボックスモデルの**Border**リングで各辺の幅を設定します。0から50 px。空のままにすると、ブラウザー独自の幅（約3 px）になります。 3. **Border color**で色を設定します。空のままにすると、境界線はテキストの色になります。 **Border radius**では4隅すべてを丸めます。0から100 px。背景とシャドウも一緒に丸まります。**Image**では画像自体が丸まります。 円にするには、エレメントを正方形にします。次に**Border radius**を幅の半分のピクセル値にします。幅200 pxのエレメントなら100です。それより広い場合は、**HTML classes**にある**Circular (50% radius)**クラスを追加します。**Image**ではこのクラスは画像ではなく画像まわりの枠を丸めるため、**Border radius**を使います。 ## ドロップシャドウのレベル | レベル | エレメント下のシャドウ | |---|---| | 0 | DXPR Builder側はなし。テーマ依存 | | 1 | 下に2 px、ぼかし7 px、20%の黒 | | 2 | 下に4 px、ぼかし12 px、30%の黒 | | 3 | 下に5 px、ぼかし25 px、30%の黒 | | 4 | 下に8 px、ぼかし38 px、30%の黒 | | 5 | 下に12 px、ぼかし57 px、30%の黒 | これらは初期値のレベルです。各レベルはページに保存される値ではなく共有スタイルのため、テーマでサイト全体向けに調整できます。テーマ開発者向け：レベルはCSS変数`--dxb-box-shadow-1`から`--dxb-box-shadow-5`です。 パネルは**Hover style**で、**Drop shadow**ではポインターがエレメント上にある間のレベルを設定します。新しいシャドウは0.15秒でフェードインします。ホバーでレベルを上げると、カードが持ち上がったように見えます。 **HTML classes**には他の形状もあります。**Lifted drop shadow**、**Raised drop shadow**、**3D shadow**、**Curved horizontal drop shadow**です。Bootstrapの**Small shadow**、**Default shadow**、**Large shadow**もあります。シャドウはエレメントごとに1つ使います。Bootstrapのシャドウクラスは**Drop shadow**スライダーより優先されます。 ## 設定した境界線・角・シャドウが表示されない場合 - **境界線が出ない。** **Border style**が**Theme defaults**か**None**です。**Solid**、**Dotted**、**Dashed**を選びます。 - **境界線が太すぎる。** 幅が未設定のため、ブラウザーの約3 pxになっています。ボックスモデルの**Border**各辺を設定します。 - **境界線の色が違う。** 空の**Border color**はテキストの色になります。**Border color**を選びます。 - **角が四角のままになっている。** **HTML classes**にある**No rounded corners (rounded-0)**のようなクラスか、`!important`付きのテーマルールが優先されています。チップを外すか、テーマルールについてWeb担当者に確認します。 - **角は丸まるが円にならない。** スライダーは100 pxまでです。**Circular (50% radius)**クラスを使います。 - **Drop shadowを変えても変わらない。** **HTML classes**にある**Large shadow**のようなBootstrapシャドウクラスが優先されています。そのチップを外します。レベル1も薄めのため、確認にはレベル3を試します。 - **ホバーでシャドウが濃くならない。** **Style**ではなく**Hover style**パネルで**Drop shadow**を設定し、通常時より高いレベルを選びます。 - **1辺だけ変わった。** **Padding**や**Border**横のロックが開いていました。閉じてから値を再入力します。 - **スマートフォンでホバーシャドウが出ない。** タッチ画面にポインターはないため、ホバー時の見た目はタップ後にのみ表示されます。 ## 次のステップ - [間隔](/ja/hc/documentation/learn-dxpr-builder/element-settings/spacing)：境界線の内側にコンテンツの余白を付けます。