境界線、角丸、シャドウの追加.

DXPR Builderを学ぶページを作るエレメントのスタイル

カードに枠を付け、写真の角を丸め、ボックスにシャドウで浮き上がりを持たせます。これらはすべてエレメントのStyleパネルで設定し、ホバー時の変更はHover styleパネルで行います。1つのカードを目立たせるのに使います。一連のカード全体に同じ枠を付けるには、共有クラスで揃えます。

動画では以下の手順どおりに、テキストブロックを境界線、角丸、ホバーで濃くなるシャドウを持つカードに変えています。

始める前に

  • ページをDXPR Builderで開きます。エレメントにポイントするとMore付きのコントロールバーが表示されます。ビルダーが初めての場合は最初のページをご覧ください。
  • Save（ダイアログ）では、変更はエディター内に保持されます。コンテンツ上部のビルダーツールバーにあるSaveでページを保存し、「Saved field」と表示されます。
  • 1か所を目立たせます。 境界線やシャドウは、重要な日付、オファー、引用に目を向けさせます。あちこちに付けると効果がなくなります。
  • 一連の見た目を揃えます。 多くのカードに同じ枠を付けるには、1つのカードをテンプレートとして保存するか、共有クラスを使います。HTML IDとクラスをご覧ください。
  • シャドウの調整はテーマに任せます。 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を選び、カードにポイントします。シャドウが濃くなります。

表示内容

Border styleにSolid、Border radiusに16、Drop shadowに3を設定したTextエレメントのStyleパネル。その横に細い濃紺の境界線、角丸、柔らかいシャドウのグレーのキャンパスツアーカード

カードには自分の色の細い境界線、丸い角、下に柔らかいシャドウが付きます。Previewでは、ポインターがカード上にある間シャドウが濃くなり、離れると戻ります。

境界線の仕組み

境界線には3つの設定が必要で、パネル内に分散しています。3つすべて設定します。

  1. Border styleで線を選びます。Solid、Dotted、Dashed。Theme defaultsでは、ほとんどのエレメントに境界線はありません。Noneでは、テーマが描く境界線を取り除きます。
  2. ボックスモデルのBorderリングで各辺の幅を設定します。0から50 px。空のままにすると、ブラウザー独自の幅（約3 px）になります。
  3. Border colorで色を設定します。空のままにすると、境界線はテキストの色になります。

Borderリングに2px、紫のBorder colorチップ、Border styleにDashedを設定したTextエレメントのStyleパネル。その横に紫の破線の境界線を持つEarly bird offerボックス

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%の黒

Level 1からLevel 5と書かれた5枚の白いカード。前より深く柔らかいDrop shadow付き

これらは初期値のレベルです。各レベルはページに保存される値ではなく共有スタイルのため、テーマでサイト全体向けに調整できます。テーマ開発者向け：レベルは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横のロックが開いていました。閉じてから値を再入力します。
  • スマートフォンでホバーシャドウが出ない。 タッチ画面にポインターはないため、ホバー時の見た目はタップ後にのみ表示されます。

次のステップ

  • 間隔：境界線の内側にコンテンツの余白を付けます。