MENU

フォーム

Figma
  1. ホーム
  2. Figma
  3. フォーム
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

select-wrap：擬似要素と pointer-events: none によるカスタム矢印の実装

ポイント: ブラウザ標準のセレクトボックスの矢印を消去し、::after 擬似要素を用いてカンプ通りのオリジナル矢印を配置しています。

.select-wrap {
  position: relative;
  width: 280px;
}

.select-wrap::after {
  content: "";
  display: inline-block;
  background-image: url("../img/icon-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none; /* 💡 矢印の上をクリックしてもセレクトボックスを反応させる */
}

解説: <select> タグのデフォルトの矢印はブラウザごとに見た目が異なり、デザインカンプの再現を妨げます。そこで reset.css で appearance: none を適用して標準の矢印を消し、親要素（.select-wrap）を起点にした絶対配置（position: absolute）で自前のSVG矢印を重ねています。ここで最も重要なのが pointer-events: none; です。これを記述しないと、ユーザーが右端の矢印画像の上をクリックした際に画像がクリックを邪魔してしまい、選択肢のドロップダウンが開かなくなってしまいます。デザインの再現性と操作性を両立させるための必須テクニックです。

radio / checkbox：隣接兄弟結合子（+）を用いたカスタム入力要素の構築

ポイント: 標準の無機質なラジオボタンやチェックボックスを非表示にし、隣接する <label> の擬似要素を巧みに操作して、リッチな選択UIを自作しています。

/* ラジオボタンがチェックされた時、その直後にある.radio-textの文字色を変える */
.radio:checked + .radio-text {
  color: var(--color-nord10);
}

/* ラジオボタンがチェックされた時、その直後にある.radio-textの::before（外円）を塗りつぶす */
.radio:checked + .radio-text::before {
  background-color: var(--color-nord10);
}

解説: ラジオボタン（<input type="radio">）自体はCSSで細かくデザインを変更することが難しいため、標準の丸ポチは reset.css の appearance: none などで消去、または見えないように制御します。代わりに、直後に配置した .radio-text::before で外側の円を表現し、クリックされて :checked（有効化）状態になった瞬間に、隣接兄弟結合子（+） を使って直後のスタイルを動的に書き換えています。HTMLの構造（順番）を正確に利用し、JavaScriptを使わずにCSSだけで選択状態のアニメーションや見た目の切り替えを完結させる、非常に洗練された設計パターンです。

text / textarea：box-shadow を活用した2重ボーダー（フォーカスリング）の表現

ポイント: 入力エリアにフォーカス（選択）が当たった際、アウトライン（外枠）に太めの光彩をまとうような美しいフォーカス状態を表現しています。

.text:focus {
  /* 内側の1pxボーダーと、外側の4pxの薄いブルーのリングを同時に表現 */
  box-shadow: 
    0 0 0 1px var(--color-nord10) inset, 
    0 0 0 4px var(--color-nord4);
}

解説: 通常の border プロパティでは、1つの要素に対して1本の線しか引くことができません。しかし、box-shadow はカンマ（,）で区切ることで、複数の影を何重にも重ねて配置できるという特性を持っています。ここでは、内側に向かう影（inset）で「アクティブ時のクッキリした1pxの枠線」を描き、同時に外側へ広がる影で「視認性を高める4pxのソフトなリング」を描いています。これにより、キーボード操作やタップで今どこを入力しているかが直感的に伝わる、アクセシビリティに配慮した高品質なフォームUIを構築しています。

Figma
目次