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

先日、あるWEBアプリケーションのデモ開発を行った後、UIの一部、表題内容の処理部分をパーツとして分解し、JSFiddleとCodePenで公開しました。本記事はQiitaで公開した記事の要約版となります。

技術的な話

概ね以下の通りで大したことはしていません。

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

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

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

・CSSにてDIV内の要素とLI内の要素を中心揃えにする

なお、今回紹介した内容について、ソースコードを含めた詳細解説をQiitaにて公開しています。よろしければ訪問してみてください。

フロントエンドの表示・動作不具合の解析も行います

以下サービスよりご相談受付けております。