[CSS+Javascript] 指定した段数でピラミッド状の要素リストを自動生成する

はじめに

先日、あるWEBアプリケーションのデモ開発を行った後、UIの一部、表題内容の処理部分をパーツとして分解し、JSFiddleとCodePenで公開しました。本記事はその詳細という位置づけですが、ほぼ小ネタ扱いです。

ロジック

以下が実行結果となります。処理部分のロジックは比較的単純です。

See the Pen stCreatePyramid by STSHISHO (@STSHISHO) on CodePen.

1-ピラミッドの段数を引数として指定

steps = steps > 10? 10: steps段数の上限を１０に設定しています。サンプルのため負数や浮動小数点への対応はしていません。

2-規定のDIV要素内にUL要素を追加

サンプルのためUL要素を挿入するDIV要素#stPyramidを固定しています。HTML内にも空のDIV要素<div id="stPyramid"></div>を記述しておきます。このDIV要素がピラミッドのコンテナになります。

Sample01.js

const ul = document.createElement('ul')
document.querySelector('#stPyramid').appendChild(ul) //挿入位置
ul.style.width = `${steps*30+20}px` //ulのサイズを設定

3-指定段数分LI要素を追加、SPAN要素を現在の段数分追加

Sample02.js

for (let i = 1, rl = steps; i <= rl; i++) {
  let li = document.createElement('li')
  ul.appendChild(li)
  li.style.width = `${steps*30+20}px` //li要素の幅を動的に設定

  //セル設定
  for (let j = 1; j <= i; j++) {
    let span = document.createElement('span')
    li.appendChild(span)
  }
}

あとはCSSにてDIV内の要素とLI内の要素を中心揃えにするだけです。

使用する場面やカスタマイズについて

サンプルのためUL要素を追加するDIV要素を固定していますが、任意のidを指定できるようにすれば複数のリスト自動生成に対応できます。

また、並べる要素を正方形にしていますが、CSVを読み込んでリストを自動生成する場面を想定し、データに応じたサイズやデザインに対応できるようにしても面白いと思います。

最後に

元になったWEBアプリケーションの詳細について、いずれまとめる予定でいます。