【CSS】チェックボックスを整列させたい【grid】

css

チェックボックスやラジオボタンをただ順番に並べるのではなく、綺麗に整列させたい。
例えば1行に3個ずつ並べたいときはdisplay:gridを使う。

<!DOCTYPE html>
<html>
<head>
    <title>チェックボックスを1行に3個ずつ表示 (グリッド)</title>
    <style>
        /* スタイル付け */
        .checkboxArea {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 1行に3つの列を作成 */
            gap: 10px; /* チェックボックス間の余白を設定 */
        }

        .checkboxArea label {
            display: block; /* ラベルをブロック要素として表示 */
        }
    </style>
</head>
<body>

<!-- チェックボックスを表示 -->
<div class="checkboxArea">
    <label>
        <input type="checkbox"> チェックボックス 1
    </label>
    <label>
        <input type="checkbox"> チェックボックス 2
    </label>
    <label>
        <input type="checkbox"> チェックボックス 3
    </label>
    <label>
        <input type="checkbox"> チェックボックス 4
    </label>
    <label>
        <input type="checkbox"> チェックボックス 5
    </label>
    <label>
        <input type="checkbox"> チェックボックス 6
    </label>
    <label>
        <input type="checkbox"> チェックボックス 7
    </label>
    <label>
        <input type="checkbox"> チェックボックス 8
    </label>
    <label>
        <input type="checkbox"> チェックボックス 9
    </label>
    <label>
        <input type="checkbox"> チェックボックス 10
    </label>
</div>

</body>
</html>

結果は以下の通り、1行に3個ずつ並べられた。

  1. grid-template-columns: グリッドコンテナ内の列の幅を設定するためのプロパティ。
  2. repeat(3, 1fr): repeat 関数を使用して、3つの列を作成し、各列の幅を 1fr に設定する意味。

具体的には、

  • grid-template-columns プロパティは、グリッドコンテナ内に何本の列を配置するかを指定します。
  • repeat(3, 1fr) は、3本の列を作成し、各列の幅を 1fr に設定します。
  • 1fr は “fraction”(分数)を表し、利用可能な水平スペースを均等に3つの部分に分割します。各列は等しい幅を持ちます。

これにより、グリッドコンテナ内に3つの等幅の列が作成され、チェックボックスなどの要素がこれらの列に均等に配置され、1行に3つの要素が表示される。

タイトルとURLをコピーしました