その他

2023.12.26

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

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

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

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

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

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

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

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

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

実装方法

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

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

具体的には何に使うの?

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

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

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

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

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

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

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2021.02.14

    【勝手にWEBサイトレビュー #10】スクロールが楽しくなる!レンタカー提供・ ドライバーサポートサービスサイト

    その他

  • 2021.04.11

    【勝手にWEBサイトレビュー#26】細かな工夫・こだわりがすごい!フランスのインタラクティブデザイナーのポートフォ……

    その他

  • 2022.11.22

    【簡単】CSS でスクロールを促すラインアニメーションを作る方法

    その他

TAG

×