縦並びのチェックボックスを作る方法【HTML/CSS・サンプルコード付き】

項目・並び方向・サイズ・色・枠線・角丸などを設定して、HTML・CSSを自動生成できます。

縦並びのチェックボックスを作る方法

複数のチェックボックスを縦方向へ1列に並べる方法を紹介します。このサンプルでは、「HTML」「CSS」「JavaScript」「PHP」「Python」の5つのチェックボックスを用意し、それぞれの項目を上から順番に縦並びで表示します。1項目ずつ横幅いっぱいに配置するため、項目名を確認しやすく、複数の選択肢をシンプルなレイアウトでまとめられます。

HTMLで各チェックボックスと項目名を配置し、CSSのFlexboxを使って縦方向に整列させます。チェックボックス一覧へdisplay:flexとflex-direction:columnを設定することで、各項目を上から下へ1列に並べています。チェックボックスの選択にはHTML標準の動作を利用するため、JavaScriptは使用しません。

アンケートやお問い合わせフォーム、カテゴリー選択、設定画面など、複数の選択肢を縦方向に整理して表示したい場合に利用できます。画面幅640px以下では全体と各項目の余白を小さくするレスポンシブ対応を行っているため、スマートフォンでも画面幅に合わせて表示できます。項目名や項目数はHTMLから変更でき、項目同士の間隔、余白、枠線、角丸、チェックボックスの大きさなどはCSSから調整できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

縦並びのチェックボックス

興味のある項目を自由に選択してください。

HTML CSS JavaScript PHP Python

各項目をクリックすると、縦並びのチェックボックスを複数選択・解除できます。

コードをコピーして使おう！

<!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="vertical-checkbox_wrap">

    <!-- 5個のチェックボックスを縦方向へ並べる一覧 -->
    <div class="vertical-checkbox_list">

      <!-- HTMLのチェックボックス項目 -->
      <label class="vertical-checkbox_label">

        <!-- HTMLを選択するチェックボックス -->
        <input
          class="vertical-checkbox_input"
          type="checkbox"
          name="interest[]"
          value="html">

        <!-- HTMLの項目名 -->
        <span class="vertical-checkbox_name">
          HTML
        </span>

      </label>

      <!-- CSSのチェックボックス項目 -->
      <label class="vertical-checkbox_label">

        <!-- CSSを選択するチェックボックス -->
        <input
          class="vertical-checkbox_input"
          type="checkbox"
          name="interest[]"
          value="css">

        <!-- CSSの項目名 -->
        <span class="vertical-checkbox_name">
          CSS
        </span>

      </label>

      <!-- JavaScriptのチェックボックス項目 -->
      <label class="vertical-checkbox_label">

        <!-- JavaScriptを選択するチェックボックス -->
        <input
          class="vertical-checkbox_input"
          type="checkbox"
          name="interest[]"
          value="javascript">

        <!-- JavaScriptの項目名 -->
        <span class="vertical-checkbox_name">
          JavaScript
        </span>

      </label>

      <!-- PHPのチェックボックス項目 -->
      <label class="vertical-checkbox_label">

        <!-- PHPを選択するチェックボックス -->
        <input
          class="vertical-checkbox_input"
          type="checkbox"
          name="interest[]"
          value="php">

        <!-- PHPの項目名 -->
        <span class="vertical-checkbox_name">
          PHP
        </span>

      </label>

      <!-- Pythonのチェックボックス項目 -->
      <label class="vertical-checkbox_label">

        <!-- Pythonを選択するチェックボックス -->
        <input
          class="vertical-checkbox_input"
          type="checkbox"
          name="interest[]"
          value="python">

        <!-- Pythonの項目名 -->
        <span class="vertical-checkbox_name">
          Python
        </span>

      </label>

    </div>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* チェックボックス全体と内部要素 */
.vertical-checkbox_wrap,
.vertical-checkbox_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅や高さへ含める */
}

/* 縦並びのチェックボックス全体 */
.vertical-checkbox_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 全体の最大横幅。値を大きくすると表示領域が広がる */
  margin:40px auto; /* 上下40pxの余白を付け、左右を中央配置 */
  padding:32px; /* 全体の内側余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #dfe7f0; /* 全体を囲む枠線の太さ・種類・色 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* チェックボックス全体の背景色 */
  color:#111827; /* チェックボックス全体の基本文字色 */
}

/* チェックボックス一覧 */
.vertical-checkbox_list{
  display:flex; /* 各チェックボックスをFlexboxで配置 */
  flex-direction:column; /* 各項目を上から下へ縦方向に並べる */
  gap:12px; /* 項目同士の間隔。値を大きくすると上下の間隔が広がる */
}

/* 各チェックボックス項目 */
.vertical-checkbox_label{
  display:flex; /* チェックボックスと項目名を横並びにする */
  align-items:center; /* チェックボックスと項目名を縦方向の中央へ揃える */
  width:100%; /* 各項目を横幅いっぱいに表示 */
  min-height:56px; /* 項目の最小高さ。値を大きくすると項目が高くなる */
  padding:14px 18px; /* 上下14px・左右18pxの内側余白 */
  border:1px solid #dfe7f0; /* 項目を囲む枠線の太さ・種類・色 */
  border-radius:12px; /* 項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 項目の背景色 */
  color:#111827; /* 項目内の基本文字色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* チェックボックス本体 */
.vertical-checkbox_input{
  width:22px; /* チェックボックスの横幅。値を大きくすると横方向へ大きくなる */
  height:22px; /* チェックボックスの高さ。値を大きくすると縦方向へ大きくなる */
  margin:0 14px 0 0; /* 右側14pxの余白。値を大きくすると項目名との間隔が広がる */
  flex:0 0 auto; /* 横幅が狭くてもチェックボックスのサイズを固定 */
  accent-color:#0b6bff; /* チェック時に表示する色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* キーボード操作時のフォーカス表示 */
.vertical-checkbox_input:focus-visible{
  outline:3px solid rgba(11,107,255,.22); /* フォーカス枠の太さ・種類・色 */
  outline-offset:3px; /* チェックボックスとフォーカス枠の間隔 */
}

/* 各項目の名前 */
.vertical-checkbox_name{
  color:#111827; /* 項目名の文字色 */
  font-size:16px; /* 項目名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 項目名を太字にする */
  line-height:1.5; /* 項目名の行間 */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小 */
  }

  /* スマートフォン表示時のチェックボックス全体 */
  .vertical-checkbox_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小し、左右を中央配置 */
    padding:24px 18px; /* 上下24px・左右18pxへ縮小 */
  }

  /* スマートフォン表示時の各チェックボックス項目 */
  .vertical-checkbox_label{
    padding:14px; /* 内側余白を14pxへ縮小 */
  }

}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSSの2ファイルで構成されています。HTMLで5個のチェックボックスを配置し、CSSのFlexboxを使って各項目を上から下へ縦方向に並べます。チェックボックスの選択にはHTML標準の動作を使用しているため、JavaScriptファイルは必要ありません。

チェックボックス一覧へdisplay:flexとflex-direction:columnを設定し、HTMLに記述した順番で各項目を縦1列に配置します。項目同士の間隔にはgapを使用しているため、各チェックボックスの上下に個別の余白を設定せず、一覧側からまとめて間隔を調整できます。

外部ライブラリや外部サービス、API、画像などは使用していません。APIキーや外部URLなど利用者自身で用意する情報もなく、sampleフォルダ内のindex.htmlとstyle.cssだけで動作します。画面幅640px以下では全体と各項目の余白を調整し、スマートフォンでも表示しやすいレイアウトにしています。

sample/
├── index.html
└── style.css

各ファイルの役割
index.htmlは、HTML・CSS・JavaScript・PHP・Pythonの5個のチェックボックスを記述するファイルです。それぞれのチェックボックスにはname="interest[]"を設定し、項目ごとに異なるvalueを指定しています。項目名や項目数を変更する場合は、このファイルを編集します。

style.cssは、チェックボックス全体の最大横幅、余白、背景色、枠線、角丸、縦並びのレイアウト、各項目の高さ、チェックボックスの大きさなどを設定するファイルです。画面幅640px以下で余白を調整するレスポンシブ設定も、このファイルに記述しています。

設置方法・使い方
sampleフォルダを作成し、その中へindex.htmlとstyle.cssを同じ階層で配置します。index.htmlでは<link rel="stylesheet" href="style.css">を使用してstyle.cssを読み込む構成になっています。2ファイルを配置したら、sample/index.htmlをブラウザで開きます。

画面には5個のチェックボックスが上から順番に縦1列で表示されます。それぞれの項目をクリックすると、チェック状態を個別に切り替えられます。複数のチェックボックスを同時に選択することもできます。

項目を追加する場合は、.vertical-checkbox_labelと同じ構造のlabelを一覧内へ追加し、チェックボックスのvalueと表示する項目名を変更します。追加した項目もFlexboxによって既存の項目の下へ自動的に縦並びで配置されます。

カスタマイズできる内容
index.htmlでは、チェックボックスの項目名、項目数、name、valueを変更できます。現在は5項目すべてにname="interest[]"を設定していますが、実際にフォームへ組み込む場合は送信する内容に合わせて変更できます。

style.cssでは、全体の最大横幅、余白、背景色、枠線、角丸、項目同士の間隔、各項目の高さ、チェックボックスの大きさ、チェック時の色、項目名の文字サイズなどを変更できます。

縦並びの項目同士の間隔は.vertical-checkbox_listのgapから調整できます。また、各項目の横幅はwidth:100%にしているため、チェックボックス全体の横幅に合わせて表示されます。

数値調整
style.css

padding:40px 20px;
ページ全体の余白です。40pxが上下、20pxが左右を表します。値を大きくすると画面端との間隔が広がります。

max-width:700px;
チェックボックス全体の最大横幅です。値を大きくすると各項目も横方向へ広く表示され、小さくすると全体がコンパクトになります。

margin:40px auto;
チェックボックス全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置します。

padding:32px;
チェックボックス全体の内側余白です。値を大きくすると外枠とチェックボックス一覧との間隔が広がります。

border:1px solid #dfe7f0;
チェックボックス全体と各項目に使用している枠線です。1pxを大きくすると枠線が太くなります。

border-radius:18px;
チェックボックス全体の角丸です。値を大きくすると丸みが強くなります。

gap:12px;
縦に並んだチェックボックス同士の間隔です。値を大きくすると各項目の上下間隔が広がります。

min-height:56px;
各チェックボックス項目の最小高さです。値を大きくすると各項目が高くなります。

padding:14px 18px;
各チェックボックス項目の内側余白です。14pxが上下、18pxが左右を表します。値を大きくすると枠線と内容との間隔が広がります。

border-radius:12px;
各チェックボックス項目の角丸です。値を大きくすると丸みが強くなります。

width:22px;・height:22px;
チェックボックス本体の横幅と高さです。値を大きくするとチェックボックスが大きくなります。

margin:0 14px 0 0;
チェックボックス本体の右側余白です。14pxを大きくするとチェックボックスと項目名との間隔が広がります。

outline:3px solid rgba(11,107,255,.22);
キーボード操作でチェックボックスへフォーカスしたときの枠線です。3pxを大きくするとフォーカス枠が太くなります。

outline-offset:3px;
チェックボックス本体とフォーカス枠との間隔です。値を大きくするとフォーカス枠が外側へ離れます。

font-size:16px;
各チェックボックスの項目名の文字サイズです。値を大きくすると文字が大きく表示されます。

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。チェックボックス一覧は通常時からflex-direction:columnによる縦1列のレイアウトになっているため、画面幅640px以下でも並び方は変更せず、各項目を縦方向へ表示します。

画面幅640px以下では@media (max-width:640px)を使用し、ページ全体の余白を24px 12px、チェックボックス全体の上下余白を24px、内側余白を24px 18pxへ縮小します。各チェックボックス項目の内側余白も14pxへ調整し、横幅の狭い画面で使用できる表示にしています。