---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/hover-effects'
title: 'ホバーでエレメントを反応させる | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:27:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  訪問者が指したらエレメントを変化させます。持ち上がるボックス、濃くなるボタン、明るくなる画像です。通常の見た目はStyleパネルで、ホバー時の見た目は対となるHover styleパネルで設定します。例ではホバーで持ち上がるグレーのテキストボックスを作ります。
  動画ではテキストボックスに背景、パディング、ホバーで深まるシャドウを付けています。
tags:
  - Ontwerpgidsen
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T11:27:43+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パネルで設定します。例ではホバーで持ち上がるグレーのテキストボックスを作ります。
        動画ではテキストボックスに背景、パディング、ホバーで深まるシャドウを付けています。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:27:43+0000'
      dateModified: '2026-10-24T11:27:43+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/design/hover-effects'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/hover-effects'
      description: |-
        訪問者が指したらエレメントを変化させます。持ち上がるボックス、濃くなるボタン、明るくなる画像です。通常の見た目はStyleパネルで、ホバー時の見た目は対となるHover styleパネルで設定します。例ではホバーで持ち上がるグレーのテキストボックスを作ります。
        動画ではテキストボックスに背景、パディング、ホバーで深まるシャドウを付けています。
      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
---
[Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # ホバーでエレメントを反応させる.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [スクロール・ホバー・クリックでエレメントに動きを付ける](/ja/hc/documentation/learn-dxpr-builder/design/animation-tab)
- [カードをスタイルする](/ja/hc/documentation/learn-dxpr-builder/design/card-styles)

訪問者が指したらエレメントを変化させます。持ち上がるボックス、濃くなるボタン、明るくなる画像です。通常の見た目は**Style**パネルで、ホバー時の見た目は対となる**Hover style**パネルで設定します。例ではホバーで持ち上がるグレーのテキストボックスを作ります。

動画ではテキストボックスに背景、パディング、ホバーで深まるシャドウを付けています。

  ## テキストボックスを作る

1. コンテンツエリアの**+**をクリックし、**Layout**タブから**Section**を選びます。
2. セクションの**+**をクリックして**Row**を選びます。
3. ローのグリッドアイコンをクリックし、3等分カラムのタイルを選んで**Save**をクリックします。
4. 最初のカラムの**+**をクリックし、**Content**タブから**Text**を選びます。
5. "Open day"と入力し、**Heading 3**に設定してその下に1行を追加します。

## 通常時のスタイルを設定する

1. 同じ設定ダイアログで**Style**パネルを開きます。
2. ライトグレーの**Background**を選びます。
3. ボックスモデルで**Padding**の上・左・下辺を24に設定します。
4. 設定するのは**Border radius**で、8にします。
5. 設定するのは**Drop shadow**で、1にします。

## ホバー時のスタイルを設定する

1. 開くのは**Hover style**パネルです。
2. 設定するのは**Drop shadow**で、4にします。
3. クリックするのは**Save**です。
4. DXPR Builderツールバーの**Save**をクリックします。
5. ビューメニュー(ツールバーの目のアイコン)を開き、**Preview**を選びます。
6. ポインターをテキストボックスの上に移動します。

## 表示内容

通常時、テキストボックスはグレーで角が丸く、軽いシャドウ付きです。ポインターが届くとシャドウが深まり、ボックスが持ち上がったように見えます。ポインターが離れると元に戻ります。シャドウの変化はアニメーションします。新しい色などの他のホバー変更は即時に切り替わります。

## 設定

ホバー時の見た目は**Hover style**パネルで設定し、**Style**パネルと同じフィールドを持ちます。空のフィールドは通常時の値を保ちます。

| フィールド | ホバー時の用途 |
|---|---|
| **Margin**、**Border**、**Padding**(ボックスモデル) | エレメントを移動・枠付け・拡大します |
| **Font color** | テキストを強調します |
| **Border color** | 枠線を強調します |
| **Background** | 塗りを変更します |
| **Background image**、**Background style**、**Background position** | 画像を差し替え・移動します |
| **Border style** | 枠線を表示します |
| **Font size** | テキストを拡大します |
| **Border radius** | 角を丸めます |
| **Opacity** | エレメントを表示・減光します |
| **Drop shadow** | 奥行きを追加します。1〜5 |

## よくあるパターン

- **Card lift**：**Drop shadow**は**Style**では1に、**Hover style**では4に。
- **Picture reveal**：**Opacity**は**Style**では0.7に、**Hover style**では1に。
- **Button colour change**：濃い**Background**を**Hover style**で。
- **Border highlight**：**Border style** **Solid**、**Style**ではライトな**Border color**、**Hover style**ではアクセントの**Border color**。

## 効果が表示されない場合

- **指してもテキストボックスが変わりません。**ホバー値が通常値と同じか、**Style**パネルに誤って設定しています。**More** > **Settings**を開き、**Hover style**パネルで**Drop shadow**を上げます。
- **編集中は効果を判断しにくいです。**編集モードではエレメントを指すとコントロールバーとアウトラインも表示されます。ビューメニューで**Preview**を選んで再度指します。
- **Opacity、Font size、Border radiusの0は効果がありません。**0の値はこの3フィールドでは未設定扱いです。エレメントをほぼ完全にフェードさせるには**Opacity**に0.01を使います。

## 次のステップ

- [スクロール表示でエレメントに動きを付ける](/hc/documentation/learn-dxpr-builder/design/animation-tab)：ホバーを超えた動きを追加する。
- [カードをスタイルする](/hc/documentation/learn-dxpr-builder/design/card-styles)：ホバーとカードの色・シャドウを組み合わせる。