複数の要素をコラム化した話。

投稿日：2023年1月18日

先日、とあるサイトを作っていたら、数十社分の企業一覧を横並びにできないか？　という要望がありました。
横並びとは2コラムにするということです。

検証してみました。

実際の仕事では要素数はある程度決まっていると思いますが、今回は任意で数を変更できるようにしてみました。

仕様
要素数を入力すると入力数分の矩形が連番で表示されます。
コラム数のプルダウンから任意の数を選択すると選択した数の分だけ列に分けられます。
コンテンツ表示後にプルダウンを変更すると動的に列数も変化します。

要素数：

コラム数：

ここに表示されます。

ソースコードです

HTML

<div id="elementsNumWrap">
    <p>要素数：</p>
    <input type="text" placeholder="要素数を入力">
  </div>
  <div id="columnWrap">
    <p>コラム数：</p>
    <select name="columnNum" id="columnNum">
      <option value>選択してください。</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>

  <div id="contentsWrap"></div>

▲要素数の入力欄とコラム数のプルダウンメニュー、それとID値 contentsWrap だけです。
contentsWrap にJavaScriptで実行したコンテンツを入れます。

CSS(SCSS)

#columnWrap {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;

  p {
    margin: 0;
  }
}

p.content {
  background-color: #ccc;
  border-radius: 5px;
  margin: 0 0 .5em 0; /*ここの上部を0にしないとずれる*/
  padding: 0 .25em;
  text-align: center;
}

#elementsNumWrap {
  display: flex;
  align-items: center;
}

JavaScript

// ▼▼▼ 要素数入力
$('#elementsNumWrap input').change(function () {
  elementsNum = $('#elementsNumWrap input').val(); //入力値

  for (let i = 1; i <= elementsNum; i++) { //入力数分、コンテンツ追加
    $('#contentsWrap').append('<p class="content">' + i + '</p>');
  }
});

// ▼▼▼ コラム数変更
$('#columnNum').change(function () {
  let turningNum = $('#columnNum').val(); //プルダウンで選択した数を取得
  $('#contentsWrap').css('columnCount', turningNum);//コラム数を設定
});

▲CSSの column-count(columnCount) でコラム数を指定しています。

まとめ

比較的簡単なソースでできました。
最初、JavaScriptでコンテンツの数を取得し、divで包含。Flexboxでコラム化するという面倒臭い方法を検証していましたが、column-count のことを思い出し簡単な記述で済みました。
私だけだと思いますが、プログラムをやっていると、つい難しく考え、複雑な工程を考えてしまいます。
基礎に戻り、いかに簡単に済ませるか考え直した方が良いと思いました。w

なお、ソースコードはご自由に使っていただいても構いませんが、不備など起こっても責任は負いませんのでご了承ください。

最後まで読んでくださりありがとうございました。