N-007 Navigation simple

How to create a floating action button フローティングアクションボタンの作り方

Floating action button at corner. Scale on hover. 画面隅に浮かぶアクションボタン。ホバーで拡大。

FAB floating button navigation

ライブデモ Live Demo

56px

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Floating action button at corner. Scale on hover.

画面隅に浮かぶアクションボタン。ホバーで拡大。

どこで使うかWhere to use

website header, dashboard sidebar, mobile menu, admin panel

モバイルアプリUI、ダッシュボード、コンテンツ作成アクション、クイックアクセスメニュー

特徴Key features

Material Design-style Floating Action Button (FAB) with expand-to-menu animation. Speed dial sub-actions appear on click. CSS transform and stagger delays for smooth fan-out. Accessible with aria-expanded and focus management.

メニューへの展開アニメーション付きMaterial DesignスタイルのFloating Action Button (FAB)。クリック時にスピードダイアルのサブアクションが表示。スムーズなファンアウトのためのCSSトランスフォームとスタッガー遅延。aria-expandedとフォーカス管理でアクセシブル。

調整可能パラメータ Adjustable Parameters

Parameter Default Description

実装コード Implementation Code 

/* 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); }
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>
  );
}
: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); }

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

The main FAB button toggles aria-expanded and a CSS class. Sub-action buttons are initially hidden (opacity: 0, scale: 0) and stagger into view using incrementally delayed CSS transitions when the class is applied. Clicking outside closes the menu via a global click listener.

メインFABボタンがaria-expandedとCSSクラスをトグル。サブアクションボタンは初期状態で非表示（opacity:0、scale:0）で、クラス適用時に段階的に遅延したCSSトランジションを使って表示。外側クリックでグローバルクリックリスナーがメニューを閉じる。

カスタマイズ方法Customization

Change the fan-out direction by adjusting translateY values (fan up, fan right, etc.). Swap icons using CSS content or SVG swap on open/close. Add a tooltip label next to each sub-action button for discoverability.

translateY値を調整してファンアウト方向を変更（上方向、右方向など）。オープン/クローズ時にCSS contentまたはSVG交換でアイコンを変更。各サブアクションボタンの横にツールチップラベルを追加して発見しやすくする。

注意点Caveats

FABs are a mobile-first pattern — consider showing them only below a breakpoint on desktop. Ensure sub-action buttons are reachable by keyboard (Tab) when expanded and trapped within the component until Escape closes it.

FABはモバイルファーストのパターンです — デスクトップではブレークポイント以下でのみ表示することを検討してください。展開時にサブアクションボタンがキーボード（Tab）で到達可能で、Escapeで閉じるまでコンポーネント内にフォーカスがトラップされることを確認してください。

よくある質問 Frequently Asked Questions

How to customize the floating action button? Floating Action Buttonをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the floating action button in React? ReactでFloating Action Buttonを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of floating action button? Floating Action Buttonのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

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

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.