MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
コピペ実装!CSSだけでフォームのUI改善**サンプルコード7選

コピペ実装!CSSだけでフォームのUI改善**サンプルコード7選

公開日:2021年04月22日
最終更新日:2021年04月22日
オンスタ運営
テクノロジー
マークアップ
デザイン
ホーム > 全記事一覧 > 制作 > エンジニア > プログラミング > コピペ実装!CSSだけでフォームのUI改善**サンプルコード7選
このエントリーをはてなブックマークに追加
コピペ実装!CSSだけでフォームのUI改善**サンプルコード7選
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Webエンジニアのざきやまです!

ボタンCSS特集もそろそろネタがつきてまいりましたので..笑
本日はCSSのコピペだけで実装できるフォームのUI改善について紹介したいと思います!

Webサイトのコンバージョンとなることが多いフォームですが、見た目や配置、補助機能ひとつで入力完了率が大きく変わるところなので是非取り入れてみてくださいね(^^)/

各フォームのUIを変える

デフォルトのフォームパーツはブラウザによってデザインが変わってしまう為、デザインの統一感が失われたり使いづらかったりしてしまいます。
こちらのサンプルコードを使用するとグッとデザインが洗練されたものになり、ブラウザ間での見た目も統一されますよ!

◉ テキストボックス

こちらは特に変わったことはしていませんが、::placeholder を使って、プレイスホルダーの色を変更することが可能です!
デフォルトではフォーカス時に青い枠線が出てしまうので、outline: noneで消しています。

 

◉ ラジオボタン

デフォルトだとチェック時の色は青色で、サイトによっては合わないこともあるでしょう。
こちらは枠線の色や大きさ、チェック時の色を自由に変更することができます。

 

◉ チェックボックス

こちらもラジオボタンと同様、枠線やチェック時の色を変更することができます。
大きさや::before、::afterをカスタマイズすればデザイン性の高いものも実現可能です♪

 

◉ セレクトボックス

ブラウザによってデザインが大きく変わってしまうセレクトボックス !
矢印はもちろんブラウザによっては立体的な表示になってしまう為、デザイン性を大きく損ねてしまいます。矢印の部分は画像になっているので自由なデザインに変更可能です。

 

入力段階の可視化

◉ 入力ステップナビ

自分が入力しているフォームがどこまで続くのか分からない状態はユーザーに大きなストレスを与えてしまいます。「入力ステップナビ」を設けて、自分が今どの段階にいるかを可視化して安心感の向上をはかりましょう。

さいごに

最後まで見ていただき、ありがとうございました!
フォームのデザイン変更はブラウザ対応などなかなか厄介ですが、是非こちらを使って洗練されたフォームを作成してみてください!それでは!


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
制作者への影響を探る!Gutenberg (グーテンベルグ) – WordPress 5.0 搭載予定の新エディタ
テクノロジー
プログラミング
公開日: 2017年11月29日
最終更新日: 2017年11月29日
制作者への影響を探る!Gutenberg (グーテンベルグ) – WordPress 5.0 搭載予定の新エディタ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
テクノロジー
プログラミング
公開日: 2017年12月06日
最終更新日: 2017年12月06日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webサイトで取り入れたい!効果的な「写真」の使い方
デザイン
Webデザイン
公開日: 2017年12月15日
最終更新日: 2017年12月15日
Webサイトで取り入れたい!効果的な「写真」の使い方
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
なんか物足りない…デザインにひと工夫!簡単テクニック10選
デザイン
Webデザイン
公開日: 2019年01月25日
最終更新日: 2022年01月17日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーに資格は必要なの・・・!?【デザイナーが取れる資格まとめ】
デザイン
公開日: 2018年03月30日
最終更新日: 2018年03月30日
デザイナーに資格は必要なの・・・!?【デザイナーが取れる資格まとめ】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーが成長するには(デザイナーがキャリアアップするための道のり-其の2)
デザイナー
デザイン
公開日: 2017年01月16日
最終更新日: 2022年01月17日
デザイナーが成長するには(デザイナーがキャリアアップするための道のり-其の2)
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2018年12月28日
最終更新日: 2022年01月17日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webサイトのちょっとしたテスト用ツールを作った
テクノロジー
プログラミング
公開日: 2017年02月21日
最終更新日: 2017年02月21日
Webサイトのちょっとしたテスト用ツールを作った
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
新年早々スマホコーディングの「html/css」についてもう一度おさらいしてみる。
マークアップ
公開日: 2017年01月18日
最終更新日: 2017年01月18日
新年早々スマホコーディングの「html/css」についてもう一度おさらいしてみる。
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ホームページを「おしゃれ」に!エフェクトを導入する方法<ホームページ制作初心者向け>
テクノロジー
ホームぺージ更新
設計
マークアップ
Webデザイン
公開日: 2018年02月16日
最終更新日: 2018年02月16日
ホームページを「おしゃれ」に!エフェクトを導入する方法<ホームページ制作初心者向け>
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。