初心者でも簡単実装!ドロップダウンリストのコードスニペット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

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

平均時給2,900円。高単価なお仕事をしませんか?

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)が、そんな悩みを解決します!

  • 28,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 平均時給2,900円の高単価案件のみ掲載
  • お仕事成約でお祝い金1万円プレゼント

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ