初心者でも簡単実装！ドロップダウンリストのコードスニペット10選【CSS/JavaScript】

CSSの進化やオープンソースコードの提供によって簡単になった、ドロップダウンリストのカスタマイズ。単にデフォルトのドロップダウンリストを使うのではなく、ぜひデザインコンセプトにあったオリジナルのドロップダウンリストを作ってみましょう。

今回は、簡単にセットアップできるドロップダウンリストのコードスニペット10選をご紹介します。

1. Custom Select Menu

See the Pen Custom Select Menu by Wallace Erick (@wallaceerick) on CodePen.light

最初にご紹介するのは、さっぱりとして清潔感のあるドロップダウンリスト。スタイルの変更にCSS、メニューのUX設定にJSが使われています。

メニューのサイズや色を変更できるうえ、画面左下にカスタムファイルのアップロード機能が実装されています。

Custom Select Menu

2. Simple Select

See the Pen Dropdown Menu by Mostafa (@General-Dev) on CodePen.light

どんなレイアウトにも自然に溶け込む、シンプルなドロップダウンリスト。白黒のみの配色ながら、チープさを感じないデザインが施されています。

JSを使ってメニューをアニメーション化しています。<select>要素を使用しないので、フロントエンドからフォームにデータを取り込めるのが特徴です。

Simple Select

3. Non-Sucky HTML Dropdowns

See the Pen Custom dropdown by Silver Drop (@silverdrop) on CodePen.light

さまざまな色やサイズのドロップダウンリストを試してみたいなら、こちらがおすすめ。3種類の異なるサイズを提供しているだけでなく、色も自由に選択できます。互換性が優れているのも嬉しいポイントです。

Non-Sucky HTML Dropdowns

4. Placeholder Select

See the Pen Select Box with Placeholder [CSS Only] by James Nowland (@jnowland) on CodePen.light

ドロップダウンリストに「Example Placeholder」という文字が表示されていることに気づいたでしょうか。

このドロップダウンリスト一番の特徴は、デフォルトの選択項目がない点です。デフォルトで表示されている文字は、項目をひとつ選ぶと自動的に消えるよう設定されています。HTMLの<select>要素で動作するのも特徴です。

デフォルトの選択項目のかわりに任意の文字を設定したいなら、このスニペットを参考にしてみましょう。

Placeholder Select

5. Falt Design

See the Pen Flat selectbox by Peter Geller (@PeterGeller) on CodePen.light

人気のフラットデザインを使った、上品な雰囲気のドロップダウンリスト。

ドロップダウン部分のデザインは変更されていませんが、テンプレートを活用して独自のフラットスタイルを適用することも可能です。自分好みにカスタマイズしてみましょう。

Flat Design

6. Pure CSS

See the Pen Accessible checkboxes and radio buttons by Michelle (@michmy) on CodePen.light

ドロップダウンリストだけでなく、ラジオボタンやチェックボックスも提供している『Pure CSS』。すべてのコードスニペットは、CSSのみで作られています。

どんなタイプのレイアウトにも溶け込むシンプルなデザインが施されるだけでなく、主要ブラウザに対応した互換性も特徴です。

Pure CSS

7. Styled Accessible Dropdowns

See the Pen styled drop down with nojs support by Andy Fitzsimon (@andyfitz) on CodePen.light

JSとカスタムCSSを使ったドロップダウンリスト。Graceful Degradation（グレースフル・デグラデーション）という概念にのっとって、JSが無効になっても動作するようサポートされています。

レトロな雰囲気のデザインではありますが、CSSを使ってすこしカスタマイズすれば自分好みに変身させられるはずです。

Styled Accessible Dropdowns

8. SVG Icon Menu

See the Pen SVG Icon Menu by Carrie Wiley (@CarrieWiley) on CodePen.light

多くの場合、ドロップダウンリストには矢印が使われますが、『SVG Icon Menu』を使えば矢印ではなく他のアイコンにも変更できます。

このスニペットにはプラスアイコンが使われており、クリックしてメニューを展開すると、Xのアイコンに変化します。

一方、<div>内のリスト項目の集合体なので、値が選択されるたびに非表示の入力フィールドをターゲットにする必要があります。そのため、残念ながらネイティブHTMLの<select>要素では動作しません。

ですがプロセス自体はとても単純なので、簡単に実装できます。

SVG Icon Menu

9. Select Box Experiment

See the Pen Select Box Experiment by Maneesh (@maneeshc) on CodePen.light

こちらは実験的なスニペット。

クリックしてメニューを開くと、メニューを再度クリックしないかぎり非表示になりません。一般的なドロップダウンリストは画面上のどこかをクリックすると非表示になるため、好みが分かれそうなポイントです。

シンプルなアニメーションと、さっぱりしたデザインがうまくマッチしています。

Select Box Experiment

10. Dark & Light Selects

See the Pen Dark and Light Dropdown Lists by Thibaut (@Thibaut) on CodePen.light

最後にご紹介するのは、洗練されたデザインが印象的な、CSSのみで作られたドロップダウンリストです。

背景にCSSグラデーションを使用しており、ドロップダウンメニューをグラデーションの下の色にブレンドしています。

JSプラグインが使われておらず、カスタマイズの余地が大きいため、テンプレートとして使うのに最適です。

Dark & Light Selects

おわりに

今回は、ドロップダウンリストを作ったことがなくても簡単にカスタマイズできる、シンプルなドロップダウンリストを中心にご紹介しました。

まずは今回ご紹介したスニペットを参考にしながら、個性を反映したドロップダウンリストを作ってみてください。

（執筆：Jake Rocheleau　翻訳：Nakajima Asuka　編集：Saito Hayato　提供元：speckyboy）