フォームデザインをレベルアップ！正しいラジオボタンとチェックボックスの使い方 | アドビUX道場 #UXDojo
フォームデザインをレベルアップ！正しいラジオボタンとチェックボックスの使い方 | アドビUX道場 #UXDojo 連載 エクスペリエンスデザインの基礎知識 フォームをデザインするとき、オプション選択のためのUI要素を選ぶ場面があるでしょう。その際の候補は、チェックボックス、トグルボタン、ラジオボタン、ドロップダウンなどさまざまありますが、この記事では、ラジオボタンとチェックボックスを取り上げます。この2つはとても単純であるにも関わらず、インタラクションデザインの観点から誤った使われ方をすることが少なくありません。 ラジオボタンとチェックボックスの基本動作 ラジオボタンは昔のラジオに使われていた、局を切り替えるためのボタンから名付けられました。あるボタンを押すと他の押されていたボタンが元の位置に飛び出します。そのため、常に一つのボタンだけが”押された状態”になります。 ラジオボタンのUI要素
CSSでラジオボタンとチェックボックスにスタイルを当てる - Qiita
label には :before と :after 擬似要素を使い、グレーの角丸とアイコンを表現しています。 ラジオボタンは角丸で円を、チェックボックスは二辺のみborderを付けた要素を45度回転させています。 モダンブラウザ IE9+ android4.0系標準ブラウザ iOS7 Safari コード <form action=""> <section> <h2>radio</h2> <input type="radio" name="hoge" value="高坂さん" checked id="radio01" /> <label for="radio01" class="radio">高坂さん</label> <input type="radio" name="hoge" value="南さん" id="radio02" /> <label for="radio02" class=
CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた | カルアカはWebが無料で学べる
こんにちは、リードスペースです。 ラジオボタンやチェックボックスってブラウザー依存のデフォルトデザインだと少し味気ないですよね？ 今回は、CSSでラジオボタンやチェックボックスをオリジナルデザインでカスタマイズする方法について根掘り葉掘り説明します。 ズバリ、labelタグを使う ラジオボタンやチェックボックスなどに使用するinputタグはcssで装飾できないという難点があります。 そこでラジオボタンやチェックボックスを装飾するのに役立つのが「label」タグです。 「label」とは、チェックボックス、ラジオボタンなどの構成部品とその項目名を関連付けるためのタグです。 関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。 指定方法その1・フォームパーツのidとlabelタグのforの値を同じにする 下記のようにidとf
【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ | バシャログ。
こんにちは、GWは神奈川県から一歩も出ませんでした ishida です。 さてさて、今回は最近スマートフォン案件が増えてきましたので実務で使えそうなコーディングTipsをば。 スマートフォンでは、radioボタンがデフォルトのままだとかなり押しにくいですよね。 対象がスマートフォンであれば（IEちゃんを除けばOKかも）CSSだけで、意外とカスタマイズができます。 HTML HTMLのコードは以下になります。 <ul class="list"> <li><input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男性</label></li> <li><input type="radio" name="gender" id="gender2" value="2"><label for="gende
スマートフォンでは、ラジオボタンよりセレクトボックスを使いたい２つの理由 | UI改善ブログ by f-tra
複数の選択肢から１つを選ばせるフォームの単一選択のコンポーネントには、ラジオボタンとセレクトボタン（プルダウンメニュー）の２種類が存在します。 それぞれにメリット・デメリットがあり、通常選択肢の数に応じて使いわけることが一般的ですが、スマートフォンにおいてはまた状況が異なってきます。 本日の記事では、スマートフォンにおける単一選択フォームコンポーネントのユーザビリティについて考えます。 PCの場合の一般的な使い分け 選択肢の展開、選択、と合計2回のクリックが必要なセレクトボックスに対し、ラジオボタンは選択肢をクリックするのみと手間が少ない一方、 あらかじめ展開しておく必要上、画面領域を大きく要するために、選択肢が多い場合にはフォームを長く、複雑に見せてしまうというデメリットがあります。 ※セレクトボックスとラジオボタンの比較 メリット デメリット 向いている設問
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
