一本の線がユーザーに寄り添う話

こんにちは。コーダーのぶんちゃんです。

今日のGoodNewsは、フォームなどによく使うselectタグのお話。

selectで区切り線を付けられるように！

selectで区切り線を付けられるようになったって知ってました？

どういうことかというと、従来はこちら。

メインとスープと飲み物が羅列してずらっと並んでいます。

もちろんこれでもよいのですが、ここに区切り線が入ったらもっと見やすいと思いませんか。

区切り線が入ったことによってそれぞれのグループが明確になりました。

実装方法

実装はカンタン、通常のselectタグの中の区切り線を入れたい箇所に<hr>を入れればいいだけです！

<select>
  <option>テスト</option>
  <hr>
  <option>テスト</option>
  <option>テスト</option>
  <option>テスト</option>
  <hr>
  <option>テスト</option>
  <option>テスト</option>
</select>

具体的には何に使うの？

例えば、選択肢が多い時。
美容クリニックのメニュー名や、企業のサービス内容が選択肢の場合、

タイトルも長かったり文字列が続いて、ユーザーには見づらくなってしまうかもしれません。

区切り線である程度分類ごとに分けてあげるだけで、見やすくなります。
区切り線のありがたみが沁みますね。

デザインの配慮は細部まで。ちょっとしたところで配慮が感じられるデザインって、素敵だと思いませんか。

ちょっと見づらいかも？という時は区切り線使ってみてください。

それでは、よいWeb制作を！