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

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

縦に2列で並ぶチェックボックスを作る方法を紹介します。このサンプルでは、複数のチェックボックスを左右2列に分け、それぞれの列で上から下へ並べて表示します。HTMLとCSSだけで実装でき、JavaScriptや外部ライブラリは使用しません。

選択肢が多い場合でも、1列だけで表示するより縦方向の長さを抑えられます。お問い合わせ画面の希望項目、アンケートフォームの回答欄、会員サイトの興味分野、ECサイトの商品条件、管理画面の設定項目など、複数の選択肢を整理して見せたい場面に利用できます。

項目名、チェックボックスの数、送信時の値はHTMLから変更できます。列同士や項目同士の間隔、背景色、枠線、角丸、文字サイズ、チェック時の色などはCSSから調整できます。画面幅が狭いスマートフォンでは1列表示へ切り替わるため、タブレットやPCだけでなくスマートフォンでも利用しやすい構成です。

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

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

デモ

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

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

HTML CSS JavaScript PHP Python SQL

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

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

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

  <!-- 文字コード -->
  <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>

  <!-- チェックボックス全体 -->
  <div class="vertical-two-column-checkbox_wrap">

    <!-- タイトル -->
    <h1 class="vertical-two-column-checkbox_title">
      縦に2列で並ぶチェックボックス
    </h1>

    <!-- 説明文 -->
    <p class="vertical-two-column-checkbox_text">
      興味のある項目を自由に選択してください。
    </p>

    <!-- チェックボックス一覧 -->
    <div class="vertical-two-column-checkbox_list">

      <!-- HTML -->
      <label class="vertical-two-column-checkbox_label">
        <input class="vertical-two-column-checkbox_input" type="checkbox" name="interest[]" value="html">
        <span class="vertical-two-column-checkbox_name">HTML</span>
      </label>

      <!-- CSS -->
      <label class="vertical-two-column-checkbox_label">
        <input class="vertical-two-column-checkbox_input" type="checkbox" name="interest[]" value="css">
        <span class="vertical-two-column-checkbox_name">CSS</span>
      </label>

      <!-- JavaScript -->
      <label class="vertical-two-column-checkbox_label">
        <input class="vertical-two-column-checkbox_input" type="checkbox" name="interest[]" value="javascript">
        <span class="vertical-two-column-checkbox_name">JavaScript</span>
      </label>

      <!-- PHP -->
      <label class="vertical-two-column-checkbox_label">
        <input class="vertical-two-column-checkbox_input" type="checkbox" name="interest[]" value="php">
        <span class="vertical-two-column-checkbox_name">PHP</span>
      </label>

      <!-- Python -->
      <label class="vertical-two-column-checkbox_label">
        <input class="vertical-two-column-checkbox_input" type="checkbox" name="interest[]" value="python">
        <span class="vertical-two-column-checkbox_name">Python</span>
      </label>

      <!-- SQL -->
      <label class="vertical-two-column-checkbox_label">
        <input class="vertical-two-column-checkbox_input" type="checkbox" name="interest[]" value="sql">
        <span class="vertical-two-column-checkbox_name">SQL</span>
      </label>

    </div>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* 外側余白 */
  padding:40px 20px; /* ページ全体の余白。変更すると周囲の余白が変わる */
  background:#ffffff; /* 背景色 */
  font-family:sans-serif; /* フォント */
}

/* 全体を囲むボックス */
.vertical-two-column-checkbox_wrap{
  width:100%; /* 横幅 */
  max-width:760px; /* 最大横幅。変更すると全体の横幅が変わる */
  margin:40px auto; /* 上下余白・中央配置 */
  padding:32px; /* 内側余白。変更すると余白が変わる */
  border:1px solid #dfe7f0; /* 枠線 */
  border-radius:18px; /* 角丸。変更すると丸みが変わる */
  background:#f8fafc; /* 背景色 */
  box-sizing:border-box;
}

/* タイトル */
.vertical-two-column-checkbox_title{
  margin:0 0 12px; /* 下余白 */
  color:#111827; /* 文字色 */
  font-size:22px; /* 文字サイズ。変更するとタイトルが大きくなる */
  font-weight:700;
  text-align:center;
}

/* 説明文 */
.vertical-two-column-checkbox_text{
  margin:0 0 24px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  line-height:1.8; /* 行間 */
  text-align:center;
}

/* チェックボックス一覧 */
.vertical-two-column-checkbox_list{
  display:grid;
  grid-template-columns:repeat(2,1fr); /* 常に2列表示 */
  gap:14px 18px; /* 縦横の間隔。変更すると項目同士の間隔が変わる */
}

/* チェックボックスラベル */
.vertical-two-column-checkbox_label{
  display:flex;
  align-items:center;
  min-height:56px; /* 最小高さ */
  padding:14px 18px; /* 内側余白 */
  border:1px solid #dfe7f0; /* 枠線 */
  border-radius:12px; /* 角丸 */
  background:#ffffff; /* 背景色 */
  cursor:pointer;
  box-sizing:border-box;
}

/* チェックボックス */
.vertical-two-column-checkbox_input{
  width:22px; /* 横幅。変更するとチェックボックスが大きくなる */
  height:22px; /* 高さ。変更するとチェックボックスが大きくなる */
  margin-right:14px; /* 文字との間隔 */
  accent-color:#0b6bff; /* チェック時の色 */
  flex-shrink:0;
  cursor:pointer;
}

/* 項目名 */
.vertical-two-column-checkbox_name{
  color:#111827; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  font-weight:700;
  line-height:1.5;
}

/* タブレット */
@media (max-width:768px){

  .vertical-two-column-checkbox_wrap{
    padding:24px; /* 内側余白 */
  }

}

/* スマートフォン */
@media (max-width:480px){

  .vertical-two-column-checkbox_wrap{
    padding:20px; /* 内側余白 */
  }

  .vertical-two-column-checkbox_list{
    grid-template-columns:1fr; /* 1列表示 */
  }

}

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