デザインのスキルアップ法4選|キャリアパスで役立つスキルも紹介
- UI/UXデザイン
- Webデザイン
- フリーランス/個人事業主
CSSの進化やオープンソースコードの提供によって簡単になった、ドロップダウンリストのカスタマイズ。単にデフォルトのドロップダウンリストを使うのではなく、ぜひデザインコンセプトにあったオリジナルのドロップダウンリストを作ってみましょう。
今回は、簡単にセットアップできるドロップダウンリストのコードスニペット10選をご紹介します。
目次 [非表示]
最初にご紹介するのは、さっぱりとして清潔感のあるドロップダウンリスト。スタイルの変更にCSS、メニューのUX設定にJSが使われています。
メニューのサイズや色を変更できるうえ、画面左下にカスタムファイルのアップロード機能が実装されています。
どんなレイアウトにも自然に溶け込む、シンプルなドロップダウンリスト。白黒のみの配色ながら、チープさを感じないデザインが施されています。
JSを使ってメニューをアニメーション化しています。<select>要素を使用しないので、フロントエンドからフォームにデータを取り込めるのが特徴です。
さまざまな色やサイズのドロップダウンリストを試してみたいなら、こちらがおすすめ。3種類の異なるサイズを提供しているだけでなく、色も自由に選択できます。互換性が優れているのも嬉しいポイントです。
ドロップダウンリストに「Example Placeholder」という文字が表示されていることに気づいたでしょうか。
このドロップダウンリスト一番の特徴は、デフォルトの選択項目がない点です。デフォルトで表示されている文字は、項目をひとつ選ぶと自動的に消えるよう設定されています。HTMLの<select>要素で動作するのも特徴です。
デフォルトの選択項目のかわりに任意の文字を設定したいなら、このスニペットを参考にしてみましょう。
人気のフラットデザインを使った、上品な雰囲気のドロップダウンリスト。
ドロップダウン部分のデザインは変更されていませんが、テンプレートを活用して独自のフラットスタイルを適用することも可能です。自分好みにカスタマイズしてみましょう。
ドロップダウンリストだけでなく、ラジオボタンやチェックボックスも提供している『Pure CSS』。すべてのコードスニペットは、CSSのみで作られています。
どんなタイプのレイアウトにも溶け込むシンプルなデザインが施されるだけでなく、主要ブラウザに対応した互換性も特徴です。
JSとカスタムCSSを使ったドロップダウンリスト。Graceful Degradation(グレースフル・デグラデーション)という概念にのっとって、JSが無効になっても動作するようサポートされています。
レトロな雰囲気のデザインではありますが、CSSを使ってすこしカスタマイズすれば自分好みに変身させられるはずです。
多くの場合、ドロップダウンリストには矢印が使われますが、『SVG Icon Menu』を使えば矢印ではなく他のアイコンにも変更できます。
このスニペットにはプラスアイコンが使われており、クリックしてメニューを展開すると、Xのアイコンに変化します。
一方、<div>内のリスト項目の集合体なので、値が選択されるたびに非表示の入力フィールドをターゲットにする必要があります。そのため、残念ながらネイティブHTMLの<select>要素では動作しません。
ですがプロセス自体はとても単純なので、簡単に実装できます。
こちらは実験的なスニペット。
クリックしてメニューを開くと、メニューを再度クリックしないかぎり非表示になりません。一般的なドロップダウンリストは画面上のどこかをクリックすると非表示になるため、好みが分かれそうなポイントです。
シンプルなアニメーションと、さっぱりしたデザインがうまくマッチしています。
最後にご紹介するのは、洗練されたデザインが印象的な、CSSのみで作られたドロップダウンリストです。
背景にCSSグラデーションを使用しており、ドロップダウンメニューをグラデーションの下の色にブレンドしています。
JSプラグインが使われておらず、カスタマイズの余地が大きいため、テンプレートとして使うのに最適です。
今回は、ドロップダウンリストを作ったことがなくても簡単にカスタマイズできる、シンプルなドロップダウンリストを中心にご紹介しました。
まずは今回ご紹介したスニペットを参考にしながら、個性を反映したドロップダウンリストを作ってみてください。
(執筆:Jake Rocheleau 翻訳:Nakajima Asuka 編集:Saito Hayato 提供元:speckyboy)
CodePenとは?使い方/埋め込み方法/ライセンス表記を画像付きで解説
Workship MAGAZINE