最初から項目が選択されたチェックボックスを作る方法
最初から項目が選択されたチェックボックスを作る方法を紹介します。このサンプルでは、HTMLのchecked属性を使用して、ページを開いた時点で任意のチェックボックスへチェックが入った状態を実現します。利用者は初期状態を確認したうえで、そのまま送信したり、不要な項目だけチェックを外したりできるため、よく使われる設定や推奨項目をあらかじめ選択しておきたい場面に適しています。
会員登録時の利用規約への同意、管理画面の通知設定、お問い合わせフォームの希望項目、ECサイトのオプション設定など、あらかじめ選択状態を用意しておきたいフォームで活用できます。JavaScriptを使用せずHTMLとCSSだけで実装できるため、シンプルで導入しやすく、既存のフォームにも組み込みやすい構成です。
タイトル、説明文、ラベル、チェック済みにする項目はHTMLから変更できます。CSSでは文字サイズ、余白、背景色、枠線、角丸、チェックボックスの色などを自由に調整でき、用途に合わせたデザインへ変更できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも見やすく利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
HTMLとCSSが最初から選択された状態になっています。
ページを開いた時点でHTMLとCSSへチェックが入っています。クリックすると自由に選択・解除できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<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="checked-checkbox">
<!-- タイトル -->
<div class="checked-checkbox_title">
興味のある技術
</div>
<!-- 説明文 -->
<p class="checked-checkbox_text">
HTMLとCSSが最初から選択された状態になっています。
</p>
<!-- チェックボックス一覧 -->
<div class="checked-checkbox_list">
<!-- HTML（初期状態で選択） -->
<label class="checked-checkbox_label">
<input
class="checked-checkbox_input"
type="checkbox"
name="skill[]"
value="html"
checked>
HTML
</label>
<!-- CSS（初期状態で選択） -->
<label class="checked-checkbox_label">
<input
class="checked-checkbox_input"
type="checkbox"
name="skill[]"
value="css"
checked>
CSS
</label>
<!-- JavaScript -->
<label class="checked-checkbox_label">
<input
class="checked-checkbox_input"
type="checkbox"
name="skill[]"
value="javascript">
JavaScript
</label>
<!-- PHP -->
<label class="checked-checkbox_label">
<input
class="checked-checkbox_input"
type="checkbox"
name="skill[]"
value="php">
PHP
</label>
</div>
<!--
最初から選択する項目は
checked属性を付けるだけで変更できます。
例
<input type="checkbox" checked>
checkedを削除すると初期状態では
選択されなくなります。
-->
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは複数のチェックボックスを配置し、一部の項目へchecked属性を付けることで、ページを開いた時点から指定した項目が選択された状態を作成します。CSSでは全体のレイアウトやチェックボックスのデザイン、余白や配色を設定しており、そのままフォームやアンケート画面などへ利用できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはチェックボックス全体を構成するファイルです。タイトル、説明文、チェック項目の名前を変更できるほか、checked属性を付け替えることで最初から選択される項目を自由に変更できます。
style.cssはチェックボックス全体のデザインを設定するファイルです。横幅、余白、背景色、文字サイズ、角丸、チェックボックスの大きさなどを用途に合わせて変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存してください。その後、sample/index.htmlをブラウザで開くと、指定した項目が最初から選択された状態で表示されます。利用者は必要に応じてチェックを追加・解除できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、チェック項目名、初期状態で選択する項目を変更できます。用途に合わせてアンケート、興味のある分野、利用規約への同意項目などへ変更できます。
style.cssでは全体の横幅、余白、背景色、文字サイズ、枠線、角丸、チェックボックスのサイズや色を変更できます。レイアウトやデザインも用途に合わせて調整できます。
数値調整
style.css
max-width:700px;
チェックボックス全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなります。
gap:12px;
チェック項目同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
min-height:56px;
各項目の高さです。値を大きくするとクリックしやすくなり、小さくするとコンパクトになります。
padding:14px 18px;
各項目の内側余白です。値を大きくすると余白が広がります。
border-radius:12px;
各項目の角丸です。値を大きくすると丸みが強くなります。
width:22px;・height:22px;
チェックボックス本体のサイズです。値を大きくするとチェックボックスが大きく表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅へ合わせて自動調整されます。また、640px以下では余白を小さくするメディアクエリを使用しているため、スマートフォン・タブレット・PCで利用できます。
コメント