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

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

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

複数のチェックボックスを横方向へ並べ、2行に分けて表示する方法を紹介します。このサンプルでは、「HTML」「CSS」「JavaScript」「PHP」「Python」「SQL」の6つのチェックボックスを用意し、PC表示では1行に3項目ずつ配置して、全体を2行のレイアウトで表示します。縦方向へ1項目ずつ並べる場合と比べて、横幅を活用しながら複数の選択肢をコンパクトにまとめられます。

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

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

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

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

デモ

横に2行で並ぶチェックボックス

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

HTML CSS JavaScript PHP Python SQL

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

<!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="horizontal-two-row-checkbox_wrap">

    <!-- チェックボックスエリアのタイトル -->
    <div class="horizontal-two-row-checkbox_title">
      横に2行で並ぶチェックボックス
    </div>

    <!-- 操作方法を案内する説明文 -->
    <p class="horizontal-two-row-checkbox_text">
      興味のある項目を自由に選択してください。
    </p>

    <!-- 6個のチェックボックスを横3列・縦2行で並べる一覧 -->
    <div class="horizontal-two-row-checkbox_list">

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

        <!-- HTMLの選択状態を管理するチェックボックス -->
        <input
          class="horizontal-two-row-checkbox_input"
          type="checkbox"
          name="interest[]"
          value="html">

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

      </label>

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

        <!-- CSSの選択状態を管理するチェックボックス -->
        <input
          class="horizontal-two-row-checkbox_input"
          type="checkbox"
          name="interest[]"
          value="css">

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

      </label>

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

        <!-- JavaScriptの選択状態を管理するチェックボックス -->
        <input
          class="horizontal-two-row-checkbox_input"
          type="checkbox"
          name="interest[]"
          value="javascript">

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

      </label>

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

        <!-- PHPの選択状態を管理するチェックボックス -->
        <input
          class="horizontal-two-row-checkbox_input"
          type="checkbox"
          name="interest[]"
          value="php">

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

      </label>

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

        <!-- Pythonの選択状態を管理するチェックボックス -->
        <input
          class="horizontal-two-row-checkbox_input"
          type="checkbox"
          name="interest[]"
          value="python">

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

      </label>

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

        <!-- SQLの選択状態を管理するチェックボックス -->
        <input
          class="horizontal-two-row-checkbox_input"
          type="checkbox"
          name="interest[]"
          value="sql">

        <!-- SQLの項目名 -->
        <span class="horizontal-two-row-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; /* ページ全体で使用するフォント */
}

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

/* タイトル */
.horizontal-two-row-checkbox_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間。値を大きくすると行同士の間隔が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.horizontal-two-row-checkbox_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくすると一覧との間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 説明文の行間。値を大きくすると行同士の間隔が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* チェックボックス一覧 */
.horizontal-two-row-checkbox_list{
  display:grid; /* チェックボックスをグリッドレイアウトで並べる */
  grid-template-columns:repeat(3,minmax(0,1fr)); /* PCでは同じ横幅の3列にして、6項目を2行で表示 */
  gap:16px; /* 項目同士の縦横間隔。値を大きくすると余白が広がる */
}

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

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

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

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

  /* タブレットではチェックボックスを2列で表示 */
  .horizontal-two-row-checkbox_list{
    grid-template-columns:repeat(2,minmax(0,1fr)); /* 同じ横幅の2列へ変更 */
  }

}

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

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小して画面を広く使う */
  }

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

  /* スマートフォンではチェックボックスを1列で表示 */
  .horizontal-two-row-checkbox_list{
    grid-template-columns:1fr; /* 各項目を横幅いっぱいの1列へ変更 */
  }

  /* スマートフォン表示時の各項目 */
  .horizontal-two-row-checkbox_label{
    padding:14px; /* 内側余白を14pxへ縮小して表示領域を確保 */
  }

}

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

ファイル構成と設置方法

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

チェックボックス一覧へdisplay:gridとgrid-template-columns:repeat(3,minmax(0,1fr))を設定し、6個の項目を同じ横幅の3列に分けています。6個の項目を3列で配置することで、PCでは自動的に2行のレイアウトになります。

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

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

各ファイルの役割
index.htmlは、チェックボックス一覧を作成するファイルです。「HTML」「CSS」「JavaScript」「PHP」「Python」「SQL」の6項目を配置し、それぞれのinputにname="interest[]"と個別のvalueを設定しています。項目名や項目数を変更する場合は、このファイルを編集します。

style.cssは、チェックボックス全体の横幅、余白、背景色、枠線、角丸、文字サイズ、チェックボックスの大きさなどを設定するファイルです。チェックボックス一覧にはCSS Gridを使用し、PCでは3列、画面幅768px以下では2列、480px以下では1列になるように設定しています。

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

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

項目を変更する場合は、index.html内の.horizontal-two-row-checkbox_labelを編集します。項目を追加する場合は同じ構造のlabelを追加し、表示する項目名とvalueを用途に合わせて変更します。PCで3列を維持した場合、項目数が6個を超えると3行目以降へ自動的に配置されます。

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

style.cssでは、全体の最大横幅、余白、背景色、枠線、角丸、チェックボックスの列数、項目同士の間隔、各項目の高さ、チェックボックスの大きさ、文字サイズなどを変更できます。PCでの列数を変更したい場合は、grid-template-columns:repeat(3,minmax(0,1fr))の3を変更します。

レスポンシブ時の列数も変更できます。画面幅768px以下では2列、480px以下では1列に設定しているため、用途に合わせてブレークポイントや列数を調整できます。

数値調整
style.css

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

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

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

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

border:1px solid #dfe7f0;
チェックボックス全体の枠線です。1pxを大きくすると枠線が太くなります。

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

margin:0 0 12px;
タイトルの下側余白です。12pxを大きくすると説明文との間隔が広がります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

line-height:1.5;
タイトルと項目名の行間です。複数行になった場合、値を大きくすると行同士の間隔が広がります。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとチェックボックス一覧との間隔が広がります。

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

line-height:1.8;
説明文の行間です。値を大きくすると複数行になった場合の行間が広がります。

grid-template-columns:repeat(3,minmax(0,1fr));
PC表示時の列数です。3によって同じ横幅の3列を作り、6項目を3列×2行で表示します。たとえばrepeat(2,minmax(0,1fr))へ変更すると2列になります。

gap:16px;
チェックボックス項目同士の縦横の間隔です。値を大きくすると各項目の間隔が広がります。

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

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

border:1px solid #dfe7f0;
各チェックボックス項目の枠線です。1pxを大きくすると枠線が太くなります。

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

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

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

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。通常はgrid-template-columns:repeat(3,minmax(0,1fr))によって3列で表示し、6個のチェックボックスを2行に配置します。

画面幅768px以下では@media screen and (max-width:768px)を使用し、grid-template-columns:repeat(2,minmax(0,1fr))へ変更します。これによりチェックボックスは2列になり、6項目の場合は3行で表示されます。

画面幅480px以下では@media screen and (max-width:480px)を使用し、チェックボックスをgrid-template-columns:1frの1列へ変更します。同時にページ全体の余白を24px 12px、チェックボックス全体の上下余白を24px、内側余白を24px 18pxへ縮小し、各項目の内側余白も14pxへ調整しています。PC・タブレット・スマートフォンの画面幅に合わせて、3列・2列・1列へ自動的に切り替わります。