フローティングラベルとは何ですか？使い方

フローティングラベルは、ユーザーインターフェースデザインの一部であり、フォーム要素のラベルを特定の方法で表示する方法です。通常のラベルは入力フィールドの上に静的に配置されますが、フローティングラベルは入力フィールド内に表示され、ユーザーが入力すると上に浮かび上がるようになります。これにより、ユーザーが入力フィールドにフォーカスを当てた際に、どのフィールドに入力する必要があるのかを明確に示すことができます。

フローティングラベルの実装方法は、Web開発において非常に一般的です。以下に、HTML、CSS、JavaScriptを使用したフローティングラベルの実装例を示します。

HTML:

<div class="form-group">
  <input type="text" id="inputField" required>
  <label for="inputField">名前</label>
</div>

CSS:

.form-group {
  position: relative;
}
label {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: 0.2s ease all;
}
input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  top: -20px;
  font-size: 12px;
  color: #555;
}

JavaScript:

const inputField = document.getElementById("inputField");
inputField.addEventListener("focus", () => {
  inputField.parentNode.classList.add("active");
});
inputField.addEventListener("blur", () => {
  if (inputField.value === "") {
    inputField.parentNode.classList.remove("active");
  }
});

上記のコード例では、form-groupクラスに対して相対的な位置指定を行い、label要素を絶対位置に配置しています。さらに、input要素がフォーカスを受けた際や値が入力された際に、label要素のスタイルを変更するためのイベントリスナーを追加しています。

これらのコードを使用することで、フローティングラベルを実装することができます。この方法を使うことで、ユーザーがフォームの入力項目をより直感的に理解しやすくなります。

この記事ではフローティングラベルの基本的な使い方とコード例を紹介しました。ぜひこれを参考にして、ユーザーフレンドリーなインターフェースを実現してください。