ライブデモLive Demo

右下に浮かぶボタン。ホバーで少し拡大し、クリックでアクションを実行します。

Button floats at bottom-right. Slight scale on hover, click for action.

コンテンツエリア。右下に FAB があります。

Content area. FAB is at bottom-right.

56px

AI向け説明AI Description

N-007 は position: absolute（実運用では fixed）で右下に配置した円形ボタン。ホバーで scale(1.05)、active で scale(0.98)。アイコンは + や鉛筆など。Material Design の FAB と同系統。

N-007 is a circular button positioned bottom-right with absolute (or fixed). Hover scale(1.05), active scale(0.98). Icon can be + or edit. Same family as Material FAB.

調整可能パラメータParameters

実装Implementation

HTML + CSS

<button type="button" class="fab" aria-label="Add">+</button>

.fab {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #5c6ac4;
  color: #fff;
  box-shadow: 0 4px 12px rgba(92,106,196,0.4);
  transition: transform 0.2s ease;
}
.fab:hover { transform: scale(1.05); }

React (JSX + CSS)

// react/N-007.jsx
import "./N-007.css";

export default function Fab({ label = "Add", children = "+", onClick, ...props }) {
  return (
    <button
      type="button"
      className="fab"
      aria-label={label}
      onClick={onClick}
      {...props}
    >
      {children}
    </button>
  );
}
/* react/N-007.css */
:root {
  --fab-size: 56px;
  --fab-bg: #5c6ac4;
  --fab-color: #fff;
  --fab-shadow: 0 4px 12px rgba(92, 106, 196, 0.4);
}

.fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  background: var(--fab-bg);
  color: var(--fab-color);
  border: none;
  box-shadow: var(--fab-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(92, 106, 196, 0.5);
}

.fab:active { transform: scale(0.98); }

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.