【漫画】フリーランスは“103万円の壁”にどう向き合うか?
- お金
- フリーランス/個人事業主
- 漫画
CSSの進化やオープンソースコードの提供によって簡単になった、ドロップダウンリストのカスタマイズ。単にデフォルトのドロップダウンリストを使うのではなく、ぜひデザインコンセプトにあったオリジナルのドロップダウンリストを作ってみましょう。
今回は、簡単にセットアップできるドロップダウンリストのコードスニペット10選をご紹介します。
目次
See the Pen Custom Select Menu by Wallace Erick (@wallaceerick) on CodePen.
最初にご紹介するのは、さっぱりとして清潔感のあるドロップダウンリスト。スタイルの変更にCSS、メニューのUX設定にJSが使われています。
メニューのサイズや色を変更できるうえ、画面左下にカスタムファイルのアップロード機能が実装されています。
See the Pen Dropdown Menu by Mostafa (@General-Dev) on CodePen.
どんなレイアウトにも自然に溶け込む、シンプルなドロップダウンリスト。白黒のみの配色ながら、チープさを感じないデザインが施されています。
JSを使ってメニューをアニメーション化しています。<select>要素を使用しないので、フロントエンドからフォームにデータを取り込めるのが特徴です。
See the Pen Custom dropdown by Silver Drop (@silverdrop) on CodePen.
さまざまな色やサイズのドロップダウンリストを試してみたいなら、こちらがおすすめ。3種類の異なるサイズを提供しているだけでなく、色も自由に選択できます。互換性が優れているのも嬉しいポイントです。
See the Pen Select Box with Placeholder [CSS Only] by James Nowland (@jnowland) on CodePen.
ドロップダウンリストに「Example Placeholder」という文字が表示されていることに気づいたでしょうか。
このドロップダウンリスト一番の特徴は、デフォルトの選択項目がない点です。デフォルトで表示されている文字は、項目をひとつ選ぶと自動的に消えるよう設定されています。HTMLの<select>要素で動作するのも特徴です。
デフォルトの選択項目のかわりに任意の文字を設定したいなら、このスニペットを参考にしてみましょう。
See the Pen Flat selectbox by Peter Geller (@PeterGeller) on CodePen.
人気のフラットデザインを使った、上品な雰囲気のドロップダウンリスト。
ドロップダウン部分のデザインは変更されていませんが、テンプレートを活用して独自のフラットスタイルを適用することも可能です。自分好みにカスタマイズしてみましょう。
See the Pen Accessible checkboxes and radio buttons by Michelle (@michmy) on CodePen.
ドロップダウンリストだけでなく、ラジオボタンやチェックボックスも提供している『Pure CSS』。すべてのコードスニペットは、CSSのみで作られています。
どんなタイプのレイアウトにも溶け込むシンプルなデザインが施されるだけでなく、主要ブラウザに対応した互換性も特徴です。
See the Pen styled drop down with nojs support by Andy Fitzsimon (@andyfitz) on CodePen.
JSとカスタムCSSを使ったドロップダウンリスト。Graceful Degradation(グレースフル・デグラデーション)という概念にのっとって、JSが無効になっても動作するようサポートされています。
レトロな雰囲気のデザインではありますが、CSSを使ってすこしカスタマイズすれば自分好みに変身させられるはずです。
See the Pen SVG Icon Menu by Carrie Wiley (@CarrieWiley) on CodePen.
多くの場合、ドロップダウンリストには矢印が使われますが、『SVG Icon Menu』を使えば矢印ではなく他のアイコンにも変更できます。
このスニペットにはプラスアイコンが使われており、クリックしてメニューを展開すると、Xのアイコンに変化します。
一方、<div>内のリスト項目の集合体なので、値が選択されるたびに非表示の入力フィールドをターゲットにする必要があります。そのため、残念ながらネイティブHTMLの<select>要素では動作しません。
ですがプロセス自体はとても単純なので、簡単に実装できます。
See the Pen Select Box Experiment by Maneesh (@maneeshc) on CodePen.
こちらは実験的なスニペット。
クリックしてメニューを開くと、メニューを再度クリックしないかぎり非表示になりません。一般的なドロップダウンリストは画面上のどこかをクリックすると非表示になるため、好みが分かれそうなポイントです。
シンプルなアニメーションと、さっぱりしたデザインがうまくマッチしています。
See the Pen Dark and Light Dropdown Lists by Thibaut (@Thibaut) on CodePen.
最後にご紹介するのは、洗練されたデザインが印象的な、CSSのみで作られたドロップダウンリストです。
背景にCSSグラデーションを使用しており、ドロップダウンメニューをグラデーションの下の色にブレンドしています。
JSプラグインが使われておらず、カスタマイズの余地が大きいため、テンプレートとして使うのに最適です。
今回は、ドロップダウンリストを作ったことがなくても簡単にカスタマイズできる、シンプルなドロップダウンリストを中心にご紹介しました。
まずは今回ご紹介したスニペットを参考にしながら、個性を反映したドロップダウンリストを作ってみてください。
(執筆:Jake Rocheleau 翻訳:Nakajima Asuka 編集:Saito Hayato 提供元:speckyboy)
CodePenとは?使い方/埋め込み方法/ライセンス表記を画像付きで解説
Workship MAGAZINE