リストブロックを使ったCSSツリー階層構成図の作成

参考サイト：https://chibashi.me/development/html-css/css-treestructure/

以下のようなツリー階層構成図を作成してみる。

第１階層
- 第２階層
  - 第３階層
- 第２階層

方法として２パターン作成してみた。

① <div>タグを入れてツリー階層図を作成する

<div class=”tree”>を作成して、この中に以下の様にリストを入れる手順になる。

<div class="tree">
  <ul>
    <li>第１階層
      <ul>
        <li>第２階層
          <ul>
            <li>第３階層</li>
          </ul>
        </li>
        <li>第２階層</li>
      </ul>
    </li>
  </ul>
</div>

CSSは以下の様になる。

/*リストの⚫︎を消す*/
.tree ul {
  list-style-type: none;
  margin: 0px 0px 0px 15px;
  padding: 0;
  position: relative;
}
/*各リストの左からの位置*/
.tree ul li {
  position: relative;
  margin: 0px 0px 0px 0px;
  padding: 5px 0px 0px 20px;
}
/*リストの前に横ラインを入れる*/
.tree ul li:before {
  content: "";
  display: block;
  position: absolute;
  top: 18px;
  left: 0;
  width: 13px;
  height: 0;
  border-top: 1px solid #666;
}
/*リストの横ラインの前に縦ラインを入れる*/
.tree ul li:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-left: 1px solid #666;
}
/*縦ラインの下の余分なラインを消す*/
.tree ul li:last-child:after {
  height: 18px;
}
/*最上位の余分な縦横のラインを消す*/
.tree > ul > li:before,.tree > ul > li:after {
  /* 最上位も線を表示する時はコメント化 */
  border: none;
}
/*フォルダアイコンを入れる場合このスタイルが適用される*/
.tree i {
   margin-right: 8px;
}

.tree ul は前が「親」で後が「子」、親要素の下にある「子要素 ul」にスタイルを適用する。
.tree ul li はそれぞれ親と子の関係が続いている場合、３つの親子関係がマッチする最後の「子要素」にスタイルを適用する。
.tree ul li:before は全ての li の前にスタイルを適用する。
.tree ul li:after は全ての li の後にスタイルを適用する。
.tree ul li:last-child:after は兄弟要素の中で最後の li をすべてを選択、その li の後ろにスタイルを適用。
.tree > ul > li:before,.tree > ul > li:after は
.tree i は<i class=”fas fa-folder”>と入れてフォルダーアイコンを入れるための i タグになる。

最後のフォルダーアイコンはここでは使っていない。

② リストの<ul>に直接クラス名を入れてツリー階層図を作成する

リストブロックのulにtreeクラスを作成する方法。
先頭の.treeはhtmでは<ul class=”tree”>にCSSを適用していることになる。

 <ul class="tree">
    <li>第１階層
      <ul>
        <li>第２階層
          <ul>
            <li>第３階層</li>
          </ul>
        </li>
        <li>第２階層</li>
      </ul>
    </li>
</ul>

WorPressで、リストブロックの先頭の<ul>にクラス名を入れる方法は、リストブロックをを入れて「高度な設定」で「追加CSSクラス」にクラス名を設定することで簡単に実現できる。
これが一番作成しやすい。

.tree {
  list-style-type: none;
  margin: 0px 0px 0px 15px;
  padding: 0;
  position: relative;
}

.tree li {
  position: relative;
  margin: 0px 0px 0px 0px;
  padding: 5px 0px 0px 20px;
}

/*横ライン*/
.tree li:before {
  content: "";
  display: block;
  position: absolute;
  top: 18px;
  left: 0;
  width: 13px;
  height: 0;
  border-top: 1px solid #666;
}

/*縦ライン*/
.tree li:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-left: 1px solid #666;
}

.tree li:last-child:after {
  height: 18px;
}

.tree > li:before,
.tree > li:after {
  /* 最上位も線を表示する時はコメント化 */
  border: none;
}

/*リストの⚫︎を消す*/
.tree ul {
  list-style-type: none;
  margin: 0px 0px 0px 15px;
  padding: 0;
  position: relative;
}
/*各リストの左からの位置*/
.tree li {
  position: relative;
  margin: 0px 0px 0px 0px;
  padding: 5px 0px 0px 20px;
}
/*リストの前に横ラインを入れる*/
.tree li:before {
  content: "";
  display: block;
  position: absolute;
  top: 18px;
  left: 0;
  width: 13px;
  height: 0;
  border-top: 1px solid #666;
}
/*リストの横ラインの前に縦ラインを入れる*/
.tree li:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-left: 1px solid #666;
}
/*縦ラインの下の余分なラインを消す*/
.tree li:last-child:after {
  height: 18px;
}
/*最上位の余分な縦横のラインを消す*/
.tree > li:before,
.tree > li:after {
  /* 最上位も線を表示する時はコメント化 */
  border: none;
}