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

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

縦に2列で並ぶチェックボックスを作る方法

複数のチェックボックスを2列に分けて、縦方向へ見やすく並べる方法を紹介します。このサンプルでは、「HTML」「CSS」「JavaScript」「PHP」「Python」「SQL」の6つのチェックボックスを用意し、PCやタブレットでは2列に分けて表示します。1列だけで縦に並べる場合と比べて横方向のスペースを活用できるため、複数の選択肢をコンパクトにまとめられます。

HTMLで各チェックボックスと項目名を配置し、CSSのGridレイアウトを使って2列に整列させます。チェックボックス一覧へgrid-template-columns:repeat(2,minmax(0,1fr))を設定することで、左右を同じ横幅に分けて項目を配置します。チェックボックスの選択にはHTML標準の動作を利用するため、JavaScriptは使用しません。

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

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

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

デモ

縦に2列で並ぶチェックボックス

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

HTML CSS JavaScript PHP Python SQL

PCやタブレットでは2列、画面幅が狭いスマートフォンでは1列に切り替わります。

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

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードをUTF-8へ設定 -->
  <meta charset="UTF-8">

  <!-- スマートフォンやタブレットの画面幅へ対応 -->
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">

  <!-- ブラウザのタブへ表示するページタイトル -->
  <title>縦に2列で並ぶチェックボックス</title>

  <!-- チェックボックスのデザインを設定するCSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 縦に2列で並ぶチェックボックス全体 -->
  <div class="vertical-two-column-checkbox_wrap">

    <!-- 6個のチェックボックスを2列で並べる一覧 -->
    <div class="vertical-two-column-checkbox_list">

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

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

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

      </label>

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

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

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

      </label>

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

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

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

      </label>

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

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

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

      </label>

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

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

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

      </label>

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

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

        <!-- SQLの項目名 -->
        <span class="vertical-two-column-checkbox_name">
          SQL
        </span>

      </label>

    </div>

  </div>

</body>
</html>

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

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

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

/* チェックボックス一覧 */
.vertical-two-column-checkbox_list{
  display:grid; /* チェックボックスをグリッドレイアウトで配置 */
  grid-template-columns:repeat(2,minmax(0,1fr)); /* 同じ横幅の2列で表示 */
  gap:12px 16px; /* 行方向12px・列方向16pxの間隔 */
}

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

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

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

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

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

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

  /* スマートフォンではチェックボックスを1列で表示 */
  .vertical-two-column-checkbox_list{
    grid-template-columns:1fr; /* 2列から1列へ変更 */
  }

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

}

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

ファイル構成と設置方法

このサンプルはHTML・CSSの2ファイルで構成されています。HTMLで6個のチェックボックスを配置し、CSSのGridレイアウトを使って2列に分けて表示します。チェックボックスの選択にはHTML標準の動作を使用しているため、JavaScriptファイルは必要ありません。

チェックボックス一覧へdisplay:gridとgrid-template-columns:repeat(2,minmax(0,1fr))を設定することで、左右を同じ横幅に分けた2列のレイアウトを作ります。6個の項目を配置しているため、通常の画面幅では2列×3行で表示されます。

外部ライブラリや外部サービス、API、画像などは使用していません。APIキーや外部URLなど利用者自身で用意する情報もなく、sampleフォルダ内のindex.htmlとstyle.cssだけで動作します。画面幅560px以下では2列から1列へ切り替えるレスポンシブ対応もCSSだけで行っています。

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

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

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

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

PCやタブレットなど横幅に余裕がある画面では、6個のチェックボックスが2列×3行で表示されます。それぞれの項目をクリックするとチェック状態を個別に切り替えられます。JavaScriptによる独自の選択処理は使用していないため、通常のHTMLチェックボックスとして利用できます。

項目を追加する場合は、.vertical-two-column-checkbox_labelと同じ構造のlabelを追加し、チェックボックスのvalueと表示する項目名を変更します。2列の設定を維持したまま項目を増やすと、追加した項目は3行目以降へ自動的に配置されます。

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

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

列数を変更したい場合は、grid-template-columns:repeat(2,minmax(0,1fr))の2を変更します。たとえばrepeat(3,minmax(0,1fr))へ変更すると3列で表示できます。レスポンシブ時の列数や切り替える画面幅もメディアクエリから変更できます。

数値調整
style.css

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

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

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

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

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

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

grid-template-columns:repeat(2,minmax(0,1fr));
チェックボックス一覧の列数です。2によって同じ横幅の2列を作ります。6項目の場合は2列×3行で表示されます。

gap:12px 16px;
チェックボックス項目同士の間隔です。12pxが上下方向、16pxが左右方向の間隔を表します。それぞれの値を大きくすると対応する方向の間隔が広がります。

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でレスポンシブ対応しています。通常はgrid-template-columns:repeat(2,minmax(0,1fr))によって2列で表示し、6個のチェックボックスを3行に配置します。

画面幅560px以下では@media (max-width:560px)を使用し、grid-template-columns:1frへ変更します。これにより2列だったチェックボックスが1列になり、6個の項目が縦方向へ順番に表示されます。

同じ画面幅でページ全体の余白を24px 12px、チェックボックス全体の上下余白を24px、内側余白を24px 18pxへ縮小し、各項目の内側余白も14pxへ調整しています。PC・タブレットでは2列、画面幅の狭いスマートフォンでは1列として、画面幅に合わせて表示できます。