Component Gallery

Recipe

電話番号入力をHTML/CSSで実装する

電話番号入力（Phone Number Input）をHTML/CSSで実装するための基本構成です。

実装時の注意点

  • ・意味のあるHTML構造を先に決める。
  • ・通常、フォーカス、無効、エラー、読み込み状態を確認する。
  • ・モバイル幅で文字や操作対象が崩れないようにする。

実装例

電話番号入力をHTML/CSSで実装する

電話番号入力（Phone Number Input）をHTML/CSSで実装するための基本構成です。

<div class="rounded border p-4">電話番号入力</div>

AI実装プロンプト

AI実装プロンプト

電話番号入力（Phone Number Input）をHTML/CSSで実装してください。アクセシビリティ、状態、モバイル表示、実装上の注意点も含めてください。

関連ページ

電話番号入力の詳細電話番号入力（Phone Number Input）は、日本の電話番号形式（市外局番・市内局番・加入者番号）に対応した複合入力コンポーネント。ハイフン自動挿入・携帯/固定電話の形式切り替えに対応する。電話番号入力の比較主要デザインシステムの見方を比較します。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

電話番号入力をHTML/CSSで実装するを使う前に確認することは？

画面上の役割、必要な状態、入力やエラーの有無、キーボード操作、モバイル表示を先に確認します。

html-css実装で依存ライブラリは必要ですか？

このレシピは追加依存なしで考え方を確認できる構成です。

AIにこのレシピを渡すときの注意点は？

そのまま生成させるだけでなく、プロダクトのデザインシステム、命名規則、アクセシビリティ要件を追記します。