AI向け説明 AI Description

`F-001` はフォーカス時にプレースホルダーテキストがラベルとして上部に移動する入力フィールドです。`:focus` と `:not(:placeholder-shown)` の CSS 疑似クラスを使用し、JavaScript 不要で実装できます。`placeholder=" "`（空白スペース）が必須です。

`F-001` is a text input where the placeholder text floats up as a label on focus. It uses CSS pseudo-classes `:focus` and `:not(:placeholder-shown)` — no JavaScript required. The `placeholder=" "` (single space) is essential for the CSS to work.

調整可能パラメータ Adjustable Parameters

• border-color (focus) — フォーカス時のボーダー色Border color on focus
• transition timing — ラベル移動のアニメーション速度Label animation speed
• font-size (label) — 浮いたラベルのフォントサイズFloated label font size

実装 Implementation

HTML + CSS

<div class="float-group">
  <input type="text" id="name" placeholder=" " />
  <label for="name">Full Name</label>
</div>

<style>
.float-group {
  position: relative;
  margin-bottom: 24px;
}
.float-group input {
  width: 100%;
  padding: 18px 16px 6px;
  font-size: 16px;
  border: 2px solid #e0e4f0;
  border-radius: 12px;
  outline: none;
  transition: border-color var(--transition-speed, 0.3s) ease;
}
.float-group input:focus {
  border-color: var(--focus-color, #5c6ac4);
}
.float-group label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--label-color, #999);
  pointer-events: none;
  transition: all var(--transition-speed, 0.25s) cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
  padding: 0 4px;
}
.float-group input:focus ~ label,
.float-group input:not(:placeholder-shown) ~ label {
  top: 0;
  font-size: 12px;
  color: var(--focus-color, #5c6ac4);
  font-weight: 600;
}
</style>

React (JSX + CSS)

// react/F-001.jsx
import './F-001.css';

export default function FloatingLabelInput({ label, type = 'text', id }) {
  return (
    <div className="float-group">
      <input type={type} id={id} placeholder=" " />
      <label htmlFor={id}>{label}</label>
    </div>
  );
}