X
  1. TOP
  2. 一本の線がユーザーに寄り添う話
2024.06.18

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

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

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

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

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

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

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

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

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

実装方法

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

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

具体的には何に使うの？

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

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

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

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

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

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

この記事をシェアする

<

ロゴもレスポンシブする時代

色違いは必要ない！アイコンはcssで色を変えよう！

>

関連記事

おすすめ記事

RECOMMEND

CATEGORY

TAG

CATEGORY

TAG

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

© 2020 spiqa design

×