カードデザインのセレクトボックスを作る方法
カードデザインのセレクトボックスを作る方法を紹介します。通常のセレクトボックスをカード風のデザインで囲むことで、入力エリアを分かりやすく表示できるサンプルです。HTMLとCSSだけで実装しているため、JavaScriptを使用せずにそのまま導入できます。
ラベル・説明文・セレクトボックスを1枚のカード内へまとめて配置することで、入力フォーム全体に統一感を持たせられます。お問い合わせ画面、会員登録画面、ECサイトの商品検索、管理画面の絞り込みフォームなど、入力項目を見やすく整理したい場面で利用できます。カードの色や余白、角丸、影などはCSSを編集するだけで簡単に変更できます。
サンプルコードはHTMLとCSSのみで構成されており、コピーして貼り付けるだけで利用できます。レスポンシブにも対応しているため、パソコンだけでなくスマートフォンやタブレットでもレイアウトが崩れにくく、実際のWebサイトへ導入しやすいセレクトボックスのデザインサンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
セレクトボックス全体をカード風にデザインしたサンプルです。
カード風のデザインで囲まれたセレクトボックスの表示を確認できるデモです。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>カードデザインのセレクトボックス</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- セレクトボックス全体 -->
<div class="card-selectbox_wrap">
<!-- タイトル -->
<div class="card-selectbox_title">
プランを選択
</div>
<!-- 説明文 -->
<p class="card-selectbox_text">
ご希望のプランを選択してください。
</p>
<!-- カードデザインのセレクトボックス -->
<div class="card-selectbox_card">
<label class="card-selectbox_label" for="plan">
プラン
</label>
<select
class="card-selectbox_select"
id="plan">
<option>ベーシック</option>
<option>スタンダード</option>
<option>プレミアム</option>
</select>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSだけで構成されており、2ファイルだけで利用できます。JavaScriptを使用しないため、コピーして配置するだけでカードデザインのセレクトボックスを表示できます。フォーム全体をカード風に装飾し、見出しや説明文を組み合わせたレイアウトを簡単に導入できます。
sample
├── index.html
└── style.css
各ファイルの役割
index.html
カードデザインのセレクトボックスを表示するHTMLです。見出し・説明文・ラベル・セレクトボックスなど、表示内容を編集できます。
style.css
カード全体のデザインや背景色、枠線、角丸、余白、文字サイズ、セレクトボックスの見た目を管理します。
設置方法・使い方
sampleフォルダ内へindex.htmlとstyle.cssを配置します。
index.htmlからstyle.cssを読み込んだ状態で、sample/index.htmlをブラウザで開くとカードデザインのセレクトボックスを確認できます。
カスタマイズできる内容
style.cssではカードの背景色、枠線、角丸、影、余白、文字サイズ、セレクトボックスの色やサイズを変更できます。
index.htmlではタイトル・説明文・ラベル名・option要素を書き換えることで、用途に合わせたフォームへ変更できます。
数値調整
style.css の例です。
max-width:600px;
カード全体の最大幅です。800pxへ変更すると横幅が広くなり、400pxへ変更するとコンパクトになります。
padding:32px;
カード内側の余白です。40pxへ変更すると余白が広くなり、20pxへ変更すると詰まったレイアウトになります。
border-radius:16px;
カードやセレクトボックスの角丸です。24pxへ変更すると丸みが強くなり、0pxにすると角のないデザインになります。
font-size:16px;
セレクトボックス内の文字サイズです。18pxへ変更すると文字が大きくなり、14pxへ変更すると小さく表示されます。
レスポンシブ対応
style.cssではmax-widthやwidth:100%を使用しているため、PC・タブレット・スマートフォンでも画面幅に合わせて自動調整されます。画面が狭い環境でもカードやセレクトボックスが横幅いっぱいに表示され、レイアウトが崩れにくくなっています。
コメント